/** -- STUDIO DALIA ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ -- **/

/**
 * 01. Estilos Globales 

        01.01. Reset Css
        01.02. Variables
        01.03. Animaciones


 * 02. Elementos globales

        02.01. Headings
        02.02. Imágenes
        02.03. Listados
        02.04. Tablas
        02.05. Video
        02.06. Texto seleccionado
        02.07. Class generales


 * 03. Elementos de Layout

        03.01. Header
            03.01.01. Header-Logo
            03.01.02. Menú Hamburguesa

        03.02. Footer
            03.02.01. Footer Contacto
            03.02.02. Footer Legal
            03.02.03. To Top

        03.03. Content
            03.03.01. Cursor

 * 04. Páginas concretas

        04.01. Legales
        
        04.02. Home
            04.02.01. Home-Presentacion
            04.02.02. Home-Video
            04.02.03. Home-Frase
            04.02.04. Home-Proyectos
            04.02.05. Home-Cta

        04.03. Servicios
            04.03.01. Servicios Intro
            04.03.02. Listado Servicios
            04.03.03. Proceso de Trabajo

        04.04. Proyectos
            04.04.01. Proyectos Intro
            04.04.02. Proyectos Grid

        04.05. Single Proyectos
            04.05.01. Imagen intro
            04.05.02. Ficha proyecto
            04.05.03. Imágenes proyecto

        04.06. Contacto
            04.06.01. Contacto Intro  
            04.06.02. Formulario Básico

*/



/** -- 01. Estilos Globales  -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -- **/


/** -- 01.01. Reset Css -- **/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}*{box-sizing:border-box;}


/** -- 01.02. Variables -- **/

:root {
    --color1: #00354e;
    /* azul oscuro */
    
    --color1a: rgba(0, 53, 78, .3);
    /* azul oscuro transparente */
    
    --color1b: rgba(0, 53, 78, .6);
    /* azul oscuro transparente */

    --color2: #79c6c0;
    /* turquesa */

    --color2a: rgba(121, 198, 192, .25);
    /* turquesa transparente */
    
     --color2b: rgba(121, 198, 192, .7);
    /* turquesa transparente */
    
    --color3: #efe88e;
    /* amarillo */
    
    --color4: #f29799;
    /* rosa */

    --font1: "Poppins", sans-serif;
    
    --font2: "Anton", sans-serif;
}


/** --  01.03. Animaciones -- **/



/** -- 02. Elementos globales -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -- **/

        
/** -- 02.01. Headings -- **/


h1 {
    color: var(--color1);
    font-family: var(--font2);
    text-transform: uppercase;
    font-weight: normal;
    font-size: 50px;
    line-height: 1;
    padding-bottom: 10px;
    transition: all .5s ease;
}

@media screen and (min-width: 450px) {
    h1 {
        font-size: 65px;
    }
}
@media screen and (min-width: 700px) {
    h1 {
        font-size: 80px;
    }
}
@media screen and (min-width: 900px) {
    h1 {
        font-size: 95px;
    }
}
@media screen and (min-width: 1100px) {
    h1 {
        font-size: 110px;
    }
}
@media screen and (min-width: 1400px) {
    h1 {
        font-size: 125px;
    }
}
@media screen and (min-width: 1800px) {
    h1 {
        font-size: 150px;
    }
}


h2 {
    color: var(--color1);
    font-family: var(--font2);
    text-transform: uppercase;
    font-weight: normal;
    font-size: 50px;
    line-height: 1.2;
    padding-bottom: 10px;
    transition: all .5s ease;
}

@media screen and (min-width: 700px) {
    h2 {
        font-size: 60px;
    }
}

@media screen and (min-width: 920px) {
    h2 {
        font-size: 70px;
    }
}

@media screen and (min-width: 1100px) {
    h2 {
        font-size: 80px;
    }
}

@media screen and (min-width: 1400px) {
    h2 {
        font-size: 90px;
    }
}

@media screen and (min-width: 1800px) {
    h2 {
        font-size: 100px;
    }
}

h3 {
    font-size: 30px;
    font-family: var(--font2);
    text-transform: uppercase;
    font-weight: normal;
    line-height: 1.2;
    color: var(--color1);
    padding-bottom: 0.5em;
    transition: all .5s ease;
}

@media screen and (min-width: 800px) {
    h3 {font-size: 35px;}
}

@media screen and (min-width: 1000px) {
    h3 {font-size: 40px;}
}

h4 {
    font-size: 20px;
    font-family: var(--font1);
    line-height: 1.08;
    color: var(--color1);
    padding-bottom: 0.5em;
    font-weight: 800;
    transition: all .5s ease;
}

@media screen and (min-width: 800px) {
    h4 {font-size: 22px;}
}

p {
    font-size: 15px;
    font-family: var(--font1);
    font-weight: 400;
    line-height: 1.5;
    color: var(--color1);
    transition: all .5s ease;
}

@media screen and (min-width: 800px) {
    p {font-size: 16px;}
}

a {
    font-size: 15px;
    font-family: var(--font1);
    color: var(--color1);
    text-decoration: none;
}

a:hover {
    color: var(--color2);
}

@media screen and (min-width: 800px) {
    a {font-size: 16px;}
}


/** -- 02.02. Imágenes -- **/

img {
    text-align: center;
    width: 100%;
}


/** -- 02.03. Listados -- **/


ul {
    list-style-type: none;
}

li {
    font-size: 15px;
    font-family: var(--font1);
    font-weight: 400;
    line-height: 1.5;
    color: var(--color1);
}

@media screen and (min-width: 800px) {
    li {
        font-size: 16px;
    }
}


/** -- 02.04. Tablas -- **/

table {
    border: 1px solid #00354e;
    font-family: var(--font1);
    margin-bottom: 50px;
}

table tr {
    border: 3px solid #00354e;
    text-align: center;
}

table tr th {
    padding: 20px 30px;
    background-color: var(--color1);
    color: var(--color2);
    border: 2px solid #79c6c0;
}

table tr td {
    padding: 30px 15px;
    background-color: #fff;
    color: var(--color1);
    border: 2px solid #00354e;
}


/** -- 02.05. Video -- **/

video {
    width: 100%;
}


/** -- 02.06. Texto seleccionado -- **/

/* Para Safari */
::selection {
    background: var(--color2a);
}

/* Para Firefox */
::-moz-selection {
    background: var(--color2a);
}





/** -- 02.07. Class generales -- **/


.centrado {
    text-align: center;
}

.justificado {
    text-align: justify;
}

.clear {
    clear: both;
}

.espacio-inferior {
    margin-bottom: 30px;
}

.esconder-label {
    display: none;
}

.hide{
    display:none;
}

.index1 {
    position:relative;
    z-index:1;
}

.div-boton {
    position:relative;
}

.boton {
    display: inline-block;
}

.boton .icono-boton{
    width: 30px;
    height: 30px;
    transform: rotate(45deg);
    transition: all .5s ease;
    background-image: url(../imagenes/flecha-corta-azul.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    top: -2px;
}

.boton:hover .icono-boton{
    transform: rotate(0deg);
   background-image: url(../imagenes/flecha-corta-verde.svg);
    top: 0px;
}

@media screen and (min-width: 800px) {
    .boton .icono-boton{
        transform: rotate(45deg) scale(1.3);
        margin-right: 15px;
    }
    
    .boton:hover .icono-boton{
        transform: rotate(0deg) scale(1.3);
    }
}

@media screen and (min-width: 1200px) {
    .boton .icono-boton{
        transform: rotate(45deg) scale(1.5);
        margin-right: 20px;
    }
    
    .boton:hover .icono-boton{
        transform: rotate(0deg) scale(1.5);
    }
}

.boton a{
    text-transform: uppercase;
    font-family: var(--font2);
    font-size: 22px;
    font-weight: normal;
    color: var(--color2);
    transition: all .5s ease;
}

.boton:hover a{
    color: var(--color1);
    
}

@media screen and (min-width: 400px) {
    .boton a{
        font-size: 25px;
    }
}

@media screen and (min-width: 600px) {
    .boton a{
        font-size: 28px;
    }
}

@media screen and (min-width: 1000px) {
    .boton a{
        font-size: 30px;
    }
}

@media screen and (min-width: 1200px) {
    .boton a{
        font-size: 33px;
    }
}

@media screen and (min-width: 1400px) {
    .boton a{
        font-size: 36px;
    }
}

@media screen and (min-width: 1600px) {
    .boton a{
        font-size: 40px;
    }
}

.boton-dos {
  position: relative;
    display:inline-block;
}

.boton-dos:hover a{
  color:var(--color1);
}

.boton-dos a .subrayado::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 100%;
  height:3px;
  background-color: var(--color2);
  opacity: 1;
  transform: scaleX(0);
  transform-origin: center;
  transition: all 1s ease;
}

.boton-dos:hover a .subrayado::after,
.boton-dos:focus a .subrayado::after{
  transform: scaleX(1);
}

.boton-volver {
    margin-bottom:200px; 
    background:#fff;
}

.boton-volver:hover a {
    color: var(--color1);
}

.verde {
    color: var(--color2);
    font-family: var(--font1);
}

.texto-revelio{
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 85%);
}

.revelio{
    display:inline-block;
    transform: translateY(150px);
    opacity:0;
    transition: all .5s ease;
}

.texto-revelio.verde {
    position:relative;
    left: -10px;
    transition: all .5s ease;
}

@media screen and (min-width: 450px) {
    .texto-revelio.verde {
        left: -15px;
    }
}

@media screen and (min-width: 800px) {
    .texto-revelio.verde {
        left: -20px;
    }
}
@media screen and (min-width: 1200px) {
    .texto-revelio.verde {
        left: -25px;
    }
}
@media screen and (min-width: 1800px) {
    .texto-revelio.verde {
        left: -30px;
    }
}

.noseparacion{
    white-space: nowrap;
}

/** -- 03. Elementos de Layout -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -- **/

/** -- 03.01. Header -- **/

header {
    width: 100%;
}

@media screen and (min-width: 650px) {

    #header-centrado {
        display: flex;
    }

    .navegacion {
        z-index: 2;
        top: 0;
        left: 0;
        right: 0;
    }
}

/** -- 03.01.01. Header-Logo -- **/

.header-logo {
    padding: 15px;
    transition:all .5s ease;
}

@media screen and (min-width: 450px) {
    .header-logo {
        padding: 15px 30px;
    }
}

@media screen and (min-width: 650px) {
    .header-logo {
        padding: 25px 30px 15px;
    }
}

@media screen and (min-width: 800px) {
    .header-logo {
        padding: 25px 50px 20px;
    }
}

@media screen and (min-width: 1200px) {
    .header-logo {
        padding: 30px 80px 20px;
    }
}

@media screen and (min-width: 1600px) {
    .header-logo {
        padding: 35px 120px 20px;
    }
}
    
.header-logo img {
    width: 50%;
    max-width: 110px;
    transition:all .5s ease;
}

@media screen and (min-width: 650px) {
    .header-logo img {
        width: 100%;
        max-width: 145px;
    }
}

