/*
Hoja de estilos Aleo
16/01/2025

Nav menu by Erik Terwan

*/

/* TIPOGRAFÍA */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap');


/* COLORES */
:root {
    --rojo: #f5333f;
    --azul: #00afaa;
    --verde: #b8be14;
}

/* BÁSICO */
html {
    padding: 0;
    margin: 0;
}

body {
    padding: 0;
    margin: 0;
    font-family: "Onest", serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    color: #232323;
    background-color: #eee;
}

h1, h2, h3 {
    font-weight: 300;
}
h1, h2 {
    font-size: 1.2rem;
}

.linea-corta {
    width: 100%;
    text-align: center;
    display: inline-block;
    position: relative;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.linea-corta::after {
    content: '';
    height: 1px;
    width: 8%;
    background: black;
    position: absolute;
    left: calc(50% - 4%);
    bottom: -5px;
}

.grecaptcha-badge {
    display: none !important;
}

/* CABECERA */
header {
    width: 100%;

}

header .header-logo {
    background-color: white;
    max-width: 800px;
    margin: 0 auto;
}
header .header-logo a {
    max-width: 120px;
    display: block;
    margin: 0 auto;
}
header .header-logo img {
    max-width: 120px;
    display: block;
    margin: 0 auto;
    padding: 1rem 0;
}

header .header-img {
    position: relative;
    max-width: 800px;
    height: 500px;
    margin: 0 auto;
    background-color: white;
    background-image: url(../media/hero-cabecera.png);
    background-size: calc(100% - 2rem);
    background-position: center;
    background-repeat: no-repeat;
}

header .header-img #revolution {
    display: grid;
    height: 100%;
    align-items: center;
    justify-items: center;
}
header .header-img #revolution img {
    height: 157px;
    width: 404px;
    /* filter: drop-shadow(20px 20px rgba(0,175,170,.3)); */
    /* position: absolute;
    transform: translateX(calc((800px - 404px) / 2)) translateY(calc((500px - 157px) / 2));
    mask: url("../media/revolution.svg");
    -webkit-mask: url("../media/revolution.svg");
    background-repeat: no-repeat;
    background-position: center; */
}
header .header-img #revolution > div {
    grid-column: 1 / 5;
    grid-row: 1 / 5;
}
  
@media (max-width: 600px) {
    header .header-img #revolution img {
        height: 101px;
        width: 260px;
    }
    header .header-img {
        background-size: cover;
        background-position: left center;
    }
}


/* MAIN */
main {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    background-color: white;
}

.estudio {
    padding: 3rem 1rem 0;
    text-align: center;
    line-height: 1.5;
}


.equipo {
    padding: 3rem 0;
}

.equipo>div {
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.equipo>div img {
    max-width: 100%;
}

.equipo h3 {
    margin: 0;
}

.equipo p {
    margin-top: 0;
}

.clientes>div {
    padding: 0 1rem 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    justify-items: center;
}


/* CLIENTES */
.clientes>div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: .5rem;
    justify-items: center;
}

.clientes>div img {
    max-width: 100%;
}


/* SERVICIOS */
.design, .communication {
    padding: 1rem;
}
.design img, .communication img {
    max-width: 100%;
}

.design h1, .communication h1 {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 4rem;
    line-height: .7;
    margin: 0;
    margin-top: -5rem;
    max-width: fit-content;
}
.design h1 span {
    margin-left: 6.5rem;
}
.communication h1 {
    text-align: center;
}

.design p {
    max-width: 80%;
}
.communication p {
    margin-left: 20%;
}


@media (max-width: 600px) {
    .design h1, .communication h1 {
        text-transform: uppercase;
        font-weight: 400;
        font-size: 2.5rem;
        line-height: .7;
        margin: 0;
        margin-top: -3rem;
    }
    .design h1 span {
        margin-left: 4rem;
    }
}
  



/* PORFOLIO */
.porfolio {
    padding: 1rem 0;
}
.porfolio > div {
    padding: 0 1rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;

}
.porfolio > div img {
    max-width: 100%;
}

.proyecto {
    display: grid;
    align-items: center;
    align-content: center;
    transition: all .5s ease-in-out;

}

.proyecto img {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    /* transition: all .5s ease-in-out; */
    max-width: 100%;
}

.proyecto h2 {
    width: 100%;
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    text-align: center;
    align-self: end;
    justify-self: center;
    font-size: .8rem;
    margin: 0;
    opacity: 1;
    padding: .5rem 0;
    background-color: rgba(255,255,255,.8);
    transition: all .5s ease-in-out;
}


/* CONTACTO */
.contacto .mapa {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 0 1rem;
}
.contacto .mapa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.contacto .mapa iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.contacto .formulario {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: center;
    padding: 0 1rem;
}

.contacto .formulario address p:nth-of-type(3), .contacto .formulario address p:nth-of-type(4) {
    /* border-bottom: 1px solid #232323; */
    padding-bottom: .5rem;
}
.contacto .formulario address {
    /* text-align: right; */
    font-style: normal;
    padding: 1rem;
}
.contacto .formulario address p {
    margin: .3rem 0;
}
.contacto .formulario a {
    color: var(--verde);
    transition: all .5s ease-in-out;
    text-decoration: none;
}
.contacto .formulario a:hover {
    color: var(--azul);
}
.contacto .formulario address strong {
    font-size: 1.2rem;
}

