@font-face{
	font-family: source-bold;
	src: url('../../fonts/Rubik-Bold.ttf') format('truetype');
}

@font-face{
	font-family: source-light;
	src: url('../../fonts/Rubik-Light.ttf') format('truetype');
}

@font-face{
	font-family: source-regular;
	src: url('../../fonts/Rubik-Regular.ttf') format('truetype');
}

* { 
	margin: 0;
 	padding: 0;
 	font-family: source-bold, sans-serif;
}

body {
    background: var(--color-primary);
	scroll-behavior: smooth;
	transition: .6s all ease;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}

:root {
	--color-primary: rgb(144, 42, 52);
	--color-secundary: #ffbe00;
	--color-tercery: #ff5d1f;
	--color-back: #F8EDEB;
	--color-gray: #F2F2F2;
	--color-white: #ffffff;
	--color-black: #000000;
	--color-wsp: #3BAF4F;
	--font-family-bold: source-bold;
	--font-family-light: source-light;
    --font-family-regular: source-regular;
}

::-webkit-scrollbar {
	width: 0;
	height: 0;
}

::-webkit-scrollbar-thumb {
	background: var(--color-gray);
	border-radius: 2.5px;
	margin-inline: 2px;
}

.body {
    display: flex;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}

.main {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 200vh;
    height: 200svh;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='8' fill='rgb(144,42,52)' stroke='white' stroke-width='3'/%3E%3C/svg%3E") 12 12, auto;
    transition: transform 0.6s ease-in-out;
}

.main__content {
    display: flex;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    background: var(--color-primary);
    position: relative;
}

.main__center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40vw;
    height: max-content;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.main__img {
    width: 25vw;
    height: auto;
}

.main__title {
    color: var(--color-white);
    font-family: var(--font-family-bold);
    font-size: 3.4vw;
    text-align: center;
    margin-block: .5vw 5vw;
}

.main__subtitle {
    color: var(--color-white);
    font-family: var(--font-family-bold);
    font-size: 2vw;
    position: absolute;
    right: 2vw;
    bottom: 2vw;
}

.main__register {
    color: var(--color-white);
    font-family: var(--font-family-bold);
    font-size: 3vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 4vw;
    right: 3vw;
}

.main__texts {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    position: absolute;
    left: 1vw;
    top: 2vw;
}

.main__texts-content {
    display: flex;
    height: 2.5vw;
	overflow: hidden;
	position: relative;
	transition: 2s all ease;
	margin-block: .5vw;
}

.main__texts-content:after {
	content: '';
	height: 104%;
	width: 3px;
	background: var(--color-white);
	position: absolute;
	right: 0;
	top: -2%;
	filter: drop-shadow(2px 4px 6px black);
}

.main__text {
    display: none;
    color: var(--color-white);
    font-family: var(--font-family-light);
    font-size: 2vw;
    margin-block: .2vw;
    padding-inline: 1vw;
    white-space: nowrap;
	transition: 3s all ease;
}

.main__more, .que__next-respo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    width: auto;
    height: max-content;
    padding: 0;
    border-radius: 1.5vw;
    border: 2px solid var(--color-white);
    position: absolute;
    padding-top: 1vw;
    bottom: 4vw;
    left: 10vw;
    cursor: pointer;
    transition: .3s all ease;
    z-index: 400;
}

.main__more:after, .que__next-respo:after {
    content: '';
    display: flex;
    width: calc(100% - 6px);
    height: 0;
    background: var(--color-white);
    border-radius: 1.5vw;
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: -2;
    transition: .3s all ease;
}

.main__more:before, .que__next-respo:before {
    content: '';
    display: flex;
    width: 100%;
    aspect-ratio: 1;
    height: auto;
    background: var(--color-primary);
    border-radius: 1.5vw;
    position: absolute;
    bottom: 0;
    right: 0;
    transition: .3s all ease;
    z-index: -1;
}

.main__more:hover, .que__next-respo:hover  {
    transform: scale(1.05);
}

.main__more:hover:after, .que__next-respo:hover:after {
    height: calc(100% - 9px);
}

.main__more:hover:before, .que__next-respo:hover:before {
    opacity: 1;
}

.main__more:hover .main__more-text { color: var(--color-primary); }

.main__more-text, .que__next-respo-text {
    color: var(--color-white);
    font-family: var(--font-family-bold);
    font-size: 1.2vw;
    line-height: none;
    text-decoration: none;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}