@media screen and (min-width: 1000px) {
    .header-logo img {
        width: 100%;
        max-width: 155px;
    }
}


/** -- 03.01.02. Menú Hamburguesa -- **/

.menu_dalia{
    position: fixed;
    top:0;
    right:0;
    z-index: 2;
    transition: all .5s ease;
}

.active.menu_dalia{
    width:100%;
    height: 100vh;
    background-color: var(--color2b);
}

.box_dalia{
    position: relative;
    opacity:0;
    right: -500px;
    pointer-events: none;
    transition: all .5s ease;
}

.active.box_dalia{
    opacity:1;
    right: 0px;
    pointer-events: fill;
}

.menu_icon_box_dalia{
    width: fit-content;
    height: 70px;
    position: absolute;
    top: 5px;
    right: 0px;
    padding: 14px 10px 10px;
    z-index:2;
    background:none;
    border-radius:100%;
    transition: all .5s ease; 
}


@media screen and (min-width: 650px) {
    .menu_icon_box_dalia {
        top: 25px;
        right: 12px;
        height: 83px;
        padding: 16px 10px 10px;
    }
}

@media screen and (min-width: 800px) {
    .menu_icon_box_dalia {
        right: 32px;
    }
}

@media screen and (min-width: 1600px) {
    .menu_icon_box_dalia {
        right: 40px;
    }
}

.menu_icon_box_dalia:hover .line1, .menu_icon_box_dalia:hover .line2, .menu_icon_box_dalia:hover .line3{
    background-color: var(--color2);
} 


.line1, .line2, .line3{
    width: 40px;
    height: 4px;
    margin: 8px 8px;
    background-color: var(--color1);
    transition: all .5s ease;  
} 

.linea-burguer.blanco {
    background-color: #fff;
    box-shadow: 0px 0px 4px rgba(0,0,0,.8);
}

@media screen and (min-width: 650px) {
    .line1, .line2, .line3{
        width: 50px;
        margin: 10px 8px;
    } 
}

.active .line1{
    transform: translate(0px, 15px)rotate(45deg);
    background-color: var(--color2);
}

.active .line2{
    opacity: 0;
}

.active .line3{
    transform: translate(0px, -15px)rotate(-45deg);
    background-color: var(--color2);
}


.nav_dalia{
    background-color: var(--color1);
    width: 100%;
    height: 100vh;
    position: absolute;
    right:0;
    display:flex;
    flex-direction: column;
    justify-content: center;
    padding:0px 30px 0px 50px;
    box-shadow: -20px 0px 20px rgba(0,0,0,.3);
    transition: all .5s ease;
}

@media screen and (min-width: 600px) {
    .nav_dalia {
        padding:0px 30px 0px 100px;
    }
}

@media screen and (min-width: 800px) {
    .nav_dalia {
        width: 75%;
    }
}

@media screen and (min-width: 1000px) {
    .nav_dalia {
        width: 60%;
    }
}

@media screen and (min-width: 1200px) {
    .nav_dalia {
        width: 50%;
        padding:0px 30px 0px 130px;
    }
}

@media screen and (min-width: 1400px) {
    .nav_dalia {
        width: 40%;
         padding:0px 30px 0px 100px;
    }
}

@media screen and (min-width: 1600px) {
    .nav_dalia {
         padding:0px 30px 0px 140px;
    }
}

@media screen and (min-width: 2000px) {
    .nav_dalia {
        width: 35%;
    }
}

.nav_dalia ul {
    max-width: 350px;
}

.nav_dalia ul li{
    list-style: none;
    line-height: 1.1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.nav_dalia ul li a{
    color: #fff;
    font-family: var(--font2);
    text-transform: uppercase;
    font-size:42px;
    padding: 0px;
    display: inline-block;
    text-decoration: none;
    transition: all .5s ease;
    font-weight: normal;
    line-height: 1.3;
    transition: all 1.2s cubic-bezier(.19,1,.22,1);
    transform-origin: left center;
}

.nav_dalia ul li a:hover{
     color: #fff;
}

@media screen and (min-width: 400px) {
    .nav_dalia ul li a {
        font-size: 50px;
    }
}

@media screen and (min-width: 500px) {
    .nav_dalia ul li a {
        font-size: 60px;
    }
}

@media screen and (min-width: 600px) {
    .nav_dalia ul li a {
        font-size: 70px;
    }
}

@media screen and (min-width: 700px) {
    .nav_dalia ul li a {
        font-size: 80px;
    }
}

.nav_dalia .semi{
    color: var(--color2);
    text-transform: uppercase;
    font-size: 14px;
    padding-bottom:20px;
    transition: all .5s ease;
    letter-spacing: 2px;
}

@media screen and (min-width: 500px) {
    .nav_dalia .semi{
        font-size: 16px;
    }
}

.nav_dalia #hablamos-menu {
    padding-top: 100px;
}


.nav_dalia #hablamos-menu .semi {
    padding-bottom:10px;
}

.nav_dalia #hablamos-menu a {
    color: #fff;
    font-size: 20px;
    transition: all .5s ease;
    position: relative;
    font-weight: 500;
}

.nav_dalia #hablamos-menu a::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color2);
  opacity: 1;
  transform: scale(0);
  transform-origin: center;
  transition: all .5s;
}

.nav_dalia #hablamos-menu a:hover::after,
.nav_dalia #hablamos-menu a:focus::after{
  transform: scale(1);
}

#hablamos-menu .icon-boton{
    width: 25px;
    height: 25px;
    transform: rotate(45deg);
    transition: all .5s ease;
    background-image: url(../imagenes/flecha-corta-verde.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    top: 4px;
}

#hablamos-menu .contacto-menu:hover .icon-boton{
    transform: rotate(0deg);
}

@media screen and (min-width: 400px) {
    .nav_dalia #hablamos-menu a  {
        font-size: 25px;
    }
}

@media screen and (min-width: 500px) {
    .nav_dalia #hablamos-menu a  {
        font-size: 28px;
    }
}

.nav_dalia ul > li:hover > a {
     transform: translateY(-150%);
}

.nav_dalia ul > li > a span::after {
    content: attr(data-text);
    display: block;
    position: absolute;
    top: 150%;
    transform-origin: left center;
    transition: all 1.2s cubic-bezier(.19,1,.22,1);
    color: var(--color2);
}
    

/** --  03.02. Footer -- **/

footer {
    padding: 20px 20px 18px;
    background-color: var(--color2);
    text-align: center;
}

footer a {
    color: var(--color1);
    transition: all .5s ease;
}


/** --  03.02.02. Footer Contacto -- **/

.footer-contacto {
     background-color: var(--color1);
    display:grid;
    grid-template-columns: 1fr;
     padding:40px 15px;
    transition: all .5s ease;
}

@media screen and (min-width: 450px) {
    .footer-contacto{
        padding:60px 30px;
    }
}

@media screen and (min-width: 800px) {
    .footer-contacto{
        padding:80px 50px;
    }
}

@media screen and (min-width: 900px) {
    .footer-contacto{
        grid-template-columns: 1fr 400px;
        grid-gap: 30px;
        align-items: center;
    }
}

@media screen and (min-width: 1200px) {
    .footer-contacto{
        padding:100px 80px 80px;
    }
}

@media screen and (min-width: 1210px) {
    .footer-contacto{
        grid-template-columns: 1fr 450px;
        grid-gap: 30px;
    }
}

@media screen and (min-width: 1300px) {
    .footer-contacto{
        grid-template-columns: 1fr 460px;
        grid-gap: 30px;
    }
}

@media screen and (min-width: 1600px) {
    .footer-contacto{
        padding:120px 120px 100px;
    }
}

.footer-contacto .izda {
    text-align: center;
    transition: all .5s ease;
}
@media screen and (min-width: 900px) {
    .footer-contacto .izda {
        text-align: left;
    }
}

.footer-contacto h2 {
    color: var(--color2);
    margin-bottom: 10px;
    transition: all .5s ease;
}

@media screen and (min-width: 900px) {
    .footer-contacto h2 {
        margin-bottom: 20px;
    }
}

@media screen and (min-width: 1500px) {
    .footer-contacto h2 {
        max-width:700px;
    }
}

@media screen and (min-width: 1800px) {
    .footer-contacto h2 {
        max-width:750px;
    }
}

.footer-contacto .contacto-mail, .footer-contacto .contacto-mail a{
    color: #fff;
    font-weight: normal;
    font-size: 20px;
    transition: all .5s ease;
}

@media screen and (min-width: 500px) {
    .footer-contacto .contacto-mail, .footer-contacto .contacto-mail a{
        font-size: 25px;
    }
}

@media screen and (min-width: 700px) {
    .footer-contacto .contacto-mail, .footer-contacto .contacto-mail a{
        font-size: 30px;
    }
}

@media screen and (min-width: 1000px) {
    .footer-contacto .contacto-mail, .footer-contacto .contacto-mail a{
        font-size: 35px;
    }
}

@media screen and (min-width: 1200px) {
    .footer-contacto .contacto-mail, .footer-contacto .contacto-mail a{
        font-size: 40px;
    }
}

.footer-contacto .contacto-mail-link{
    position:relative;
}

.footer-contacto .contacto-mail-link::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color2);
  opacity: 1;
  transform: scale(0);
  transform-origin: center;
  transition: all .5s;
}

.footer-contacto .contacto-mail-link:hover::after,
.footer-contacto .contacto-mail-link:focus::after{
  transform: scale(1);
}

.footer-contacto .contacto-mail{
    display: inline-block;
}

