*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    height: 100%;
    font-weight: 300;
}


:root {
    --color-primary: #64B9CB; 
    --color-primaryhover: #76e2f8; 
    --color-secondary: #6F6F6F;
    --color-background: #ffff;
    --color-black: #000000; 
    --color-lightgrey: #A1A1A1; 
    --color-lightblue: #c1e9f1;
}

h1 {
    font-size: 3rem;
    margin-bottom: 30px;
    line-height: 1.1;
}

h2 {
    font-size: 2rem;
    color: var(--color-secondary);
}

p {
    font-size: 1.1rem;
    color: var(--color-secondary);
    margin: 8px 0;
}

ul {
    list-style: none;
}

.colorhighlight {
    color: var(--color-primary);
}

.centered {
    text-align: center;
}

.text-left {
    text-align: left;
}

a {
    text-decoration: none;
}


/* Estructure */
main {
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
    width: 100%; 
}

section.basic-layout {
    display: flex;
    flex: 1; 
}

.basic-layout .page-content .col-1-3{
    background-color: transparent;
}

.col-1-2 {
    width: 50%;
    background-color: var(--color-background);
    padding: 50px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.col-2-3 {
    flex: 2;
    background-color: var(--color-background);
    padding: 50px;
    display: flex; 
    flex-direction: column;
    justify-content: center; 
}

.col-1-3 {
    flex: 1;
    background-color: var(--color-primary);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.col-1-4 {
    width: 25%;
    padding: 20px;
}
.col-3-4 {
    width: 75%;
    padding: 20px;
}

.content .col-1-3, .content .col-1-2 {
    background-color: var(--color-background);
    justify-content: flex-start;
    padding: 0;
}
.content .col-2-3 {
    padding: 0px;
}

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


button{
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1rem;
}

.button-primary {
    background-color: var(--color-primary);
    color: var(--color-black);
}

.button-secondary {
    background-color: var(--color-secondary);
    color: var(--color-background);
}

.button-tertiary {
    border-radius: 30px;
    padding: 10px 15px;
    border: 2px solid var(--color-primary);
    position: relative;
    background-color: var(--color-primary);
    color: var(--color-background);
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    transition: all 700ms ease;
    font-weight: 400;
}

.button-tertiary--gooey {
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.button-tertiary--gooey .button-tertiary__blobs {
    height: 100%;
    filter: url(#goo);
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
}

.button-tertiary--gooey .button-tertiary__blobs div {
    background-color: var(--color-background);
    width: 34%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    transform: scale(1.4) translateY(125%) translateZ(0);
    transition: all 700ms ease;
}

.button-tertiary--gooey .button-tertiary__blobs div:nth-child(1) {
    left: -5%;
}

.button-tertiary--gooey .button-tertiary__blobs div:nth-child(2) {
    left: 30%;
    transition-delay: 60ms;
}

.button-tertiary--gooey .button-tertiary__blobs div:nth-child(3) {
    left: 66%;
    transition-delay: 25ms;
}

.button-tertiary--gooey:hover {
    color: var(--color-primary);
    background-color: var(--color-background);
}

.button-tertiary--gooey:hover .button-tertiary__blobs div {
    transform: scale(1.4) translateY(0) translateZ(0);
}

/*HEADER*/

#menu-inicial {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; 
    height: 60px; 
    display: flex;
    align-items: center;
    justify-content: space-between; 
    padding: 0 50px;
    background: transparent;
    z-index: 10;
}


/* Menú sticky */
#menu-sticky {
    position: fixed;
    top: 0;
    left: 0;
    padding: 0 50px;
    width: 100%;
    height: 60px;
    background-color: white;
    box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    opacity: 0; /* Invisible por defecto */
    visibility: hidden; /* No se puede interactuar con él */
    transition: opacity 0.3s ease, visibility 0s 0.3s; /* Transición suave */
    z-index: 11;
}

#menu-sticky.show {
    opacity: 1; /* Visible */
    visibility: visible; /* Ahora es interactuable */
    transition: opacity 0.3s ease;
}

#menu-sticky img {
    max-width: 80px; margin-bottom: 20px;
}