.contacto .formulario form {
    padding: 1rem;
}
.contacto .formulario form input, .contacto .formulario form textarea {
    width: 100%;
    font-family: "Onest", serif;
    font-size: 1rem;
    margin-bottom: 1rem;
    border: none;
    border-bottom: 1px solid #232323;
}
.contacto .formulario form textarea {
    height: 4rem;
}
.contacto .formulario form input[type="submit"], .contacto .formulario form input[type="checkbox"] {
    width: auto;
}
.contacto .formulario form input[type="checkbox"] {
    accent-color: var(--verde);
}
.contacto .formulario form input[type="submit"] {
    display: block;
    padding: .5rem 1rem;
    background-color: var(--verde);
    border: none;
    transition: all .5s ease-in-out;
}
.contacto .formulario form input[type="submit"]:hover {
    background-color: var(--azul);
}

@media (max-width: 600px) {
    .contacto .formulario {
        grid-template-columns: 1fr;
    }
}


/* PRIVACIDAD */
.privacidad > div {
    padding: 1rem;
}


/* FOOTER */
footer {
    background-color: #ddd;
    /* background-image: url(../media/fondo-footer.png);
    background-repeat: no-repeat;
    background-position: bottom right; */
    /* margin-top: 3rem; */
    padding: 1rem 0;
    max-width: 800px;
    margin: 0 auto;
}
/* 
footer .contenedor-footer {
    max-width: 800px;
    margin: 0 auto;
} */
/* footer .contenedor-footer {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
} */

footer .citacion q {
    font-style: italic;
    font-size: 1.2rem;
}

footer .nav-footer {
    list-style: none;
    text-align: right;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}
footer .nav-footer li {
    padding: 1rem .4rem;
}
footer .nav-footer a {
    color: #232323;
    text-decoration: dotted;
    transition: all .3s ease-in-out;
}
footer .nav-footer a:hover {
    color: var(--azul);
}

footer .legal {
    text-align: center;
    font-size: .6rem;
}
footer .legal a {
    color: #232323;
    text-decoration: dotted;
    transition: all .3s ease-in-out;
}
footer .legal a:hover {
    color: var(--azul);
}

footer img {
    max-width: 80%;
    margin: 0 auto;
    display: inherit;
}


/* COOKIES */
#silktide-modal footer {
    background-color: transparent;
}
#silktide-modal footer > a {
    display: none;
}
#silktide-banner a.silktide-logo {
    display: none;
}
#silktide-cookie-icon {
    width: 40px;
    height: 40px;
}
#silktide-cookie-icon svg {
    width: 28px;
    height: 28px;
}

/* NAV */
#menuToggle {
    display: block;
    /* You can also use absolute here if you want to stay on the top */
    position: fixed;
    top: 25px;
    right: 25px;
    
    z-index: 1;
    
    -webkit-user-select: none;
    user-select: none;
  }
  
  #menuToggle a
  {
    text-decoration: none;
    color: #232323;
    
    transition: color 0.3s ease;
  }
  
  #menuToggle a:hover
  {
    color: var(--azul);
  }
  
  #menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    
    cursor: pointer;
    
    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */
    
    -webkit-touch-callout: none;
  }
  
  /*
   * Just a quick hamburger
   */
  #menuToggle span {
    display: block;
    width: 20px;
    height: 3px;
    margin-bottom: 5px;
    position: relative;
    
    /* background: #cdcdcd; */
    background: var(--azul);
    border-radius: 3px;
    
    z-index: 1;
    
    transform-origin: 4px 0px;
    
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
  }
  
  #menuToggle span:first-child {
    transform-origin: 0% 0%;
  }
  
  #menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
  }
  
  /* 
   * Transform all the slices of hamburger
   * into a crossmark.
   */
  #menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: var(--rojo);
  }
  
  /*
   * But let's hide the middle one.
   */
  #menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }
  
  /*
   * Ohyeah and the last one should go the other direction
   */
  #menuToggle input:checked ~ span:nth-last-child(2) {
    opacity: 1;
    transform: rotate(-45deg) translate(5px, -6px);
  }
  
  /*
   * Make this absolute positioned
   * at the top left of the screen
   */
  #menu {
    position: absolute;
    max-width: 300px;
    width: 100vw;
    max-height: 100vh;
    margin: -100px 0 0 0;
    padding: 50px;
    padding-top: 125px;
    right: -100px;
    
    box-sizing: border-box;
    overflow-y: auto;
    background: rgba(215,215,215,.8);
    list-style-type: none;
    
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */
    
    transform-origin: 0% 0%;
    transform: translate(100%, 0);
    
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }
  
  #menu li
  {
    padding: 10px 0;
    font-size: 22px;
  }
  
  #menu li label
  {
    cursor: pointer;
  }
  
  /*
   * And let's fade it in from the right
   */
  #menuToggle input:checked ~ ul {
    transform: none;
    opacity: 1;
  }