.footer-contacto .icon-boton{
    width: 25px;
    height: 25px;
    transform: rotate(45deg) scale(1);
    transition: all .5s ease;
    background-image: url(../imagenes/flecha-corta-verde.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    margin-right: 5px;
    position: relative;
    top: 2px;
}

.footer-contacto .contacto-mail:hover .icon-boton{
    transform: rotate(0deg) scale(1);
}

@media screen and (min-width: 800px) {
    .footer-contacto .icon-boton{
        transform: rotate(45deg) scale(1.2);
        top: 0px;
    }
    .footer-contacto .contacto-mail:hover .icon-boton{
        transform: rotate(0deg) scale(1.2);
    }
}

@media screen and (min-width: 1200px) {
    .footer-contacto .icon-boton{
        transform: rotate(45deg) scale(1.5);
    }
    .footer-contacto .contacto-mail:hover .icon-boton{
        transform: rotate(0deg) scale(1.5);
    }
}

.footer-contacto .dcha {
   display:grid;
    grid-template-columns: 1fr;
    align-content: space-between;
    margin: 50px auto 0px;
    grid-gap:50px;
    transition: all .5s ease;
}

@media screen and (min-width: 700px) {
    .footer-contacto .dcha {
       grid-template-columns: 100px 1fr;
        margin: 70px auto 0px;
    }
}

@media screen and (min-width: 900px) {
    .footer-contacto .dcha {
        margin: 0px auto;
        grid-template-columns: 1fr;
        grid-gap: 70px;
    }
}

@media screen and (min-width: 1100px) {
    .footer-contacto .dcha {
        grid-gap: 80px;
    }
}

@media screen and (min-width: 1400px) {
    .footer-contacto .dcha {
        grid-gap: 90px;
    }
}

.footer-contacto .dcha .logo{
   text-align: center;
    transition: all .5s ease;
}  

@media screen and (min-width: 900px) {
    .footer-contacto .dcha .logo{
       text-align: right;
    }  
}

.footer-contacto .dcha .logo img{
    max-width:100px;
} 

.footer-contacto .menu-footer {
    display:grid;
    grid-template-columns: 1fr;
    grid-gap: 0px;
    transition: all .5s ease;
}

@media screen and (min-width: 500px) {
    .footer-contacto .menu-footer {
        grid-template-columns: 1fr 1.5fr;
        grid-gap: 20px;
    /*    justify-items: end;*/
    }
}

@media screen and (min-width: 900px) {
    .footer-contacto .menu-footer {
        grid-template-columns: 1fr 1.6fr;
        grid-gap: 30px;
        justify-items: end;
    }
}

@media screen and (min-width: 1100px) {
    .footer-contacto .menu-footer {
        grid-template-columns: 1fr 1.5fr;
        grid-gap: 40px;
    }
}

@media screen and (min-width: 1210px) {
    .footer-contacto .menu-footer {
        grid-template-columns: 1fr 1.3fr;
        grid-gap: 60px;
    }
}

@media screen and (min-width: 1300px) {
    .footer-contacto .menu-footer {
        grid-template-columns: 1fr 1.3fr;
        grid-gap: 60px;
    }
}

@media screen and (min-width: 1500px) {
    .footer-contacto .menu-footer {
        grid-gap: 80px;
    }
}

.footer-contacto .menu-footer ul{
    text-align: center;
}

@media screen and (min-width: 500px) {
    .footer-contacto .menu-footer ul {
        text-align: left;
    }
}

.footer-contacto .menu-footer a, .footer-contacto .menu-footer li {
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #fff;
    transition: all .5s ease;
}

.footer-contacto .menu-footer a:hover {
    color: var(--color2);
}

/** --  03.02.02. Footer Legal -- **/

@media screen and (min-width: 900px) {
    .footer-legal {
        display: flex;
        justify-content: space-between;
        padding: 0px 90px 0px 50px;
    }
}

.footer-legal p, .footer-legal a {
    font-size: 14px;
    color: var(--color1);
}

.footer-legal a:hover {
    font-size: 14px;
    color: #fff;
}


@media screen and (min-width: 650px) {

    .footer-legal-copy {
        display: flex;
        justify-content: center;
    }
}

.footer-legal-copy p {
    color: var(--color1);
    padding-bottom: 15px;
    transition: all .5s ease;
}

.ocultar {
    display: none;
}

@media screen and (min-width: 650px) {

    .ocultar {
        display: inline;
        padding: 0px 10px;
    }
}

@media screen and (min-width: 900px) {

    .ocultar {
        padding: 0px 20px;
    }
    .footer-legal-copy p {
        padding-bottom: 0px;
    }
}


.footer-legal-aviso p a {
    font-weight: 600;
}

@media screen and (min-width: 650px) {

    .footer-legal-aviso {
        display: flex;
        justify-content: center;
    }

    .footer-legal-aviso .ocultar {
        color: var(--color1);
    }
}

.aviso-footer {
    padding-top: 20px;
}

/** -- 03.02.03. To Top -- **/

.go-top {
    position: fixed;
    bottom: 60px;
    right: 20px;
    text-decoration: none;
    color: var(--color2);
    display: none;
/*    text-shadow: 0px 0px 5px rgba(0, 53, 78, .3);*/
    font-size: 40px;
    transition: transform .5s ease;
}

.go-top:hover {
    transform: scale(1.5);
}


/** -- 03.03. Content -- **/

/** -- 03.03.01. Cursor -- **/


@media screen and (min-width: 1024px) {
    html,
    body, a{
        cursor: none!important;
    }

    .circle {
      height: 22px;
      width: 22px;
        transform: scale(1);
    transform-origin: center center;
      border-radius: 100px;
      position: fixed; 
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 3;
      transition: 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform,
            0.7s ease opacity,  background-color 0.5s ease;
    }
    
    
    .circle.cursor.invertir-white {
        transform: scale(5); 
        background-color: var(--color2);
        mix-blend-mode: screen; 
    }
    
        .circle.cursor.invertir-peq-white {
        transform: scale(2); 
        background-color: var(--color2);
        mix-blend-mode: screen; 
    }

    .circle.cursor.invertir-blue {
        transform: scale(5);    
        background-color: var(--color2);
        mix-blend-mode: multiply; 
    }
    
       .circle.cursor.invertir-peq-blue {
        transform: scale(2);    
        background-color: var(--color2);
        mix-blend-mode: multiply; 
    }
    
     .circle.cursor.invertir-h1 {
        transform: scale(5);    
        background-color: var(--color2);
        mix-blend-mode: difference; 
    }

    .circle.cursor.invertir-h1-abierto {
        transform: scale(5);    
        background-color: var(--color2);
        mix-blend-mode: screen; 
    }
    
    /* Ocultar trails */
    .circle.trail.invertir {
        display: none; 
    }
    
    .circle.trail.quieto {
    display:none;
}


     .circle.cursor {
        z-index: 4;
         background-color: var(--color2);
    }
    
    .circle.hidden {
        opacity: 0;
    }

    .circle.cursor::before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        background-image: url("../imagenes/ver-proyecto.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 100%;
        opacity: 0;
        background-color: var(--color2);
        pointer-events: none;
        transform: scale(1);
        transition: opacity 0.5s ease; 
    }

    .circle.cursor.active {
        opacity: 1;
       transform: scale(7);    
    }

    .circle.cursor.active::before {
        opacity: 1; 
         
    }

}




/** -- 04. Páginas concretas -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -- **/

/** -- 04.01. Legales -- **/

.legal {
    padding:20px 15px;
    transition: all .5s ease;
}

@media screen and (min-width: 450px) {
    .legal{
        padding:30px 30px 40px;
    }
}

@media screen and (min-width: 800px) {
    .legal{
        padding:50px 50px 100px;
    }
}

@media screen and (min-width: 1200px) {
    .legal{
        padding:60px 80px 100px;
    }
}

@media screen and (min-width: 1600px) {
    .legal{
        padding:100px 120px 150px;
    }
}

.legal ul {
    list-style-type: disc;
    margin-left: 40px;
}

.legal h1 {
    margin-bottom: 30px;
}

.legal h2 {
    font-size: 40px;
    margin-top: 50px;
}

.legal h3 {
    font-size: 25px;
    margin-top: 20px;
    color: var(--color2);
}

@media screen and (min-width: 800px) {
    .legal h2 {
        font-size: 45px;
        margin-top: 70px;
    }
    .legal h3 {
        font-size: 30px;
        margin-top: 30px;
    }
}

.legal p {
    padding: 0px 0px 20px 0px;
}

.legal .sinespacio {
    padding: 0px;
}




/** -- 04.02. Home -- **/

/** -- 04.02.01. Home-Intro -- **/


.site-header.home {
  position: absolute;
  background: transparent;
  color: #fff;
  z-index: 3;
}


.home-intro {
    position: relative;
    height: 100vh;
    min-height: 500px;
}

.home-intro .background-video{
    position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Contenido centrado sobre el video */
.intro-contenido {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
    flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 2rem;
}


.home-intro h1 {
    color: var(--color2);
    line-height: 1.15;
    z-index: 2;
}

.glitch {
    position: relative;
    color: #fff;
    text-shadow: 
        0 0 0 var(--color2),
        0 0 0 var(--color3),
        0 0 0 var(--color4);
    animation: glitch 3s infinite;
    
}


@keyframes glitch {
  0% {
    text-shadow: 
        0 0 0 var(--color2),
        0 0 0 var(--color3),
        0 0 0 var(--color4);
  }
  15% {
    text-shadow: 
        0 0 0 var(--color2),
        0 0 0 var(--color3),
        0 0 0 var(--color4);
  }
  16% {
    text-shadow: 
        0.05em 0 0 var(--color2),
        -0.05em -0.025em 0 var(--color3),
        -0.025em 0.05em 0 var(--color4);
  }
  18% {
    text-shadow: 
        -0.05em -0.025em 0 var(--color2),
        0.025em 0.025em 0 var(--color3),
        -0.05em -0.05em 0 var(--color4);
  }
  20% {
    text-shadow: 
        -0.05em -0.025em 0 var(--color2),
        0.025em 0.025em 0 var(--color3),
        -0.05em -0.05em 0 var(--color4);
  }
  22% {
    text-shadow: 
        0.025em 0.05em 0 var(--color2),
        0.05em 0 0 var(--color3), 
        0 -0.05em 0 var(--color4);
  }
  23% {
    text-shadow: 
        0 0 0 var(--color2),
        0 0 0 var(--color3),
        0 0 0 var(--color4);
  }
  80% {
    text-shadow: 
        0 0 0 var(--color2),
        0 0 0 var(--color3),
        0 0 0 var(--color4);
  }
  81% {
    text-shadow:
        0.05em 0 0 var(--color2),
        -0.05em -0.025em 0 var(--color3),
        -0.025em 0.05em 0 var(--color4);
  }
  83% {
    text-shadow: 
        -0.05em -0.025em 0 var(--color2),
        0.025em 0.025em 0 var(--color3),
        -0.05em -0.05em 0 var(--color4);
  }
  85% {
    text-shadow: 
        -0.05em -0.025em 0 var(--color2),
        0.025em 0.025em 0 var(--color3),
        -0.05em -0.05em 0 var(--color4);
  }
  87% {
    text-shadow:
        0.025em 0.05em 0 var(--color2),
        0.05em 0 0 var(--color3), 
        0 -0.05em 0 var(--color4);
  }
  89% {
    text-shadow: 
        0 0 0 var(--color2),
        0 0 0 var(--color3),
        0 0 0 var(--color4);
  }
  100% {
    text-shadow: 
        0 0 0 var(--color2),
        0 0 0 var(--color3),
        0 0 0 var(--color4);
  }
}



@media screen and (min-width: 600px) {
     .home-intro h1 {
         padding:80px 30px 0px;
          max-width: 620px;
    }
}

@media screen and (min-width: 700px) {
    .home-intro h1 {
        max-width: 750px;
    }
}

@media screen and (min-width: 900px) {
     .home-intro h1 {
         max-width: 880px;
    }
}

@media screen and (min-width: 1100px) {    
    .home-intro h1 {
        max-width: 1020px;
    }
}


@media screen and (min-width: 1400px) {    
    .home-intro h1 {
        max-width: 1150px;
    }
}

@media screen and (min-width: 1800px) {    
    .home-intro h1 {
          max-width: 1370px;
    }
}



/** 04.02.03. Home-Frase ------*/

.home-frase{
    padding:50px 15px;
    transition: all .5s ease;
    display:grid;
    grid-template-columns: 1fr;
    grid-gap:30px;
    justify-content: center;
    z-index:1;
    position:relative;

}

@media screen and (min-width: 450px) {
    .home-frase{
        padding:70px 30px;
    }
}

@media screen and (min-width: 800px) {
    .home-frase{
        padding:100px 50px 15px;
        grid-template-columns: 200px 1fr;
        align-items: start;
        margin-bottom:120px;
    }
}

@media screen and (min-width: 1000px) {
    .home-frase{
        padding:130px 50px 15px;
        grid-template-columns: 250px 1fr;
        margin-bottom:150px;
    }
}

@media screen and (min-width: 1200px) {
    .home-frase{
        grid-template-columns: 300px 1fr;
        padding:150px 80px 15px;
        margin-bottom:170px;
    }
}

@media screen and (min-width: 1400px) {
    .home-frase{
        grid-template-columns: 350px 1fr;
    }
}

@media screen and (min-width: 1600px) {
    .home-frase{
        grid-template-columns: 400px 1fr;
        padding:200px 120px 15px;
        margin-bottom:230px;
    }
}

@media screen and (min-width: 1800px) {
    .home-frase{
        grid-template-columns: 500px 1fr;
    }
}

@media screen and (min-width: 2000px) {
    .home-frase{
        grid-template-columns: 600px 1fr;
    }
}

.home-frase .segunda-col{
    max-width: 1100px;
    transition: all .5s ease;
}

.home-frase .segunda-col p{
    font-size: 18px;
    line-height: 1.3;
    font-weight: 300;
    transition: all .5s ease;
}

.home-frase .segunda-col p{
    margin-bottom:18px;
}

#somosdalia{
    font-weight: 600;
    color: var(--color1);
    white-space: nowrap;
}

@media screen and (min-width: 400px) {
    .home-frase .segunda-col p{
        font-size: 20px;
    }
}

@media screen and (min-width: 1000px) {    
    .home-frase .segunda-col p{
        font-size: 22px;
    }
}

@media screen and (min-width: 1200px) {
    .home-frase .segunda-col p{
        font-size: 25px;
    }
}

@media screen and (min-width: 1600px) {
    .home-frase .segunda-col p{
        font-size: 28px;
    }
}

@media screen and (min-width: 1800px) {
    .home-frase .segunda-col p{
        font-size: 30px;
    }
}

@media screen and (min-width: 2000px) {
    .home-frase .segunda-col p{
        font-size: 32px;
    }
}

.home-frase .segunda-col .scroll-highlight{
    margin-bottom:10px;
    transition: all .5s ease;
}

@media screen and (min-width: 650px) {
    .home-frase .segunda-col .scroll-highlight{
        margin-bottom:20px;
    }
}

@media screen and (min-width: 1000px) {
    .home-frase .segunda-col .scroll-highlight{
        margin-bottom:30px;
    }
}

@media screen and (min-width: 1600px) {
    .home-frase .segunda-col .scroll-highlight{
        margin-bottom:40px;
    }
}

/*Logo que gira*/
.logo-circular {
    max-width:150px;
    margin:0px auto;
    transition: all .5s ease;
    position:relative;
}

@media screen and (min-width: 1200px) {
    .logo-circular {
        max-width:180px;
    }
}

.logo-circular img{
    width:100%;
}

.logo-circular-r{
    position:absolute;
    animation: giratexto 20s linear infinite;
}

@keyframes giratexto{
    
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

/** 04.02.04. Home-Proyectos ------*/


.home-proyectos {
    padding: 50px 20px 10px;
    text-align: left;
    transition: all .5s ease;
}

@media screen and (min-width: 450px) {
    .home-proyectos {
        padding: 30px 30px 10px;
    }
}

@media screen and (min-width: 850px) {
    .home-proyectos {
        padding: 50px 50px 0px;
        display:grid;
        grid-template-columns: repeat(2,1fr);
        grid-gap: 30px;
        transition:all .5s ease;
    }
    .col-dcha {
      position: relative;
      top: 100px;
      transition:all .5s ease;
    }
}

@media screen and (min-width: 1000px) {
    .home-proyectos {
        grid-gap: 50px;
    }
}

@media screen and (min-width: 1200px) {
    .home-proyectos {
        padding: 50px 80px 0px;
        grid-gap: 70px;
    }
    .col-dcha {
      top: 130px;
    }
}

@media screen and (min-width: 1400px) {
    .home-proyectos {
        max-width:95%;
    }
}

@media screen and (min-width: 1600px) {
    .home-proyectos {
        padding: 50px 120px 0px;
        max-width:92%;
        grid-gap: 100px;
    }
}

@media screen and (min-width: 2000px) {
    .home-proyectos {
        max-width:90%;
    }
}

.home-proyectos .texto-semititulo {
    font-size: 18px;
    margin-bottom:5px;
    line-height: 1.2;
    color: var(--color2);
    font-weight: 400;
    transition: all .5s ease;
}

@media screen and (min-width: 700px) {
    .home-proyectos .texto-semititulo {
        font-size: 20px;
    }
}

@media screen and (min-width: 1000px) {
    .home-proyectos .texto-semititulo {
        font-size: 22px;
    }
}

@media screen and (min-width: 1800px) {
    .home-proyectos h2 {
        max-width: 850px;
    }
}


.home-proyectos section {
    margin-bottom: 50px;
    transition:all .5s ease;
}

@media screen and (min-width: 1200px) {
    .home-proyectos section {
        margin-bottom: 80px;
    }
}

@media screen and (min-width: 1500px) {
    .home-proyectos section {
        margin-bottom: 120px;
    }
}

.home-proyectos .portfolio-thumb {
    transform:translateY(100px);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1);
    opacity:0;
}

.home-proyectos .portfolio-thumb .marco-redondo {
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1);
    border-radius: 30px;
}