a.site-logo {
    height: 70px;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
    width: fit-content;
}

#menu-sticky a.site-logo{
    margin-top: 5px;
}

    /* Hamburger button */
    .hamburger {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 30px;
        height: 24px;
        cursor: pointer;
        z-index: 1055;
        transition: transform 0.3s ease;
    }
    .hamburger span {
        position: absolute;
        height: 3px;
        width: 100%;
        background-color: var(--color-background);
        border-radius: 2px;
        transition: all 0.4s ease;
    }

    .full-w-page header {
        background-color: var(--color-background);
    }

    .full-w-page .hamburger span {
        background-color: var(--color-primary);
    }

    .hamburger span:nth-child(1) {
        top: 0;
    }
    .hamburger span:nth-child(2) {
        top: 10px;
    }
    .hamburger span:nth-child(3) {
        top: 20px;
    }

    /* Hamburger button transformation */
    .hamburger.active span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
        background-color: var(--color-secondary);

    }
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
        background-color: var(--color-secondary);
    }

/* SIDE MENU */
.sideMenu-container {
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-color: var(--color-background);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
    z-index: 8;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transform: translateX(100%);
    transition: transform 0.4s ease;
}

.sideMenu-container.show {
    transform: translateX(0);
}

.sideMenu-body {
    display: flex;
    flex-direction: column;
    justify-content: center;  /* escritorio: centrado vertical */
    align-items: center;
    flex-grow: 1;
    overflow-y: auto;         /* scroll si hay demasiado contenido */
}

.sideMenu-body ul {
    padding: 0;
    margin: 0;
    text-align: center;
}

.sideMenu-body ul li a {
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--color-black);
    display: block;
    padding: 10px 0;
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease; 
}

.sideMenu-body ul li a:hover {
    color: var(--color-primaryhover);
    transform: scale(1.1);
}

/* Footer del menú */
.sideMenu-container .footer-inmenu ul {
    padding: 20px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center; 
}

.sideMenu-container .footer-inmenu li {
    margin: 10px 0;
}

.sideMenu-container .footer-inmenu li:first-child a {
    font-weight: 300;
    color: var(--color-secondary);
}

.sideMenu-container .footer-inmenu a {
    color: var(--color-primary);
    font-size: 1rem; 
    transition: color 0.3s ease;
}

.sideMenu-container .footer-inmenu a:hover {
    color: var(--color-primaryhover);
}

.sideMenu-container .footer-inmenu svg {
    margin-right: 8px; 
    vertical-align: middle; 
    width: 20px;
    height: 20px;
    fill: var(--color-primary);
}

.sideMenu-container img {
    margin-bottom: 30px;
}

.socials {
    display: flex;
    align-items: center;
    gap: 15px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-secondary);
    overflow: hidden;
}

.social-link svg {
    flex-shrink: 0; 
}

.social-link svg path {
    fill: var(--color-primary);
    transition: fill 0.3s ease;
}

.social-link:hover svg path {
    fill: var(--color-primaryhover);
}

.social-link .label {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    margin-left: 4px;
    margin-top: 14px;
    transition: max-width 0.4s ease, opacity 0.4s ease;
}

.social-link:hover .label {
    max-width: 200px;
    opacity: 1;
}

/* Overlay para el contenido */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35); 
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 5;
}

.overlay.show {
    opacity: 1;
    visibility: visible;
} 

/* HOME */
#intro h1 {
    margin: 0;
    font-size: clamp(3rem, 10vw, 4rem);
    white-space: nowrap;
    line-height: 1.1;
    font-weight: 700;
    color: var(--color-primary); 
}

#intro h1 span{
    display: block;
    font-size: 2.1rem; 
    line-height: 1.1;
    color: var(--color-black);
}

#intro .big-bold {
    margin: 0;
    font-size: 2.1rem; 
    line-height:  1.1;
    font-weight: 700;
    color: var(--color-black);
}

#intro span + h1 {
    margin-top: 0.5rem; 
}

#intro ul, .info-project ul {
    gap: 10px;
    display: flex;
    margin-top: 20px;
    flex-wrap: wrap;
}