.main__more-form, .que__next-respo-form {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2vw;
    height: 2vw;
    margin-inline: 3px;
    margin-block: 1vw 3px;
    border-radius: 50%;
    background: var(--color-white);
    transition: .3s all ease;
    overflow: hidden;
}

@keyframes moreFlechaVertical {
    0% { transform: translateY(105%); }
    30% { transform: translateY(0); }
    70% { transform: translateY(0); }
    0% { transform: translateY(-105%); }
}

.main__more-flecha, .que__next-respo-flecha {
    color: var(--color-primary);
    font-family: var(--font-family-bold);
    font-size: 2vw;
    transition: .6s all ease;
    transform: translateY(105%);
    animation: moreFlechaVertical 1.5s ease infinite;
}

.que__next-respo { border: 2px solid var(--color-primary); display: none; }
.que__next-respo:after { background: var(--color-primary); }
.que__next-respo:hover .que__next-respo-text { color: var(--color-primary); }
.que__next-respo:before { background: var(--color-white); }
.que__next-respo-text { color: var(--color-primary); }
.que__next-respo:hover .que__next-respo-text { color: var(--color-white); }
.que__next-respo-form { background: var(--color-primary); }
.que__next-respo-flecha { color: var(--color-white); }

.main__items {
    display: flex;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    position: relative;
    overflow: hidden;
    background: var(--color-white);
}

.main__items-logo {
    width: 8vw;
    height: auto;
    bottom: 1vw;
    right: 2vw;
    position: absolute;
    z-index: 550;
}

.main__items-logo-respo { display: none; }

.header {
    position: absolute;
    top: 4vw;
    right: 4vw;
    z-index: 550;
}

.header-respo {
    display: none;
    width: 100vw;
    height: 40vw;
    background: var(--color-white);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 500;
}

.header__item {
    color: var(--color-primary);
    font-family: var(--font-family-bold);
    font-size: 1.4vw;
    text-decoration: none;
    padding: .4vw 1.5vw;
    margin-inline: .3vw;
    border-radius: 2vw;
    border: 2px solid var(--color-primary);
    transition: .3s all ease;
    transition-delay: .2s;
    position: relative;
    z-index: 350;
    overflow: hidden;
    cursor: pointer;
}

.header__item:after {
    content: '';
    width: 0;
    height: 100%;
    background: var(--color-primary);
    border-radius: 2vw;
    position: absolute;
    top: 0;
    left: 0;
    transition: .3s all ease;
    z-index: -1;
}

.header__item-active { color: var(--color-white); }
.header__item-active:after { width: 100%; }

.header__item:hover:after {
    width: 100%;
}

.header__item:hover {
    color: var(--color-white);
}

.footer {
    display: flex;
    position: absolute;
    bottom: 1vw;
    left: 2vw;
}

.footer__copy {
    color: var(--color-primary);
    font-family: var(--font-family-light);
    font-size: 1.2vw;
}

.main__slider {
    display: flex;
    width: max-content;
    transition: .6s all ease-out;
}

.main__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='6' fill='rgb(144,42,52)' stroke='rgb(144,42,52)' stroke-width='3' fill-opacity='0.8'/%3E%3C/svg%3E") 12 12, auto;
}

.que__content {
    display: flex;
    width: 100vw;
}

.que__titles {
    display: flex;
    flex-direction: column;
    width: 45vw;
    margin-block: 2vw 0;
    margin-inline: 10vw 0;
}

.que__text {
    color: var(--color-primary);
    font-family: var(--font-family-light);
    font-size: 1.5vw;
    line-height: 1.4;
    margin-block: 1vw;
}

.que__text:nth-of-type(2) {
    width: 75%;
    margin-inline: auto 0;
    font-family: var(--font-family-bold);
    text-align: center;
}

.que__next {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 1.5vw;
    border: 2px solid var(--color-primary);
    position: absolute;
    padding-left: 1vw;
    bottom: 50vh;
    bottom: 50svh;
    right: 10vw;
    cursor: pointer;
    z-index: 400;
    transition: .3s all ease;
}

.que__next:after {
    content: '';
    display: flex;
    width: 0;
    height: calc(100% - 6px);
    background: var(--color-primary);
    border-radius: 1.5vw;
    position: absolute;
    bottom: 3px;
    left: 3px;
    z-index: -2;
    transition: .3s all ease;
}

.que__next:before {
    content: '';
    display: flex;
    height: 100%;
    aspect-ratio: 1;
    width: auto;
    background: var(--color-white);
    border-radius: 1.5vw;
    position: absolute;
    bottom: 0;
    right: 0;
    transition: .3s all ease;
    z-index: -1;
}