.home-proyectos.portfolio-item .portfolio-thumb img {
    transition: all 1s cubic-bezier(0.25, 1, 0.3, 1);
    transform-origin: center center;
    transform: scale(1.02);
}

.home-proyectos.portfolio-item .portfolio-thumb .marco-redondo:hover img {
    transform: scale(1.1);
}

.home-proyectos .datos{
    margin-top:20px;
    margin-left:15px;
    transition: all .5s ease;
}

.home-proyectos .datos p{
    font-size:14px;
    line-height: 1.1;
    transition: all .5s ease;
}

.home-proyectos .datos p.cliente{
    font-size:30px;
    font-weight: normal;
    font-family: var(--font2);
    color: var(--color2);
    text-transform: uppercase;
    padding-bottom: 10px;
}

.home-proyectos .portfolio-thumb:hover p.cliente {
    color:var(--color1);
}

@media screen and (min-width: 600px) {
    .home-proyectos .datos p{
        font-size:16px;
    }

    .home-proyectos .datos p.cliente{
        font-size:35px;
    }
}

@media screen and (min-width: 850px) {
    .home-proyectos .datos p.cliente{
        font-size:32px;
    }
}

@media screen and (min-width: 1000px) {
    .home-proyectos .datos p.cliente{
        font-size:36px;
    }
}

@media screen and (min-width: 1200px) {
    .home-proyectos .datos p{
        font-size:18px;
    }

    .home-proyectos .datos p.cliente{
        font-size:40px;
    }
}

.home-proyectos-boton{
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
    z-index: 1;
    position:relative;
    transition: all .5s ease;
}

@media screen and (min-width: 850px) {
    .home-proyectos-boton{
       margin-top: 50px;
    margin-bottom: 50px;
        text-align: right;
    }
}


/** -- 04.02.05. Home-Cta -- **/


.home-cta{
    padding:50px 15px;
    transition: all .5s ease;
}

@media screen and (min-width: 450px) {
    .home-cta{
        padding:70px 30px;
    }
}

@media screen and (min-width: 800px) {
    .home-cta{
        padding:100px 50px 70px;
        display:grid;
        grid-template-columns: 200px 1fr;
        grid-gap:30px;
        transition: all .5s ease;
    }
}

@media screen and (min-width: 1000px) {
    .home-cta{
        grid-template-columns: 250px 1fr;
        padding:100px 50px 100px;
    }
}

@media screen and (min-width: 1200px) {
    .home-cta{
        grid-template-columns: 300px 1fr;
        padding:120px 80px 140px;
    }
}

@media screen and (min-width: 1400px) {
    .home-cta{
        grid-template-columns: 350px 1fr;
        padding:120px 80px 160px;
    }
}

@media screen and (min-width: 1600px) {
    .home-cta{
        grid-template-columns: 400px 1fr;
        padding:150px 120px 200px;
    }
}

@media screen and (min-width: 1800px) {
    .home-cta{
        grid-template-columns: 500px 1fr;
    }
}

@media screen and (min-width: 2000px) {
    .home-cta{
        grid-template-columns: 600px 1fr;
    }
}

.home-cta .primera-col p{
    font-size: 18px;
    line-height: 1.3;
    font-family: var(--font2);
    text-transform: uppercase;
    font-weight: normal;
    transition: all .5s ease;
    margin-bottom:25px;
}

.home-cta .primera-col p .ayudarte{
    color: var(--color2);
    transition: all .5s ease;
}

.home-cta .segunda-col{
    max-width: 1100px;
    transition: all .5s ease;
}

.home-cta .segunda-col p{
    font-size: 18px;
    line-height: 1.3;
    font-weight: 300;
    transition: all .5s ease;
}

.home-cta .segunda-col p:first-of-type{
    margin-bottom:25px;
}

@media screen and (min-width: 400px) {
    .home-cta .primera-col p{
        font-size: 20px;
    }
    .home-cta .segunda-col p{
        font-size: 20px;
    }
}

@media screen and (min-width: 1000px) {
    .home-cta .primera-col p{
        font-size: 22px;
    }
    .home-cta .segunda-col p{
        font-size: 22px;
    }
}

@media screen and (min-width: 1200px) {
    .home-cta .primera-col p{
        font-size: 25px;
    }
    .home-cta .segunda-col p{
        font-size: 25px;
    }
}

@media screen and (min-width: 1400px) {
    .home-cta .primera-col p{
        max-width: 380px;
    }
}

@media screen and (min-width: 1600px) {
    .home-cta .primera-col p{
        font-size: 28px;
    }
     .home-cta .segunda-col p{
        font-size: 28px;
    }
}

@media screen and (min-width: 1800px) {
     .home-cta .segunda-col p{
        font-size: 30px;
    }
}

@media screen and (min-width: 2000px) {
     .home-cta .segunda-col p{
        font-size: 32px;
    }
}

.home-cta .boton{
    margin-top:30px;
    transition: all .5s ease;
}

@media screen and (min-width: 850px) {
    .home-cta .boton{
        margin-top: 40px;
    }
}

@media screen and (min-width: 1200px) {
    .home-cta .boton{
        margin-top: 50px;
    }
}

@media screen and (min-width: 1600px) {
    .home-cta .boton{
        margin-top: 70px;
    }
}

/* Home Outline Marquee */