#intro ul li, .info-project ul li {
    border: 1px solid var(--color-lightgrey);
    border-radius: 30px;
    color: var(--color-lightgrey);
    width: fit-content;
    padding: 3px 14px;
}

.basic-layout img {
    border-radius: 50%;
    object-fit: cover;
    position: absolute; 
    top: 50%;
    transform: translateX(-60%) translateY(-50%); 
    z-index: 7;
}

.basic-layout .circle {
    width: 256px;
    height: 256px;
    border-radius: 50%;
    position: absolute; 
    top: 50%;
    z-index: 4;
}
.basic-layout .circle.blue {
    border: 3px solid var(--color-primary);
    transform: translateX(-50%) translateY(-33%); 

}
.basic-layout .circle.white {
    border: 3px solid var(--color-background);
    transform: translateX(-50%) translateY(-66%); 
}

footer.left-footer{
    margin-top: auto;
    color: white;
    width: 100%; 
}
  
footer.left-footer ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: 0;
    text-align: center; 
}
  
footer.left-footer li{
    margin: 10px 0;
}

  
footer.left-footer a {
    color: var(--color-background);
    font-size: 1rem; 
    transition: color 0.3s ease;
}
  
footer.left-footer a:hover {
        color: var(--color-primaryhover)
}

footer svg {
    margin-right: 8px; 
    vertical-align: middle; 
    width: 20px;
    height: 20px;
    fill: var(--color-background);
}

footer.landing-footer{
    width: 100%;
    padding: 0 4%;
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-lightblue);
    
}
footer.landing-footer a{
    color: var(--color-secondary);
    transition: color 0.3s ease;
}
footer.landing-footer a:hover{
    color: var(--color-primary);
   
}


/* LANDINGS */
.page-content {
    padding-right: 14%;
}
.projecto-intro .flex-row{
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 0;
    margin-top: 50px;
    overflow: hidden;
}

.page-content h2{
    font-size: 1.1rem;
}

.page-content p{
    font-weight: 300;
    font-size: 1.1rem;
}

.page-content a {
    color: var(--color-primary);
    font-weight: 400;
    transition: color 0.3s ease;
}
.page-content a:hover {
    color: var(--color-primaryhover);
}

.content {
    padding: 4%;
}
.content.big {
    max-width: 1170px; margin: 0 auto;
}

.titulo {
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0;
    display: flex;
    gap: 5px;
}
  
.flecha {
    font-size: 16px;
    color: #666;
}
  
.lista {
    list-style: none;
    padding: 0;
    margin-top: 10px;
    font-weight: 300;
}

.basic-layout img.icono-servicios {
    border-radius: 0; object-fit: initial; position: initial; transform: none;
}

.flex-row{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 30px;
}

.flex-row:has(> .text-card) {
    flex-wrap: wrap;
}

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

.text-card {
    border-radius: 30px;
    box-shadow: 0 0px 12px 0px rgba(0, 0, 0, 0.06);
    padding: 25px;
    color: var(--color-secondary);
    font-size: 1.1rem;
    flex: 1;
    height: fit-content;
    position: relative;
}

.flex-row .text-card {
    min-width: 325px;
    flex: 1;
    max-width: 50%;
}

#legal-content.page-content{
    padding: 0;
}
#legal-content p{
    font-size: 1rem;
}

/* SERVICIOS*/

#servicio-content.page-content{
    display: flex;  
    padding: 4%;
    align-content: center;
    flex-wrap: wrap;
}

#servicio-content .col-1-3 {
    justify-content: normal;
}
#servicio-content .col-2-3 {
    display: flex;
    flex-direction: row;
    padding: 0;
    gap: 20px;
}

#servicio-content .icon-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(320deg,rgba(213, 239, 247, 1) 0%, rgba(235, 248, 251, 1) 28%, rgba(255, 255, 255, 1) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
      
}

#servicio-content .icon-card > * {
    position: relative;
    z-index: 1;
}
.flex-row:has(> .icon-card){
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

#servicio-content .icon-card {
    position: relative;
    background: #ffffff;
    overflow: hidden;  
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border-radius: 25px;
    padding: 20px;
    height: fit-content;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

#servicio-content .icon-card:hover::before {
    opacity: 1;
}