.que__next:hover {
    transform: scale(1.05);
}

.que__next:hover:after {
    width: calc(100% - 9px);
}

.que__next:hover:before {
    opacity: 1;
}

.que__next:hover .que__next-text { color: var(--color-white); }

.que__next-text {
    color: var(--color-primary);
    font-family: var(--font-family-bold);
    font-size: 1.2vw;
    line-height: none;
    text-decoration: none;
    transition: .3s all ease;
    transition-delay: .2s;
}

.que__next-form {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2vw;
    height: 2vw;
    margin-block: 3px;
    margin-inline: 1vw 3px;
    border-radius: 50%;
    background: var(--color-primary);
    transition: .3s all ease;
    overflow: hidden;
}

@keyframes moreFlechaHorizontal {
    0% { transform: translateX(105%); }
    30% { transform: translateX(0); }
    70% { transform: translateX(0); }
    0% { transform: translateX(-105%); }
}

.que__next-flecha {
    color: var(--color-white);
    font-family: var(--font-family-bold);
    font-size: 2vw;
    transition: .6s all ease;
    transform: translateX(105%);
    animation: moreFlechaHorizontal 1.5s ease infinite;
}

/* Como lo hacemos? */
.como__content {
    display: flex;
    width: 100vw;
}

.como__titles {
    display: flex;
    flex-direction: column;
    width: 45vw;
    margin-block: 2vw 0;
    margin-inline: 10vw 0;
}

.como__text {
    color: var(--color-primary);
    font-family: var(--font-family-light);
    font-size: 1.5vw;
    text-align: center;
    line-height: 1.4;
    margin-block: 1vw;
}

.como__text:nth-of-type(2) {
    width: 75%;
    margin-inline: auto;
    font-family: var(--font-family-bold);
    text-align: center;
}

/* Ultimos trabajos */
.work__content {
    display: flex;
    flex-wrap: wrap;
    width: 100vw;
}

.work__items {
    display: flex;
    flex-wrap: wrap;
    width: 60vw;
    margin-inline: 10vw 0;
    margin-block: 6vw 0;
}

.work__item {
    display: flex;
    flex-direction: column;
    width: 17vw;
    height: 17.3vw;
    margin: 1vw;
    border: 1px solid var(--color-black);
    border-radius: 1vw;
    position: relative;
}

.work__item-imgs {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1vw 1vw 0 0;
    overflow: auto;
}

.work__item-img {
    width: 100%;
    height: auto;
}

.work__item-texts {
    display: flex;
    background: var(--color-white);
    flex-direction: column;
    width: calc(100% - 1vw);
    padding-inline: .5vw;
    height: auto;
    padding-block: 1vw;
    border-top: 1px solid var(--color-black);
    border-radius: 0 0 1vw 1vw;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: .3s all ease;
}

.work__item-title {
    color: var(--color-primary);
    font-family: var(--font-family-bold);
    font-size: 1.4vw;
    text-align: center;
}

.work__item-text {
    color: var(--color-primary);
    font-family: var(--font-family-light);
    font-size: 1vw;
    text-align: center;
    margin-block: .5vw 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .3s all ease;
}

.work__item:hover .work__item-text {
    -webkit-line-clamp: 12;
}

/* contacto */
.contacto__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    position: relative;
}

.contacto__data {
    display: flex;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    margin-block: 0 4vw;
}

.contacto__place {
    display: flex;
    max-width: 30vw;
    flex-direction: column;
    margin-inline: 0 10vw;
}

.contacto__subtitle {
    color: var(--color-primary);
    font-family: var(--font-family-bold);
    font-size: 1.5vw;
}

.contacto__text {
    color: var(--color-primary);
    font-family: var(--font-family-light);
    font-size: 1.5vw;
    margin-block: 1vw 0;
}

.contacto__title {
    display: flex;
    width: 100%;
    justify-content: center;
    color: var(--color-primary);
    font-family: var(--font-family-bold);
    font-size: 2vw;
    position: absolute;
    bottom: 10vw;
    left: 0;
}

.contacto__items {
    display: flex;
    flex-direction: column;
}

.contacto__item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin-block: 1vw;
}

.contacto__item-img {
    width: 1.8vw;
    height: auto;
    margin-inline: 0 1.5vw;
    fill: var(--color-primary);
    transition: .3s all ease;
}

.contacto__item:hover .contacto__item-img {
    transform: scale(1.1);
}