.marquee{
    position: relative;
    overflow: hidden;
    top:3px;
}

.marquee__inner{
    display:flex;
    width: 100%;
    flex: auto;
    flex-direction: row;
}

.marquee__part{
    display:flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 4px;
}

.marquee__part img{
    width:100%;
    max-width: 800px;
    transition: all .5s ease;
}

@media screen and (min-width: 800px) {
    .marquee__part img{
        max-width: 1300px;
    }
}

@media screen and (min-width: 1200px) {
    .marquee__part img{
        max-width: 1700px;
    }
}

/** -- 04.02.06. Home Logo Animado -- **/

.home-logo-animado {
    width:100%;
    height: 100%;
    position:fixed;
    top:0;
    bottom:0;
    z-index:2;
     display:grid;
    grid-template-columns: 1fr;
    transform: translateY(-2000px)
}


@media screen and (min-width: 1200px) {
    .home-logo-animado {
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.home-logo-animado div {
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #014761;
    outline: 5px solid #014761;
}

.home-logo-animado video {
    width:100%;
    max-width:300px;
    margin:auto;
}


/** -- 04.03. Servicios -- **/


.pag-servicios{
    padding:50px 15px;
    transition: all .5s ease;
}

@media screen and (min-width: 450px) {
    .pag-servicios{
        padding:70px 30px;
    }
}

@media screen and (min-width: 800px) {
    .pag-servicios{
        padding:100px 50px;
    }
}

@media screen and (min-width: 1200px) {
    .pag-servicios{
        padding:100px 80px;
    }
}

@media screen and (min-width: 1600px) {
    .pag-servicios{
        padding:100px 120px;
    }
}

/** -- 04.03.01. Servicios Intro -- **/


.pag-servicios-intro h1 {
    margin-bottom: 10px;
    transition: all .5s ease;
}

@media screen and (min-width: 700px) {
    .pag-servicios-intro h1 {
        margin-bottom: 20px;
    }
}

@media screen and (min-width: 1100px) {
    .pag-servicios-intro h1 {
        margin-bottom: 30px;
    }
}

@media screen and (min-width: 1800px) {
    .pag-servicios-intro h1 {
        margin-bottom: 40px;
    }
}

.pag-servicios-intro .desc {
    font-size:18px;
    line-height: 1.3;
    font-weight: 300;
    transition: all .5s ease;
}

@media screen and (min-width: 550px) {
    .pag-servicios-intro .desc {
        font-size:21px;
    }
}

@media screen and (min-width: 700px) {
    .pag-servicios-intro .desc {
        font-size:23px;
    }
}

@media screen and (min-width: 900px) {
    .pag-servicios-intro .desc {
        font-size:25px;
    }
}


@media screen and (min-width: 1200px) {
    .pag-servicios-intro .desc {
        font-size:28px;
    }
}


.pag-servicios-intro .semititulo {
    font-size:18px;
    line-height: 1.2;
    transition: all .5s ease;
    color: var(--color2);
    margin-bottom: 15px;
    font-weight: 400;
}

@media screen and (min-width: 450px) {
   .pag-servicios-intro .semititulo {
        font-size:20px;
        margin-bottom: 20px;
    }
}

@media screen and (min-width: 900px) {
    .pag-servicios-intro .semititulo {
        font-size:22px;
    }
}

@media screen and (min-width: 1100px) {
    .pag-servicios-intro .semititulo {
        font-size:25px;
    }
}

@media screen and (min-width: 1600px) {
    .pag-servicios-intro .semititulo {
        font-size:27px;
    }
}

.servicios-intro-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 30px;
    transition: all .5s ease;
}

@media screen and (min-width: 550px) {
    .servicios-intro-grid {
        grid-gap: 50px;
    }
}

@media screen and (min-width: 1300px) {
    .servicios-intro-grid {
        grid-template-columns: 1fr 350px;
        grid-gap: 100px;
        padding-right: 80px;
    }
}

@media screen and (min-width: 2000px) {
    .servicios-intro-grid {
        grid-gap: 150px;
         grid-template-columns: 1fr 430px;
    }
}

@media screen and (min-width: 2200px) {
    .servicios-intro-grid {
         grid-template-columns: 1fr 500px;
    }
}

.servicios-intro-grid .desc-serv p{
    padding-bottom: 15px;
}

.servicios-intro-grid .desc-serv p a{
    font-size:18px;
    font-weight: 300;
    transition: all .5s ease;
}

@media screen and (min-width: 550px) {
    .servicios-intro-grid .desc-serv p a{
        font-size:22px;
    }
}

@media screen and (min-width: 1200px) {
    .servicios-intro-grid .desc-serv p a{
        font-size:25px;
    }
}

.servicios-intro-grid .desc-serv .icono-boton{
    width: 25px;
    height: 25px;
    transform: rotate(45deg);
    transition: all .5s ease;
    background-image: url(../imagenes/flecha-corta-verde.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    top: -2px;
}

.servicios-intro-grid .desc-serv a:hover .icono-boton{
    transform: rotate(0deg);
   background-image: url(../imagenes/flecha-corta-azul.svg);
    top: 4px;
}

.servicios-imagen-fullwidth {
    width:100%;
    height: 300px;
    background-image: url(../imagenes/grid-servicios.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    overflow: hidden;
    transition: all .5s ease;
}

@media screen and (min-width: 900px) {
    .servicios-imagen-fullwidth {
        height: 400px;
    }
}

@media screen and (min-width: 1300px) {
    .servicios-imagen-fullwidth {
        height: 500px;
    }
}

@media screen and (min-width: 1600px) {
    .servicios-imagen-fullwidth {
        height: 600px;
    }
}

@media screen and (min-width: 1800px) {
    .servicios-imagen-fullwidth {
        height: 700px;
    }
}



/** -- 04.03.02. Listado Servicios -- **/

.listado-servicios {
    max-width:1800px;
    margin:0px auto 0px;
    transition: all .5s ease;
}

@media screen and (min-width: 1000px) { 
    .listado-servicios {
        margin:50px auto 0px;
    }
}

@media screen and (min-width: 1200px) { 
    .listado-servicios {
        margin:100px auto 0px;
    }
}

@media screen and (min-width: 1600px) { 
    .listado-servicios {
        margin:130px auto 0px;
    }
}

.servicio{
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0px;
    transition: all .5s ease;
}

#serv2 {
    margin: 100px 0px;
    transition: all .5s ease;
}

@media screen and (min-width: 600px) {    
    #serv2 {
        margin: 120px 0px;
    }
}

@media screen and (min-width: 800px) {    
    #serv2 {
        margin: 140px 0px;
    }
}

@media screen and (min-width: 1000px) {
    .servicio{
        grid-template-columns: 1fr 1fr;
        grid-gap: 30px;
        align-items: center;
    }
}

@media screen and (min-width: 1100px) {
    .servicio{
        grid-gap: 60px;
    }
}

@media screen and (min-width: 1300px) {
    .servicio{
        grid-gap: 100px;
    }
    #serv2 {
        margin: 170px 0px;
    }
}

@media screen and (min-width: 1500px) {
    .servicio{
        grid-gap: 150px;
    }
    
    #serv2 {
        margin: 200px 0px;
    }
}

@media screen and (min-width: 1800px) {
    #serv2 {
        margin: 250px 0px;
    }
}

.serv-img {
    text-align: center;   
}

.serv-img img {
    max-width: 500px;
    margin:30px auto 0px;   
}

@media screen and (min-width: 600px) {
    .serv-img img {
        margin:60px auto 0px;   
    }
}

@media screen and (min-width: 1000px) {
    .serv-img img {
        max-width: 800px;
        margin:0px auto 0px;   
    }
}

.serv-img.uno {
    display: none;
}

@media screen and (min-width: 1000px) {
    .serv-img.uno {
        display: block;
    }

    .serv-img.dos {
        display: none;
    }
}

.listado-servicios .servicio h3{
    font-weight: normal;
    font-family: var(--font2);
    text-transform: uppercase;
    padding-bottom: 10px;
    font-size:30px;
    transition: all .5s ease;
}

.listado-servicios .servicio h3 span{
    font-weight: 300;
    font-size:20px;
    color: var(--color2);
    transition: all .5s ease;
}

@media screen and (min-width: 800px) {
    .listado-servicios .servicio h3{
        font-size:38px;
    }

    .listado-servicios .servicio h3 span{
        font-size:26px;
    }
}

@media screen and (min-width: 1000px) {
    .listado-servicios .servicio h3{
        font-size:35px;
    }

    .listado-servicios .servicio h3 span{
        font-size:24px;
    }
}

@media screen and (min-width: 1201px) {
    .listado-servicios .servicio h3{
        font-size:40px;
    }

    .listado-servicios .servicio h3 span{
        font-size:26px;
    }
}

@media screen and (min-width: 1600px) {
    .listado-servicios .servicio h3{
        font-size:47px;
    }

    .listado-servicios .servicio h3 span{
        font-size:28px;
    }
}

.listado-servicios .servicio hr{
    background-color: var(--color2);
    border: 0px solid var(--color2);
    height: 3px;
    margin-bottom: 30px;
    transition: all .5s ease;
}

.listado-servicios .servicio p{
    margin-bottom: 15px;
    font-size:16px;
    transition: all .5s ease;
}

@media screen and (min-width: 800px) {
    .listado-servicios .servicio p{
        font-size:18px;
    }
}

@media screen and (min-width: 1600px) {
    .listado-servicios .servicio p{
        font-size:20px;
    }
}

.listado-servicios .servicio ul{
    margin-top: 10px;
    margin-left:0px;
    transition: all .5s ease;
}

@media screen and (min-width: 800px) {
    .listado-servicios .servicio ul{
        margin-top: 0px;
    }
}

@media screen and (min-width: 600px) {
    .listado-servicios .servicio ul{
        display:grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
    }
    
    .listado-servicios .servicio.serv2 ul{
        grid-template-columns: 1fr 220px;
        transition: all .5s ease;
    }
}