#servicio-content li {
    display: flex;
    align-items: center;
}

.icon-container {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon {
    width: 20px;
    height: 20px;
    color: #4b5563;
}


  /* Projects filtered */
  .filter-content {
      width: 100%;
      margin: 60px auto 0;
      padding: 4%;
      text-align: center;
    }
    
  .filters {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    gap: 10px;
  }
  .filters button {
    border: 1px solid var(--color-lightgrey);
    border-radius: 30px;
    color: var(--color-lightgrey);
    background-color: var(--color-background);
    width: fit-content;
    padding: 7px 14px;
    transition: background-color 0.3s;
  }
  .filters button:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
  .filters button.active {
    background-color: var(--color-primary);
    color: var(--color-background);
    transform: scale(1.1);
    border: var(--color-primary);

  }
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 60px;
  }
  .hidden {
    display: none!important;
}


  .card, .bg-card {
    position: relative;
    width: 100%;
    aspect-ratio: 12 / 7;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
  }
    .card{ 
        overflow: hidden;
    }
  .card a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.resp-content {display: none;}
  
/* Overlay para oscurecer la imagen */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.0);
    z-index: 1;
    transition: background 0.3s ease;
}
.card:hover .card-overlay {
    background: rgba(0, 0, 0, 0.8);
}


/* Título, párrafo y botón ocultos inicialmente */
.card h3 {
    position: absolute;
    bottom: 25px;
    left: 25px;
    z-index: 2;
    font-size: 18px;
    opacity: 0;
    color: var(--color-background);
    margin: 0;
    transition: transform 0.3s ease;
    z-index: 3; 
}
.card p {
    position: absolute;
    bottom: 30px;
    left: 25px;
    z-index: 2;
    font-size: 14px;
    color: var(--color-background);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 3; 
}
.card p span{
    color: var(--color-primary);
    font-weight: 300;
}
.card button {
    position: absolute;
    bottom: 25px;
    left: 25px;
    z-index: 2;
    padding: 8px 14px;
    font-size: 1rem;
    background-color: var(--color-primary);
    border: none;
    border-radius: 30px;
    color: var(--color-background);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
    z-index: 3; 
}

/* Título, parrafo y botón aparecen y se colocan con el hover */
.card:hover h3, .card:hover p {
    opacity: 1;
}
.card:hover p {
    transform: translateY(-40px);
}
.card:hover h3 {
    transform: translateY(-65px);
}
.card button:hover {
    background-color: var(--color-primaryhover);
}
 .card:hover button {
    opacity: 1;
    transform: translateY(0);
}
  

/* Portadas de los proyectos */ 
#proyecto-ad, #proyecto-ad-resp .bg-card  {background-image:  url('/img/projects/ad/screenshot-aire-danza-b.webp');}
#proyecto-clb, #proyecto-clb-resp .bg-card  {background-image:  url('/img/projects/clb/bombilla-atrezzo.webp');}
#proyecto-cdam, #proyecto-cdam-resp .bg-card  {background-image:  url('/img/projects/cdam/portada-proyecto-cdam.webp');}
#proyecto-dir, #proyecto-dir-resp .bg-card  {background-image:  url('/img/projects/dir/portada-proyecto-design-it-right.webp');}
#proyecto-fly, #proyecto-fly-resp .bg-card  {background-image:  url('/img/projects/fly/mockup-inicio.webp');}
#proyecto-jchef, #proyecto-jchef-resp .bg-card  {background-image:  url('/img/projects/jchef/jotachef-portada.webp');}
#proyecto-kt, #proyecto-kt-resp .bg-card  {background-image:  url('/img/projects/kt/portada-proyecto-kitchen-tropic.webp');}
#proyecto-mimoki, #proyecto-mimoki-resp .bg-card  {background-image:  url('/img/projects/mimoki/portada-proyecto-mimoki.webp');}
#proyecto-sb, #proyecto-sb-resp .bg-card  {background-image:  url('/img/projects/sb/portada-sb-proyecto.webp');}
#proyecto-ttapp, #proyecto-ttapp-resp .bg-card {background-image:  url('/img/projects/t-app/mockup-inicio.webp');}

