@layer reset,base,layout,components,utilities;@layer reset{*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0;font:inherit}html{color-scheme:light dark;hanging-punctuation:first last}body{min-height:100vh}img,picture,svg,video{display:block;max-width:100%}h1,h2,h3,h4,h5,h6{text-wrap:balance}p{max-width:75ch;text-wrap:pretty}button{--webkit-appearance: none;border-radius:0;text-align:inherit;background:none;box-shadow:none;padding:0;cursor:pointer;border:none;color:inherit;font:inherit}@media (prefers-reduced-motion: no-preference){:has(:target){scroll-behavior:smooth;scroll-padding-top:3rem}}}@layer base{@font-face{font-family:Roboto;src:url(/Roboto-Regular.ttf) format("truetype");font-weight:400}@font-face{font-family:Roboto;src:url(/Roboto-Bold.ttf) format("truetype");font-weight:700}@font-face{font-family:Roboto;src:url(/Roboto-SemiBold.ttf) format("truetype");font-weight:600}@font-face{font-family:OpenSans;src:url(/OpenSans-Regular.ttf) format("truetype");font-weight:400}:root{--white: rgb(255, 255, 255);--blue-100: rgb(243, 248, 250);--blue-500: rgb(91, 151, 170);--blue-900: rgb(36, 59, 66);--orange-500: rgb(226, 149, 77);--gray-500: rgb(117, 117, 117);--gray-800: rgb(51, 51, 51);--primary-color: var(--blue-500);--primary-background: var(--white);--text-color: var(--gray-800);--text-color-bold: var(--blue-900);--text-color-secondary: var(--gray-500);--secondary-background: var(--blue-100);--accent-color: var(--orange-500);--text-ff: OpenSans;--title-ff: Roboto;--text-fw-normal: 400;--text-fw-semibold: 600;--text-fw-bold: 700;--text-size-normal: 1rem;--text-size-big-1-25: var(--text-size-normal);--text-size-big-2: calc(var(--text-size-normal) * 1.5);--text-size-big-3: calc(var(--text-size-normal) * 2);@media (min-width: 900px){--text-size-big-1-25: calc(var(--text-size-normal) * 1.25);--text-size-big-2: calc(var(--text-size-normal) * 2);--text-size-big-3: calc(var(--text-size-normal) * 3)}--border-size: .5rem}html{font-family:var(--text-ff),sans-serif;color:var(--text-color);background-color:var(--primary-background)}}@layer layout{main{margin-top:2rem}section{--padding-left: 50px;--padding-right: 50px;@media (min-width: 900px){--padding-left: 120px;--padding-right: 120px}padding:30px var(--padding-right) 30px var(--padding-left);display:grid;grid-template-areas:"aside" "content";align-items:center;gap:clamp(10px,6rem,30px);position:relative;.section__content{grid-area:content;.section__category{color:var(--primary-color);text-transform:uppercase;font-family:var(--title-ff),sans-serif;font-weight:var(--text-fw-semibold);font-size:var(--text-size-big-1-25);line-height:var(--text-size-big-1-25);grid-row:1}.section__title{color:var(--text-color-bold);font-family:var(--title-ff),sans-serif;font-weight:var(--text-fw-bold);font-size:var(--text-size-big-3)}.section__tagline{color:var(--text-color-bold);font-family:var(--title-ff),sans-serif;font-weight:var(--text-fw-semibold);font-size:var(--text-size-big-2)}.section__text{font-size:var(--text-size-normal);margin-top:1rem}}.section__decoration,.section__user-input{grid-area:aside}&.section__aside--first{grid-template-areas:"content" "aside"}}@media (min-width: 900px){section{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"content aside"}section.section__content--right{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"aside content"}}}@layer components{.cta{background-color:var(--primary-color);color:var(--primary-background);border-radius:10px;padding:.5rem 1rem;text-transform:uppercase;font-weight:var(--text-fw-semibold);text-decoration:none}header{background-color:var(--primary-color);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(32px,2rem,128px);font-family:var(--title-ff),sans-serif;.header__logo img{width:150px;height:auto}@media (max-width: 899px){.header__logo img{width:50px;height:50px;filter:brightness(0) invert(1)}}ul,.cta {display: none;} #nav-button {background-color: var(--primary-background); -webkit-mask: url(burger-menu.svg) no-repeat center; mask: url(burger-menu.svg) no-repeat center; height: 32px; aspect-ratio: 1; cursor: pointer;} ul.active {position: fixed; inset: 0; z-index: 1000; height: 100vh; height: 100dvh; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; background-color: var(--primary-color); color: var(--primary-background); list-style: none; overflow-y: auto; padding: 5rem 2rem 2rem; li {width: min(100%,22rem); text-align: center; border-bottom: 1px solid rgb(255 255 255 / 30%);} li:first-child {border-top: 1px solid rgb(255 255 255 / 30%);} a {display: block; padding: 1rem; font-size: clamp(1.25rem,5vw,1.75rem); font-weight: var(--text-fw-semibold); text-decoration: none; color: var(--primary-background);} a:visited {color: var(--primary-background);} a:hover {text-decoration: underline;}} #nav-button[aria-expanded="true"] {position: fixed; top: 1rem; right: 1rem; z-index: 1001; width: 44px; height: 44px; aspect-ratio: auto; background: none; -webkit-mask: none; mask: none;} #nav-button[aria-expanded="true"]::before,#nav-button[aria-expanded="true"]::after {content: ""; position: absolute; top: 21px; left: 9px; width: 26px; height: 2px; background: var(--primary-background);} #nav-button[aria-expanded="true"]::before {transform: rotate(45deg);} #nav-button[aria-expanded="true"]::after {transform: rotate(-45deg);} @media (min-width: 900px) {background-color: var(--primary-background); #nav-button {display: none;} .cta {display: block; margin: .5rem;} ul {list-style: none; display: flex; flex-direction: row; gap: 1.5rem; a {color: var(--primary-color); text-decoration: none;}}}}.separator{width:100%}#hero-section{.section__text .cta{display:inline-block;margin-top:1rem}.section__decoration{display:grid;grid-template-columns:5fr 5fr 1fr;img {border-radius: 3rem; border: var(--border-size) solid var(--primary-background); object-fit: cover; height: 100%; width: 100%;} div:nth-child(1) {grid-column: 1 / 3; grid-row: 1 / 4;} div:nth-child(2) {grid-column: 2 / 4; grid-row: 2 / 5;}}}#about-section{background-color:var(--secondary-background);.section__text{line-height:1.6}.section__text p+p{margin-top:1em}.section__decoration{position:relative;display:grid;place-content:center;--decorative-circles-scale-factor: 1;@media (min-width: 900px){--decorative-circles-scale-factor: 1.5}}.section__decoration div:first-child{position:relative}.section__decoration .about-section__pfp{border-radius:50%;overflow:hidden;height:auto;aspect-ratio:1;position:relative;z-index:2;border:var(--border-size) solid var(--secondary-background)}.section__decoration div:nth-child(2){background-color:var(--accent-color);height:calc(var(--text-size-normal) * var(--decorative-circles-scale-factor) * 3);aspect-ratio:1;border-radius:50%;position:absolute;right:0;top:70%;z-index:3}.section__decoration div:nth-child(3){background-color:var(--primary-color);aspect-ratio:1;border-radius:50%;position:absolute;height:calc(var(--text-size-normal) * var(--decorative-circles-scale-factor) * 4);top:5%;left:0;z-index:1}.section__decoration div:nth-child(4){background-color:var(--primary-color);height:calc(var(--text-size-normal) * var(--decorative-circles-scale-factor) * 6);aspect-ratio:1;border-radius:50%;position:absolute;bottom:0;left:0;z-index:3;border:var(--border-size) solid var(--secondary-background)}ul {padding-left: 2rem;}}#services-section{.services__intro{margin-top:1rem;color:var(--text-color-secondary)}@media (min-width: 900px){.section__content{grid-column:span 2}}h3 {color: var(--text-color-bold); font-family: var(--title-ff),sans-serif; font-weight: var(--text-fw-semibold); font-size: var(--text-size-big-2);} @media (min-width: 900px) {.services {display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; justify-content: space-around; padding: 0 6rem;}} .service:first-child {.service__image {background-image: url(img/service1.png);}} .service:last-child {.service__image {background-image: url(img/service2.png);}} .service { --horizontal-padding: 2rem; border: calc(var(--border-size) * .5) solid var(--accent-color); border-radius: .5rem; margin-top: 8rem; position: relative; --image-width: 150px; padding: calc(var(--image-width) / 1.5) var(--horizontal-padding) 2rem var(--horizontal-padding); display: flex; flex-direction: column; @media (min-width: 900px) { --horizontal-padding: 4rem; } .service__image { position: absolute; top: calc(-1 * var(--image-width) / 2); left: calc(50% - var(--image-width) / 2); border-radius: 1rem; overflow: hidden; width: var(--image-width); height: var(--image-width); background-size: cover; background-position: center; background-repeat: no-repeat; } .service__price { color: var(--text-color-bold); font-family: var(--title-ff), sans-serif; font-weight: var(--text-fw-bold); font-size: var(--text-size-big-3); margin: 1rem 0; span { font-family: var(--text-ff), sans-serif; font-size: var(--text-size-normal); font-weight: var(--text-fw-normal); color: var(--text-color-secondary); } } .service__facts { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; li { border-radius: 999px; background: var(--secondary-background); padding: .4rem .75rem; font-size: .875rem; } } .service__description { flex-grow: 1; h4 { color: var(--text-color-bold); font-weight: var(--text-fw-semibold); margin: 1.25rem 0 .5rem; } ul { list-style: none; display: grid; gap: .5rem; margin-bottom: 1rem; li { position: relative; padding-left: 1.25rem; &::before { content: "•"; color: var(--accent-color); position: absolute; left: 0; font-weight: var(--text-fw-bold); } } } .service__note { color: var(--text-color-secondary); font-size: .875rem; margin-top: 1rem; } } .cta { display: block; width: 100%; text-align: center; text-decoration: none; } }}#testimonials-section{--carousel-button-size: 1rem;background-color:var(--secondary-background);.section__content{grid-column:span 2;min-width:0}.carousel{display:flex;gap:1em}.carousel__track{width:calc(100vw - var(--carousel-button-size) * 2 - (var(--padding-right) + var(--padding-left)));overflow:hidden}.carousel__carriage{display:flex;gap:1rem;list-style:none;transform:translate(var(--track-x-translation, 0));transition:transform 1s ease}.carousel__dots{margin-top:1rem;display:flex;gap:.5rem;justify-content:center}.carousel__dot{background-color:var(--primary-color);width:1rem;aspect-ratio:1;border-radius:50%}.carousel__dot--active{background-color:var(--text-color-bold)}.testimonial__quote{background-color:var(--primary-background);border-radius:1rem;grid-area:1 / 1;grid-template-columns:15% 70% 15%;padding:2rem;flex:0 0 min(600px,100%);&:before{content:url(icon-quote.svg)}}.testimonial__quote--previous{transform:translate(-80%);z-index:1}.testimonial__quote--active{transform:translate(0)}.testimonial__quote--next{z-index:1}.testimonial__author{color:var(--text-color-bold);font-weight:var(--text-fw-bold);margin-top:1rem}}#contact-section{grid-template-columns:minmax(0,1fr);grid-template-areas:"content" "aside";padding-top:4rem;align-items:stretch;gap:2rem;@media (min-width: 900px){grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"content aside";gap:clamp(3rem,7vw,7rem)}.section__content{padding-block:1rem}.section__title{line-height:1.15}.section__text{color:var(--text-color-bold)}.contact__methods{display:grid;gap:1.5rem;list-style:none;margin-top:2.5rem;li {display: flex; justify-content: start; align-items: center; gap: 1rem; > div:first-child {display: grid; place-items: center; flex: 0 0 3rem; width: 3rem; aspect-ratio: 1; border: 1px solid rgb(117 117 117 / 55%); border-radius: 50%; color: var(--text-color-secondary); font-size: .625rem; text-align: center; svg {width: 1.25rem; height: 1.25rem;}} > div:last-child p:first-child {color: var(--text-color-bold); font-weight: var(--text-fw-bold);} > div:last-child p + p {margin-top: .15rem; color: var(--text-color-bold); font-size: .875rem; a {color: inherit; text-decoration: none; &:hover,&:focus-visible {text-decoration: underline; text-underline-offset: .2em;}}}}}.section__user-input{min-width:0;padding:clamp(1.5rem,4vw,2.5rem);border-radius:1rem;background-color:var(--secondary-background);form {display: flex; flex-direction: column; align-items: flex-start;} form::before {content: "Ponte en contacto"; display: block; margin-bottom: 1rem; color: var(--text-color-bold); font-family: var(--title-ff),sans-serif; font-size: var(--text-size-big-2); font-weight: var(--text-fw-bold); line-height: 1.15;} label {margin: .55rem 0 .25rem; color: var(--text-color-bold); font-size: .875rem; font-weight: var(--text-fw-bold);} input,textarea {width: 100%; min-width: 0; border: 1px solid transparent; border-radius: .45rem; padding: .8rem 1rem; background-color: var(--white); color: var(--text-color); font-family: var(--text-ff),sans-serif; font-size: .875rem; line-height: 1.4; transition: border-color .16s ease,box-shadow .16s ease;} textarea {min-height: 5rem; resize: vertical;} input:focus-visible,textarea:focus-visible {outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgb(91 151 170 / 20%);} button {margin-top: 1rem; padding: .65rem 1rem; border-radius: .35rem; background-color: var(--primary-color); color: var(--white); font-family: var(--title-ff),sans-serif; font-size: .75rem; font-weight: var(--text-fw-bold); text-transform: uppercase; transition: background-color .16s ease,transform .16s ease;} button:hover {background-color: var(--blue-900);} button:active {transform: translateY(1px);} #form-status {margin-top: .75rem; color: var(--text-color-bold); font-size: .875rem;}}}#socials{background-color:var(--primary-color);color:var(--white);display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1rem 1.25rem;font-size:.8rem;text-align:center;.socials-footer__legal{order:2;display:flex;flex-direction:column;align-items:center;gap:.25rem}.socials-footer__separator{display:none}.socials-footer__copyright{order:3}.socials-footer__networks{order:1;display:flex;gap:.75rem;padding-bottom:.25rem;padding-right:.25rem}.socials-footer__legal a,.socials-footer__networks a{color:inherit;text-decoration:none}.socials-footer__legal a:hover{text-decoration:underline}.socials-footer__networks a{display:grid;place-items:center;width:2rem;flex:0 0 2rem;aspect-ratio:1;border:1px solid rgb(255 255 255 / 75%);border-radius:50%;font-family:var(--title-ff),sans-serif;font-size:0;font-weight:var(--text-fw-semibold);transition:background-color .16s ease,color .16s ease}.socials-footer__networks a:before{content:"in";font-size:.8rem}.socials-footer__networks .socials-footer__instagram:before{content:none}.socials-footer__networks a:hover{background-color:var(--white);color:var(--primary-color)}.socials-footer__networks svg{width:.8rem;fill:currentColor}@media (min-width: 900px){display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:1rem;min-height:4rem;padding:.75rem clamp(2rem,8vw,9rem);text-align:left;.socials-footer__legal{order:1;flex-direction:row;justify-content:flex-start;gap:1rem}.socials-footer__separator{display:inline;opacity:.8}.socials-footer__copyright{order:2;justify-self:center;white-space:nowrap}.socials-footer__networks{order:3;justify-self:end}}}}@layer utilities{.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:4rem}}