@media screen and (min-width: 650px) {    
    .listado-servicios .servicio.serv2 ul{
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (min-width: 1000px) {
    .listado-servicios .servicio ul{
        margin-left:20px;
        margin-top: 30px;
        grid-template-columns: 1fr;
        column-gap: 0px;
    }
    .listado-servicios .servicio.serv2 ul{
        grid-template-columns: 1fr;
    }
}

@media screen and (min-width: 1200px) {
    .listado-servicios .servicio ul{
        margin-left:30px;
        
    }
}

@media screen and (min-width: 1400px) {
    .listado-servicios .servicio ul{
        margin-left:40px;
    }
}

@media screen and (min-width: 1600px) {
    .listado-servicios .servicio ul{
        margin-left:10px;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
    }

    .listado-servicios .servicio.serv2 ul{
        grid-template-columns: 1fr 220px;
    }
}

@media screen and (min-width: 1700px) {
    .listado-servicios .servicio ul{
        margin-left:30px;
    }
}

@media screen and (min-width: 1800px) {
    .listado-servicios .servicio.serv2 ul{
        grid-template-columns: 1fr 280px;
    }
}

@media screen and (min-width: 1900px) {
    .listado-servicios .servicio.serv2 ul{
        grid-template-columns: 1fr 320px;
    }
}

@media screen and (min-width: 2000px) {
    .listado-servicios .servicio.serv2 ul{
        grid-template-columns: 1fr 360px;
    }
}

.listado-servicios .servicio ul li{
    margin-bottom: 5px;
    font-size:18px;
    font-weight: 300;
    line-height: 1.2;
    transition: all .5s ease;
}


@media screen and (min-width: 1000px) {
    .listado-servicios .servicio ul li{
        font-size:20px;
    }
}

@media screen and (min-width: 1300px) {
    .listado-servicios .servicio ul li{
        font-size:22px;
        margin-bottom: 10px;
    }
}

@media screen and (min-width: 1625px) {
    .listado-servicios .servicio ul li{
        font-size:24px;
        margin-bottom: 12px;
    }
}

.listado-servicios .servicio ul li:before{
    content:'';
    background-color: var(--color2);
    width: 12px;
    height: 12px;
    display:inline-block;
    margin-right:10px;
    transition: all .5s ease;
}

@media screen and (min-width: 1000px) {
    .listado-servicios .servicio ul li:before{
        width: 15px;
        height: 15px;
        margin-right:15px;
    }
}

.serv-figuras-scroll{
    position: relative;
}

.figura  {
    display:none;
    mix-blend-mode: multiply;
}

@media screen and (min-width: 1000px) {
    .figura.hexagono  {
        display: block;
        width: 150px;
        position: absolute;
        top: -100px;
        left:-100px;
        opacity:0;
        z-index:2;
        transition: width .5s ease;
    }
    
    .figura.cruz  {
        display: block;
        width: 150px;
        position: absolute;
        right:-200px;
        top:550px;
        opacity:0;
        transition: width .5s ease;
    }
    
    .figura.triangulo  {
        display: block;
        width: 150px;
        position: absolute;
        bottom: -200px;
        right:500px;
        transition: width .5s ease;
    }
}

@media screen and (min-width: 1400px) {
    .figura.hexagono, .figura.cruz, .figura.triangulo  {
        width: 200px;
    }
    
     .figura.cruz  {
        right:-320px;
         top:450px;
    }
    
    .figura.triangulo  {
        bottom: -200px;
        right:800px;
    }
}

@media screen and (min-width: 1800px) {
    .figura.hexagono, .figura.cruz, .figura.triangulo  {
        width: 250px;
    }
    
    .figura.triangulo  {
        bottom: -200px;
        right:800px;
    }
    
    .figura.cruz  {
        right:-400px;
    }
}

.serv-info  {
    z-index: 1;
    position: relative;
}

/** -- 04.03.03. Proceso de Trabajo -- **/
/* Acordeon */


.pag-servicios-proceso{
    margin:50px auto 40px;
    max-width: 1800px;
    transition: all .5s ease;
}

@media screen and (min-width: 1200px) {
    .pag-servicios-proceso{
        margin:100px auto 100px;
    }
}

.pag-servicios-proceso h2{
    margin-bottom:20px;
}
@media screen and (min-width: 1400px) {
    .pag-servicios-proceso h2{
        max-width: 400px;
    }
}

@media screen and (min-width: 1800px) {
    .pag-servicios-proceso h2{
         max-width: 460px;
    }
}

.acordeon-grid {
    display: grid;
    grid-template-columns: 1fr;
}

@media screen and (min-width: 1200px) {
    .acordeon-grid {
        grid-template-columns: 1fr 2fr;
        grid-gap: 25px;
    }
}

@media screen and (min-width: 1400px) {
    .acordeon-grid {
        grid-gap: 50px;
    }
}

@media screen and (min-width: 1500px) {
    .acordeon-grid {
        grid-gap: 80px;
    }
}

.acordeon {
    text-align: left;
    position: relative;
    top: 20px;
}

.acordeon__titulo {
    color: var(--color1);
    font-size: 18px;
    font-weight: 300;
    padding: 20px 10px;
    border-top: 1px solid var(--color1);
    transition: all .5s ease;
}

.acordeon__titulo .verde {
    font-size: 14px;
    font-weight: 500;
    transition: all .5s ease;
}

@media screen and (min-width: 400px) {
    .acordeon__titulo {
        font-size: 20px;
    }
}

@media screen and (min-width: 800px) {
    .acordeon__titulo {
        font-size: 23px;
    }
}

@media screen and (min-width: 1200px) {
    .acordeon__titulo {
        font-size: 25px;
        padding: 30px 20px;
    }
     .acordeon__titulo .verde {
        font-size: 16px;
    }
}

@media screen and (min-width: 1400px) {
    .acordeon__titulo {
        font-size: 28px;
        padding: 40px 20px;
    }
     .acordeon__titulo .verde {
        font-size: 18px;
    }
}

.acordeon__titulo:hover {
    color: var(--color2);
}

.acordeon__contenido {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: 0.7s ease;
    border: 0px solid var(--color2);
}

.acordeon__contenido p {
    padding: 0px 20px 50px 40px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    transition: all .5s ease;
}

@media screen and (min-width: 1200px) {
    .acordeon__contenido p {
        padding: 0px 20px 50px 80px;
        font-weight: 400;
        font-size: 18px;
        line-height: 1.8;
        max-width:1000px;
    }
}

.activo + .acordeon__contenido {
    max-height: 1000px;
    opacity: 1;
    visibility: visible;
}

.acordeon__titulo.activo {
    color: var(--color2);
}

.acordeon__titulo.activo .verde {
    color: var(--color1);
}

.acordeon__titulo:after {
    content: "\002b";
    float: right;
    font-size: 25px;
  position: relative;
  top: -2px;
  font-weight: 200;
    transition: all .5s ease;
}

@media screen and (min-width: 800px) {
    .acordeon__titulo:after {
        font-size: 30px;
        top: -4px;
    }
}

@media screen and (min-width: 1200px) {
    .acordeon__titulo:after {
        font-size: 35px;
        top: -6px;
    }
}

.acordeon__titulo.activo:after {
    content: "\02212";
    float: right;
    font-size: 25px;
    position: relative;
    top: -2px;
    font-weight: 200;
}

@media screen and (min-width: 800px) {
    .acordeon__titulo.activo:after {
        font-size: 30px;
        top: -4px;
    }
}

@media screen and (min-width: 1200px) {
    .acordeon__titulo.activo:after {
        font-size: 35px;
        top: -6px;
    }
}

@media screen and (min-width: 1000px) {
    .acordeon {
        padding: 0px 0px;
        text-align: left;
    }
}

/** -- 04.04. Proyectos -- **/

.pag-proyectos{
    padding:40px 15px;
    transition: all .5s ease;
}

.pag-proyectos.dos{
    padding:50px 15px 0px;
}

@media screen and (min-width: 450px) {
    .pag-proyectos{
        padding:50px 30px;
    }
    
    .pag-proyectos.dos{
        padding:70px 30px 0px;
    }
}

@media screen and (min-width: 800px) {
   .pag-proyectos{
        padding:70px 50px;
    }
    
    .pag-proyectos.dos{
        padding:100px 50px 0px;
    }
}

@media screen and (min-width: 1200px) {
    .pag-proyectos{
        padding:100px 80px;
    }
    
    .pag-proyectos.dos{
        padding:100px 80px 0px;
    }
}

@media screen and (min-width: 1600px) {
    .pag-proyectos{
        padding:100px 120px;
    }
    
     .pag-proyectos.dos{
        padding:100px 120px 0px;
    }
}

/** -- 04.04.01. Proyectos Intro -- **/


@media screen and (min-width: 448px) {
    .pag-proyectos-intro h1 {
        max-width: 450px;
    }
}

@media screen and (min-width: 700px) {
    .pag-proyectos-intro h1 {
        max-width: 550px;
    }
}

@media screen and (min-width: 900px) {
    .pag-proyectos-intro h1 {
        max-width: 650px;
    }
}

@media screen and (min-width: 1100px) {
    .pag-proyectos-intro h1 {
        max-width: 700px;
    }
}

@media screen and (min-width: 1400px) {
    .pag-proyectos-intro h1 {
         max-width: 900px;
    }
}

@media screen and (min-width: 1800px) {
    .pag-proyectos-intro h1 {
         max-width: 1000px;
    }
}

.pag-proyectos-intro .semititulo {
    font-size:18px;
    line-height: 1.2;
    transition: all .5s ease;
    color: var(--color2);
    margin-bottom: 15px;
    font-weight: 400;
}

@media screen and (min-width: 450px) {
   .pag-proyectos-intro .semititulo {
        font-size:20px;
        margin-bottom: 20px;
    }
}

@media screen and (min-width: 900px) {
    .pag-proyectos-intro .semititulo {
        font-size:22px;
    }
}

@media screen and (min-width: 1100px) {
    .pag-proyectos-intro .semititulo {
        font-size:25px;
    }
}

@media screen and (min-width: 1600px) {
   .pag-proyectos-intro .semititulo {
        font-size:27px;
    }
}


/** -- 04.04.02. Proyectos Grid -- **/

 .col-izda section, .col-dcha section {
    margin-bottom:60px;
    transition:all .5s ease;
}
.espacio-proyectos{
    display: none;
    transition:all .5s ease;
}

@media screen and (min-width: 850px) {
    
    .proyectos-grid {
        display:grid;
        grid-template-columns: repeat(2,1fr);
        grid-gap: 30px;
        max-width: 100%;
        transition:all .5s ease;
    }
    .proyectos-grid .col-dcha {
      position: relative;
      top: 0px;
      transition:all .5s ease;
    }
    
     .col-izda section, .col-dcha section {
        margin-bottom:80px;
    }
    .espacio-proyectos{
        display: block;
    }

}

@media screen and (min-width: 1000px) {
    .proyectos-grid {
        grid-gap: 50px;
    }
}

@media screen and (min-width: 1200px) {    
    .proyectos-grid{
        grid-gap: 70px;
    }
    
    .proyectos-grid .col-dcha {
      top: 0px;
    }
    
     .col-izda section, .col-dcha section {
        margin-bottom:100px;
    }
}

@media screen and (min-width: 1400px) {    
    .proyectos-grid{
        max-width: 94%;
    }
}

@media screen and (min-width: 1500px) {    
    .proyectos-grid{
        max-width: 92%;
    }
}

@media screen and (min-width: 1600px) {    
    .proyectos-grid{
        grid-gap: 100px;
    }
    
    .col-izda section, .col-dcha section {
        margin-bottom:120px;
    }
}

@media screen and (min-width: 1800px) {    
    .proyectos-grid{
        max-width: 90%;
    }
}

.proyectos-grid .portfolio-thumb {
    transform:translateY(100px);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1);
    opacity:0;
}

.proyectos-grid .portfolio-thumb .marco-redondo {
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1);
    border-radius: 30px;
}