.contacto__item-label {
    color: var(--color-primary);
    font-family: var(--font-family-regular);
    font-size: 1.5vw;
}

@media screen and (max-width: 650px) {
    .main__register { display: flex; width: 100%; justify-content: center; top: 10vw; right: 0; font-size: 10vw; }
    .main__texts { top: 30vw; left: 5vw; }
    .main__texts-content { height: 7vw; margin-block: 1vw; }
    .main__text { font-size: 6vw; padding-inline: 4vw; }
    .main__img { width: 75vw; margin-block: 15vw 0; }
    .main__title { font-size: 6vw; margin-block: -10vw 4vw; display: flex; width: 100vw; justify-content: center; }
    .main__subtitle { left: 8vw; right: auto; font-size: 5vw; bottom: 5vw; }
    .main__more { left: auto; right: 5vw; border: 1px solid var(--color-white); padding-top: 3vw; border-radius: 4vw; }
    .main__more:before { border-radius: 4vw; }
    .main__more-text { font-size: 3.5vw; }
    .main__more-form { width: 4vw; height: 4vw; margin-block: 2vw 3px; }
    .main__more-flecha { font-size: 3.7vw; }
    .main__slider { width: 100vw; height: max-content; flex-direction: column; }
    /* Header */
    .header { display: flex; flex-direction: column; }
    .header-respo { display: flex; }
    .header__item { border-radius: 3vw; font-size: 3vw; text-align: center; margin-block: 1vw; }
    .header__item:after { border-radius: 3vw; }
    /* Footer */
    .footer__copy { font-size: 2.8vw; }
    /* Logo */
    .main__items-logo { width: 30vw; top: 5vw; left: 15vw; right: auto; bottom: auto; display: none; }
    .main__items-logo-respo { display: flex; }
    /* Next btn */
    .que__next { display: none; left: auto; right: 5vw; border: 1px solid var(--color-white); padding-top: 3vw; border-radius: 4vw; }
    .que__next:before { border-radius: 4vw; }
    .que__next-text { font-size: 3.5vw; }
    .que__next-form { width: 4vw; height: 4vw; margin-block: 2vw 3px; }
    .que__next-flecha { font-size: 3.7vw; }
    .que__next-respo { display: flex; }
    .que__next-respo { left: auto; right: 5vw; border: 1px solid var(--color-primary); padding-top: 3vw; border-radius: 4vw; }
    .que__next-respo:before { border-radius: 4vw; }
    .que__next-respo-text { font-size: 3.5vw; } 
    .que__next-respo-form { width: 4vw; height: 4vw; margin-block: 2vw 3px; }
    .que__next-respo-flecha { font-size: 3.7vw; }
    /* Que */
    .que__titles { width: 85vw; margin-inline: auto; margin-block: 10vw 0; }
    .que__text { font-size: 3.5vw; line-height: 1.5; }
    /* Como */
    .como__titles { width: 85vw; margin-inline: auto; margin-block: 10vw 0; }
    .como__text { font-size: 3.5vw; line-height: 1.5; }
    /* Works */
    .work__items { width: 90vw; margin-inline: auto; justify-content: center; }
    .work__item { width: 38vw; height: 30vw; border-radius: 4vw; margin: 1.5vw; }
    .work__item-imgs { border-radius: 4vw 4vw 0 0; }
    .work__item-texts { border-radius: 0 0 4vw 4vw; padding-inline: 1vw; width: calc(100% - 2vw); padding-block: 1.5vw; }
    .work__item-title { font-size: 3vw; }
    .work__item-text { font-size: 2.3vw; margin-block: 1vw 0; -webkit-line-clamp: 18; max-height: 8vw; overflow: auto; }
    .work__item:focus .work__item-text { max-height: 15vw; }
    .work__item:hover .work__item-text { max-height: 15vw; }
    /* Contacto */
    .contacto__title { font-size: 4vw; bottom: 30vw; }
    .contacto__data { flex-direction: column; }
    .contacto__place { max-width: 60vw; margin-inline: auto; margin-block: 5vw 0; }
    .contacto__subtitle { font-size: 3.5vw; text-align: center; }
    .contacto__text { font-size: 3.5vw; text-align: center; margin-block: 2vw 0; }
    .contacto__items { margin-block: 10vw 0; }
    .contacto__item { margin-block: 2vw; }
    .contacto__item-img { width: 3.3vw; margin-inline: 0 2.5vw; }
    .contacto__item-label { font-size: 3.5vw; }
}