.card.card-responsive {display: none;}

/*Páginas de proyecto*/
.project-intro {
    padding: 8% 0 4%;
}
.project-intro .flex-row div.col-1-2 img {
    height: auto;
    width: 100%;
}
.info-project a {
    color: var(--color-primary);
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease;
    margin-bottom: 20px;
}
.info-project > a:first-child {
    padding-left: 1em;
    position: relative;
}
.info-project > a:first-child::before {
    content: "\2039"; 
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3em;
    color: inherit;
    transition: transform 0.3s ease;
}
.info-project a:hover::before {
    transform: translateY(-50%) translateX(-3px); 
}

.grid-images {
    display: grid;
    gap: 20px; 
    grid-template-columns: repeat(3, 1fr);
    justify-items: center; 
}

.grid-images.col-2-img{
    grid-template-columns: repeat(2, 1fr);
}

.grid-images img {
    width: 100%;
    height: auto;
    display: block;
}

.content .flex-row {
    gap: 30px;
}

.content .col-1-2 {
    padding: 0;
}

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

.m-w-img {
    height: auto;
}
.xs-w-img{
    max-width: 230px;
}
.bordered-img{
    border: 1px solid var(--color-lightblue)
}

.big-number {
    font-weight: bold;
    font-size: 5rem;
    color: var(--color-primary);
    position: absolute;
    left: 25px;
    top: 0px;
}
.card-content {
    margin-left: 70px;
}
.line-separator {
    width: 100%;
    border: 1px solid #dcf1f3;
    margin:  10px 0;
}
.text-card h3{
    color: var(--color-primary);
}
.text-card ul li:before{
    content: "\203A"; 
    color: var(--color-primary);
    margin-right: 10px;
    
}
.text-card.blue{
    box-shadow: none;
    background-color: var(--color-lightblue);
}
.project-results .col-1-3 {
    gap: 30px;
}
.project-results .col-2-3 {
    justify-content: flex-start;
}


/* Back to top Button */
    #backToTop {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        border: none;
        background: var(--color-primary);
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        z-index: 9999;

        /* Animación */
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        transition: 
        opacity 0.3s ease,
        transform 0.3s ease,
        background-color 0.3s ease;
    }

    /* Estado visible */
    #backToTop.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Hover */
    #backToTop:hover {
        background-color: var(--color-primaryhover);
        transform: translateY(-3px) scale(1.05);
    }    
    #backToTop svg {
        top: 3px;
        position: relative;
    }