.proyectos-grid.portfolio-item .portfolio-thumb img {
    transition: all 1s cubic-bezier(0.25, 1, 0.3, 1);
    transform-origin: center center;
    transform: scale(1.02);
}

.proyectos-grid.portfolio-item .portfolio-thumb .marco-redondo:hover img {
    transform: scale(1.1);
}

.proyectos-grid .datos{
    margin-top:20px;
    margin-left:15px;
    transition: all .5s ease;
}

.proyectos-grid .datos p{
    font-size:14px;
    line-height: 1.1;
    transition: all .5s ease;
}

.proyectos-grid .datos p.cliente{
    font-size:30px;
    font-weight: normal;
    font-family: var(--font2);
    color: var(--color2);
    text-transform: uppercase;
    padding-bottom: 10px;
}

.proyectos-grid .portfolio-thumb:hover p.cliente {
    color:var(--color1);
}

@media screen and (min-width: 600px) {
    .proyectos-grid .datos p{
        font-size:16px;
    }

    .proyectos-grid .datos p.cliente{
        font-size:35px;
    }
}

@media screen and (min-width: 850px) {
    .proyectos-grid .datos p.cliente{
        font-size:32px;
    }
}

@media screen and (min-width: 1000px) {
   .proyectos-grid .datos p.cliente{
        font-size:36px;
    }
}

@media screen and (min-width: 1200px) {
    .proyectos-grid .datos p{
        font-size:18px;
    }

    .proyectos-grid .datos p.cliente{
        font-size:40px;
    }
}



/** -- 04.05. Single Proyectos - Páginas individuales -- **/

/** -- 04.05.01. Imagen intro -- **/

.singlepro-intro {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 250px;
    transition: height .5s ease;
}

@media screen and (min-width: 450px) {
    .singlepro-intro {
        height: 300px;
    }
}

@media screen and (min-width: 750px) {
    .singlepro-intro {
        height: 400px;
    }
}

@media screen and (min-width: 1100px) {
    .singlepro-intro {
        height: 500px;
    }
}

@media screen and (min-width: 1400px) {
    .singlepro-intro {
        height: 650px;
    }
}

@media screen and (min-width: 2000px) {
    .singlepro-intro {
        height: 800px;
    }
}


.singlepro-intro.video-background {
    position: relative;
    overflow: hidden;
    transition: height 0.5s ease;
}

/* El vídeo actúa como fondo */
.singlepro-intro.video-background video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none; /* por si el vídeo tapara clics */
}

/* Todo lo que metas dentro del article quedará encima */
.singlepro-intro.video-background > *:not(video) {
    position: relative;
    z-index: 1;
}

.singlepro-cuerpo{
    padding:40px 20px 60px;
    transition: all .5s ease;
}

@media screen and (min-width: 450px) {
    .singlepro-cuerpo{
        padding:40px 30px 60px;
    }
}

@media screen and (min-width: 800px) {
   .singlepro-cuerpo{
        padding:60px 50px 100px ;
    }
}

@media screen and (min-width: 1200px) {
    .singlepro-cuerpo{
        padding:80px 105px 130px;
    }
}

@media screen and (min-width: 1400px) {
    .singlepro-cuerpo{
        padding:120px 105px 150px;
    }
}

@media screen and (min-width: 1600px) {
    .singlepro-cuerpo{
        padding:120px 120px 150px;
    }
}

.singlepro-cuerpo .nombremarca{
    font-style: italic;
    font-weight: 500;
}

.singlepro-titulo h1 {
    font-size: 40px;
    font-weight:normal;
    font-family:var(--font2);
    text-transform: uppercase;
    color: var(--color1);
    padding:0px;
    margin:0px;
    transition: all .5s ease;
}

@media screen and (min-width: 450px) {
    .singlepro-titulo h1 {
        font-size: 45px;
    }
}

@media screen and (min-width: 700px) {
    .singlepro-titulo h1 {
        font-size: 50px;
    }
}

@media screen and (min-width: 900px) {
    .singlepro-titulo h1 {
        font-size: 60px;
    }
}

@media screen and (min-width: 1100px) {
    .singlepro-titulo h1 {
        font-size: 70px;
    }
}

.singlepro-titulo hr {
    border: 2px solid var(--color2);
    padding:0px;
    margin:5px 0px 30px;
    transition: all .5s ease;
}

@media screen and (min-width: 750px) {
    .singlepro-titulo hr {
        margin:15px 0px 50px;
    }
}

@media screen and (min-width: 1100px) {
    .singlepro-titulo hr {
        margin:15px 0px 70px;
    }
}

/** -- 04.05.02. Ficha proyecto -- **/

.ficha-proyecto{
    padding-bottom: 50px;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 40px;
    transition: all .5s ease;
}

@media screen and (min-width: 750px) {
    .ficha-proyecto {
       grid-template-columns: 200px 1fr;
       padding-bottom: 70px;
    }
}

@media screen and (min-width: 900px) {
    .ficha-proyecto {
        grid-gap: 60px;
    }
}

@media screen and (min-width: 1100px) {
    .ficha-proyecto {
        grid-template-columns: 280px 1fr;
        padding-bottom: 130px;
    }
}

@media screen and (min-width: 1300px) {
    .ficha-proyecto {
        grid-template-columns: 310px 1fr;
    }
}

@media screen and (min-width: 1500px) {
    .ficha-proyecto {
        grid-template-columns: 350px 1fr;
    }
}

@media screen and (min-width: 1700px) {
    .ficha-proyecto {
        grid-template-columns: 400px 1fr;
    }
}

@media screen and (min-width: 1900px) {
    .ficha-proyecto {
        grid-template-columns: 500px 1fr;
        padding-bottom: 160px;
    }
}

@media screen and (min-width: 2000px) {
    .ficha-proyecto {
        grid-template-columns: 600px 1fr;
    }
}

@media screen and (min-width: 2200px) {
    .ficha-proyecto {
        grid-template-columns: 700px 1fr;
    }
}

.singlepro-cuerpo .ficha-proyecto .izda p {
    font-size: 16px;
    font-weight:400;
    line-height: 1.3;
    margin-bottom:0px;
    transition: all .5s ease;
}

.singlepro-cuerpo .ficha-proyecto .izda a {
    font-size: 16px;
    font-weight:400;
    transition: all .5s ease;
}

.singlepro-cuerpo .ficha-proyecto .izda p.semit {
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom:5px;
    color: var(--color2);
    font-family: var(--font2);
    transition: all .5s ease;
}

.singlepro-cuerpo .ficha-proyecto .izda p.semit.web {
    margin-top:25px;
}


@media screen and (min-width: 750px) {
   .singlepro-cuerpo .ficha-proyecto .izda p, .singlepro-cuerpo .ficha-proyecto .izda a {
        font-size: 17px;
    }
    .singlepro-cuerpo .ficha-proyecto .izda p.semit {
        font-size: 26px;
    }
}

@media screen and (min-width: 1100px) {
   .singlepro-cuerpo .ficha-proyecto .izda p, .singlepro-cuerpo .ficha-proyecto .izda a {
        font-size: 18px;
    }
    .singlepro-cuerpo .ficha-proyecto .izda p.semit {
        font-size: 30px;
    }
}

.texto-proyecto{
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0px;
    padding:60px 0px;
    transition: all .5s ease;
}

@media screen and (min-width: 750px) {
    .texto-proyecto {
       grid-template-columns: 200px 1fr;
        grid-gap: 40px;
    }
}

@media screen and (min-width: 900px) {
    .texto-proyecto {
        grid-gap: 60px;
        padding:80px 0px;
    }
}

@media screen and (min-width: 1100px) {
    .texto-proyecto {
        grid-template-columns: 280px 1fr;
        padding:100px 0px;
    }
}

@media screen and (min-width: 1300px) {
    .texto-proyecto {
        grid-template-columns: 310px 1fr;
    }
}

@media screen and (min-width: 1500px) {
    .texto-proyecto {
        grid-template-columns: 350px 1fr;
        padding:130px 0px;
    }
}

@media screen and (min-width: 1700px) {
    .texto-proyecto {
        grid-template-columns: 400px 1fr;
    }
}

@media screen and (min-width: 1900px) {
    .texto-proyecto {
        grid-template-columns: 500px 1fr;
    }
}

@media screen and (min-width: 2000px) {
    .texto-proyecto {
        grid-template-columns: 600px 1fr;
    }
}

@media screen and (min-width: 2200px) {
    .texto-proyecto {
        grid-template-columns: 700px 1fr;
    }
}

 .texto-proyecto .izda{
    text-align: left;
    }

 .texto-proyecto .izda.superior{
    padding-top: 50px;
    transition: all .5s ease;
}

@media screen and (min-width: 750px) {
   .texto-proyecto .izda{
    text-align: right;
    }

    .texto-proyecto .dcha{
        padding-top:8px;
    }
    
    .texto-proyecto .izda.superior{
        padding-top: 20px;
    }
    
   .texto-proyecto .dcha.superior{
        padding-top: 28px;
    }
}

.singlepro-cuerpo .dcha p {
    font-size: 16px;
    font-weight:400;
    line-height: 1.4;
    margin-bottom:10px;
    transition: all .5s ease;
}

.singlepro-cuerpo .dcha a {
    font-size: 16px;
    font-weight:400;
    transition: all .5s ease;
}

.singlepro-cuerpo ul {
    margin-bottom: 30px;
    transition: all .5s ease;
}

.singlepro-cuerpo li {
    font-size: 16px;
    font-weight:400;
    padding: 0px 0px 10px 0px;
    position: relative;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    transition: all .5s ease;
}

.singlepro-cuerpo .destacado{
    font-weight:bold!important;
    text-transform: uppercase;
    transition: all .5s ease;
}

.singlepro-cuerpo li::before {
    content: "";
    width:10px;
    flex-shrink: 0;
    height: 10px;
    margin-right: 10px;
    margin-top: 10px;
    background-color: var(--color2);
    transition: all .5s ease;
}

@media screen and (min-width: 500px) {
    .singlepro-cuerpo .dcha p, .singlepro-cuerpo .dcha a, .singlepro-cuerpo li {
        font-size: 17px;
    }
}

@media screen and (min-width: 750px) {
   .singlepro-cuerpo .dcha p, .singlepro-cuerpo .dcha a, .singlepro-cuerpo li {
        font-size: 18px;
    }
}

@media screen and (min-width: 900px) {
   .singlepro-cuerpo .dcha p, .singlepro-cuerpo .dcha a, .singlepro-cuerpo li {
        font-size: 19px;
    }
}

@media screen and (min-width: 1100px) {
   .singlepro-cuerpo .dcha p, .singlepro-cuerpo .dcha a, .singlepro-cuerpo li {
        font-size: 20px;
    }
}

@media screen and (min-width: 1400px) {
   .singlepro-cuerpo .dcha p, .singlepro-cuerpo .dcha a, .singlepro-cuerpo li {
        font-size: 22px;
    }
}

.texto-proyecto .semi {
    color: var(--color2);
    font-size: 32px;
    font-family:var(--font2);
    text-transform: uppercase;
    font-weight:normal;
    margin-top:0px;
    margin-bottom:5px;
    transition: all .5s ease;
}