/*  MEDIA QUERIES  */

    @media (min-width: 991px) {               
        #intro p {
            max-width: 55%;
        }
        #legal-content{
            padding-top: 120px;
        }
    }

    @media (max-width: 991px) {
        .col-1-2, .col-1-4 {
            width: 100%;
        }
        .col-3-4 {
            width: 100%;
        }
        .info-project{
            padding-bottom: 0;
        }
        .basic-layout {
            flex-direction: column;
            padding-top: 10%;
        }
        .content .flex-row:has(> .col-1-2) {
            flex-direction: column;
        }

        .basic-layout.fullheight {
            min-height: auto;
            height: auto;
        }

        .basic-layout.fullheight .col-2-3 {
            justify-content: flex-start;
            padding: 9rem 50px;
            flex: 0;
        }
        #homepage .col-1-3 {
            position: relative;
        }
        .basic-layout.fullheight img {
            position: absolute;
            top: 0;
            left: 75%;
            transform: translate(-50%, -50%);
        }
        .basic-layout .circle {
            display: none;
        }

        .hamburger span {
            background-color: var(--color-primary);
        }
        .m-w-img {
            width: 100%;
            max-width: 600px;
            height: auto;
            margin: 0 auto;
        }
        .card {
            cursor: default;
        }
        .card h3,
        .card p,
        .card button {
            position: static;
            opacity: 1;
            transform: none;
            color: var(--color-text); /* ajusta si hace falta */
        }
        .card.card-desktop {
            display: none;
        }
        .card.card-responsive {
            display: flex;
            flex-direction: column;
            overflow: unset;
            margin-bottom:30px;
        }
        .card.card-responsive:hover h3, .card.card-responsive:hover p {
            transform: none;
        }
        .project-description a{
            display: flex;
            flex-direction: column;
            align-items: start;
            color: var(--color-secondary)
        }
        .project-description a button{
            color: var(--color-background);
            margin-top: 0;
    
        }
        .card a {
            height: auto;
        }
            
        .card-overlay {
            display: none;
        }
            
        .card p {
            margin: 0.25rem 0 0.5rem;
        }
        .card button {
            margin-top: 0.5rem;
        } 
        .project-intro .flex-row  {
            flex-direction: column;
        }
        .project-results .flex-row {
            flex-direction: column;
        }
        .project-results .col-1-3:has(> .rowed){
            flex-direction: row;
            flex-wrap: wrap;
        }
        #about-page .col-1-3, #contact-page .col-1-3 {
            display: none;
        }
        #about-page .col-2-3, #contact-page .col-2-3 {
            justify-content: flex-start;
        }
        #about-page .page-content, #contact-page .page-content {
            padding-right: 0;
        }
        .grid-images {
            grid-template-columns: repeat(2, 1fr);
        }
        .grid-images.col-2-img{
            grid-template-columns: repeat(1, 1fr);
        }
        #servicio-content.page-content {
            flex-direction: column;
        }
        .flex-row:has(> .icon-card){
            grid-template-columns: repeat(2, 1fr);
        }

    }


    @media (max-width: 767px) {
        .basic-layout {
            padding-top: 20%;
        }
        #homepage.basic-layout{
            padding-top: 0;
        }
        .filters {
            flex-wrap: wrap;
        }
        #proyectos-content .grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .flex-row .text-card {
            min-width: 425px;
            flex: 1;
            max-width: 50%;
            margin: 0 auto;
        }
        .project-results .flex-row .text-card {
            min-width: 425px;
        }
        .project-intro {
            padding-top: 20%;
        }


    }

    @media (max-width: 520px) {
        .sideMenu-container {
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            max-height: 550px;
        }
        .sideMenu-body {
            padding-top: 5rem;
        }
        .footer-inmenu {
            flex-shrink: 0;
            padding: 1rem;
            text-align: center;
        }
        .sideMenu-container img {
            display: none;
        }
        #menu-inicial {
            padding: 36px 25px;
        }
        .basic-layout.fullheight .col-2-3 {
            padding: 9rem 25px;
        }
        .basic-layout.fullheight #intro p, .basic-layout.fullheight #intro h1 span {
            font-size: 1.8rem;
            line-height: 1.1;
        }
        .basic-layout.fullheight #intro p {
            font-size: 1.2rem;
        }
        .basic-layout.fullheight img {
            left: 50%;
        }
        #homepage .col-1-3 {
            min-height: 250px;
        }
        #proyectos-content .grid {
            grid-template-columns: repeat(1, 1fr);
        }
        .project-intro .col-1-2 {
            padding: 25px;
        }
         .flex-row .text-card {
            min-width:100%;
            max-width: auto;
        } 
        .grid-images {
            grid-template-columns: 1fr;
        }
        .grid {
            display: grid;
            grid-template-columns: 1fr; 
            gap: 20px;
        }

        .card {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        .card.card-responsive {
            display: flex;
            flex-direction: column;
            margin-bottom: 0;
            min-height: 390px;
            overflow: hidden; 
        }

        .card.card-responsive .bg-card {
            width: 100%;
            aspect-ratio: 12 / 7;
            max-width: 100%;
        }

        .project-description {
            padding: 12px 8px;
            box-sizing: border-box;
        }

        .project-description a {
            display: block;
            width: 100%;
        }

        .project-description h3,
        .project-description p,
        .project-description button {
            max-width: 100%;
        }
        .project-results .flex-row .text-card {
            min-width: 100%;
        }
        footer.landing-footer{
            flex-direction: column; 
        }
        .flex-row:has(> .icon-card){
            grid-template-columns: repeat(1, 1fr);
        }
        footer.landing-footer {
            align-items: start;
        }
    }