@media screen and (min-width: 700px) {
    .texto-proyecto .semi {
        margin-bottom:10px;
        font-size: 40px;
    }
}

.div-boton.volver{
    padding-top: 50px;
    transition: all .5s ease;
}

@media screen and (min-width: 700px) {
    .div-boton.volver{
        padding-top: 80px;
    }
}

@media screen and (min-width: 1100px) {
    .div-boton.volver{
        padding-top: 100px;
    }
}

@media screen and (min-width: 1300px) {
    .div-boton.volver{
        padding-top: 130px;
    }
}



/** -- 04.05.03. Imágenes proyecto -- **/

.img-proyecto.una-horizontal, .img-proyecto.dos-vertical{
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    transition: all .5s ease;
}
 .img-proyecto.una-horizontal{
        padding: 20px 0px;
      transition: all .5s ease;
    }

.img-proyecto.dos-horizontal{
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    transition: all .5s ease;
}

@media screen and (min-width: 1000px) {

    .img-proyecto.dos-horizontal{
         grid-template-columns: 1fr 1fr;
        grid-gap: 30px;
    }
    .img-proyecto.una-horizontal{
        grid-gap: 30px;
        padding: 30px 0px;
    }
    
     .img-proyecto.dos-vertical{
        grid-gap: 30px;
    }
}

/** -- 04.06. Contacto -- **/


.pag-contacto{
    padding:50px 15px;
    transition: all .5s ease;
}

@media screen and (min-width: 450px) {
    .pag-contacto{
        padding:70px 30px;
    }
}

@media screen and (min-width: 800px) {
    .pag-contacto{
        padding:100px 50px;
    }
}

@media screen and (min-width: 1200px) {
    .pag-contacto{
        padding:100px 80px;
    }
}

@media screen and (min-width: 1600px) {
    .pag-contacto{
        padding:100px 120px;
    }
}


/** -- 04.06.01. Contacto Intro -- **/


.pag-contacto-intro h1 {
    margin-bottom: 10px;
    transition: all .5s ease;
}

@media screen and (min-width: 700px) {
    .pag-contacto-intro h1 {
        margin-bottom: 20px;
    }
}

@media screen and (min-width: 900px) {
    .pag-contacto-intro h1 {
        max-width: 750px;
        margin-bottom: 60px;
    }
}

@media screen and (min-width: 1100px) {
    .pag-contacto-intro h1 {
        max-width: 850px;
    }
}

@media screen and (min-width: 1400px) {
    .pag-contacto-intro h1 {
        max-width: 1000px;
    }
}

@media screen and (min-width: 1800px) {
    .pag-contacto-intro h1 {
         max-width: 1150px;
         margin-bottom: 80px;
    }
}


.pag-contacto-intro .semititulo {
    font-size:18px;
    line-height: 1.2;
    transition: all .5s ease;
    color: var(--color2);
    margin-bottom: 15px;
    font-weight: 400;
}

@media screen and (min-width: 450px) {
   .pag-contacto-intro .semititulo {
        font-size:20px;
        margin-bottom: 20px;
    }
}

@media screen and (min-width: 900px) {
    .pag-contacto-intro .semititulo {
        font-size:22px;
    }
}

@media screen and (min-width: 1100px) {
    .pag-contacto-intro .semititulo {
        font-size:25px;
    }
}

@media screen and (min-width: 1600px) {
    .pag-contacto-intro .semititulo {
        font-size:27px;
    }
}

.pag-contacto .contacto-mail{
    margin-top: 20px;
    margin-bottom: 20px;
    transition: all .5s ease;
}

@media screen and (min-width: 1000px) {
    .pag-contacto .contacto-mail{
        margin-top: 30px;
        margin-bottom: 0px;
    }
}

@media screen and (min-width: 1400px) {
    .pag-contacto .contacto-mail{
        margin-top: 50px;
    }
}

.pag-contacto .contacto-mail a{
    font-size:20px;
    line-height: 1.2;
    color: var(--color2);
    font-weight: 600;
     position: relative;
    transition: all .5s ease;
}

@media screen and (min-width: 400px) {
    .pag-contacto .contacto-mail a{
        font-size:22px;
    }
}

@media screen and (min-width: 550px) {
    .pag-contacto .contacto-mail a{
        font-size:25px;
    }
}

@media screen and (min-width: 800px) {
    .pag-contacto .contacto-mail a{
        font-size:28px;
    }
}

@media screen and (min-width: 1000px) {
    .pag-contacto .contacto-mail a{
        font-size:30px;
    }
}

@media screen and (min-width: 1400px) {
    .pag-contacto .contacto-mail a{
        font-size:35px;
    }
}

@media screen and (min-width: 1600px) {
    .pag-contacto .contacto-mail a{
        font-size:40px;
    }
}

.pag-contacto .contacto-mail a::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--color1);
  opacity: 1;
  transform: scale(0);
  transform-origin: center;
  transition: all .5s;
}

.pag-contacto .contacto-mail a:hover::after,
.pag-contacto .contacto-mail a:focus::after{
  transform: scale(1);
}

/** -- 04.06.02. Formulario Básico  --  **/


.section-formulario-contacto  {
    display:grid;
    grid-template-columns: 1fr;
    grid-gap: 50px;
    transition: all .5s ease;
    margin-bottom:100px;
}

@media screen and (min-width: 900px) {
    .section-formulario-contacto  {
        grid-template-columns: 1fr 1.3fr;
        grid-gap: 50px;
    }
}

@media screen and (min-width: 1100px) {
    .section-formulario-contacto  {
        grid-template-columns: 1fr 1.2fr;
        grid-gap: 70px;
    }
}

@media screen and (min-width: 1400px) {
    .section-formulario-contacto  {
        grid-gap: 100px;
    }
}

@media screen and (min-width: 1400px) {
    .section-formulario-contacto  {
        grid-gap: 150px;
    }
}

.section-formulario-contacto .desc {
    font-size:18px;
    line-height: 1.3;
    font-weight: 300;
    transition: all .5s ease;
}

@media screen and (min-width: 550px) {
    .section-formulario-contacto .desc{
        font-size:21px;
    }
}

@media screen and (min-width: 700px) {
    .section-formulario-contacto .desc {
        font-size:23px;
    }
}

@media screen and (min-width: 900px) {
    .section-formulario-contacto .desc {
        font-size:25px;
    }
}


@media screen and (min-width: 1200px) {
    .section-formulario-contacto .desc {
        font-size:28px;
    }
}

.formulario-contacto {
    display: flex;
    flex-direction: column;
    gap: 30px;
    font-family: var(--font1);
    color: var(--color1);
}

.formulario-contacto .campo {    
    display: flex;
    flex-direction: column;
    position: relative;
}

.formulario-contacto .campo.primero {    
     border-top: 2px solid var(--color2);
    padding-top:20px;
    margin-top:15px;
    transition: all 0.5s ease;
}

@media screen and (min-width: 900px) {
    .formulario-contacto .campo.primero {    
        padding-top:30px;
    }
}

.formulario-contacto .numero {
    font-size: 20px;
    color: var(--color2);
    margin-bottom: 10px;
    transition: all 0.5s ease;
}

.formulario-contacto label {
    font-size: 20px;
    margin-bottom: 10px;
    transition: all .5s ease;
}

@media screen and (min-width: 900px) {
    .formulario-contacto label {
        font-size: 22px;
    }
}

@media screen and (min-width: 1200px) {
    .formulario-contacto label {
        font-size: 25px;
    }
}

.formulario-contacto input, .formulario-contacto textarea {
    padding: 5px 0 20px;
    color: var(--color1);
    font-size: 16px;
    border: none;
    border-bottom: 2px solid var(--color2);
    background: transparent;
    outline: none;
    transition: all 0.5s ease;
    position: relative;
    font-family: var(--font1);
}

@media screen and (min-width: 900px) {
    .formulario-contacto input, .formulario-contacto textarea {
        font-size: 18px;
        padding: 15px 0 30px;
    }
}

@media screen and (min-width: 1200px) {
   .formulario-contacto input, .formulario-contacto textarea {
        font-size: 20px;
    }
}

.formulario-contacto input::placeholder, .formulario-contacto textarea::placeholder {
    color: var(--color1a);
    opacity:1;
}

/* Línea animada */
.formulario-contacto input::after, .formulario-contacto textarea::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background-color: var(--color1);
    transition: width 0.5s ease;
}

/* Al hacer focus en el campo */
.formulario-contacto input:focus, .formulario-contacto textarea:focus {
    border-bottom-color: var(--color1);
}


/* Este es el truco para animar la línea, usando ::after */
.formulario-contacto input:focus::after, .formulario-contacto textarea:focus::after {
    width: 100%;
}

.formulario-contacto textarea {
    min-height: 120px;
    resize: vertical;
}

.formulario-contacto button {
    align-self: flex-start;
    font-family: var(--font2);
    font-weight: normal;
    text-transform: uppercase;
    font-size: 40px;
    color: var(--color2);
    border: none;
    background: transparent;
    transition: all 0.5s ease;
}

@media screen and (min-width: 800px) {
    .formulario-contacto button {
        font-size: 50px;
    }
}

.formulario-contacto button:hover {
    color: var(--color1);
}

.formulario-contacto button .icon-boton{
    width: 40px;
    height: 40px;
    transform: rotate(45deg) scale(1);
    transition: all .5s ease;
    background-image: url(../imagenes/flecha-corta-azul.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    top: 2px;
}

.formulario-contacto button:hover .icon-boton{
    transform: rotate(0deg) scale(1);
    background-image: url(../imagenes/flecha-corta-verde.svg);
}

@media screen and (min-width: 800px) {
    .formulario-contacto button .icon-boton{
        transform: rotate(45deg) scale(1.2);
        top: -5px;
    }
    .formulario-contacto button:hover .icon-boton{
        transform: rotate(0deg) scale(1.2);
    }
}

.input-wrapper {
  position: relative;
  width: 100%;
}

.input-wrapper input,
.input-wrapper textarea {
  width: 100%;
  padding: 5px 0 20px;
  font-size: 16px;
  font-family: var(--font1);
  color: var(--color1);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--color2); /* Línea base visible SIEMPRE */
  outline: none;
  position: relative;
  z-index: 1;
}

.input-wrapper .linea {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background-color: var(--color1); /* Línea que aparece al focus */
  transition: width 0.5s ease;
  z-index: 2;
}

/* Cuando haces focus, crece la línea */
.input-wrapper input:focus + .linea,
.input-wrapper textarea:focus + .linea {
  width: 100%;
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color2b); /* Color que quieras para oscurecer */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 9999;
}

.popup-overlay.visible {
  opacity: 1;
}

.popup-formulario {
  background-color: var(--color1); /* Fondo del popup */
  color: #fff;
  padding: 50px;
  border-radius: 12px;
    line-height: 1.5;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.popup-contenido {
  font-family: var(--font1);
  font-size: 20px;
}