body {
    background-color: #FAF1E8;
    display: flex;
    flex-direction: column;
    align-items: center;
}

main{
    width: 100%;
}
.logo {
    max-width: 223px;
}

nav {
    width: 96%;
    margin: 0 20px;
    padding: 0 40px;
    background-color: white;
    position: fixed;
    top: 20px;
    z-index: 100;
    border-radius: 30px;
}

.nav__links li {
    list-style: none;
}


.burger-menu {
    display: none;
}


@media (max-width:880px) {
    nav {
        flex-direction: column;
    }

    .logo-burgericon-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .nav__links {
        flex-direction: column;
        padding: 10px;
        justify-content: center;
        align-items: center;
    }

    .logo {
        max-width: none;
        width: 180px;
    }

    .nav__links {
        display: none;
        width: 100%;
        height: 84vh;
    }

    .burger-menu {
        display: flex;
        justify-content: center;
        align-items: center;
        background: none;
        border: none;
        border-radius: 6px;
        padding: 4px;
        transition: transform 2s ease;
        background-color: #fff;


    }

    /* cuando se despliega el menu */
    nav:has(.active) {
        align-items: start;
    }

    #main-nav.active {
        display: flex;
        flex-direction: column;
    }

    nav:has(.active) .burger-menu {
        background-color: #fff;
    }


}

.path-0 {
    animation: pathAnim-0 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes pathAnim-0 {
    0% {
        d: path("M 0,600 L 0,600 C 136.42857142857144,372.5357142857143 272.8571428571429,145.07142857142858 395,79 C 517.1428571428571,12.928571428571429 625,108.25 732,136 C 839,163.75 945.1428571428573,123.92857142857144 1063,190 C 1180.8571428571427,256.07142857142856 1310.4285714285713,428.0357142857143 1440,600 L 1440,600 L 0,600 Z");
    }

    25% {
        d: path("M 0,600 L 0,600 C 79.64285714285714,397.89285714285717 159.28571428571428,195.78571428571428 300,145 C 440.7142857142857,94.21428571428571 642.5000000000001,194.75 780,186 C 917.4999999999999,177.25 990.7142857142858,59.21428571428572 1090,110 C 1189.2857142857142,160.78571428571428 1314.642857142857,380.3928571428571 1440,600 L 1440,600 L 0,600 Z");
    }

    50% {
        d: path("M 0,600 L 0,600 C 102.60714285714289,434.42857142857144 205.21428571428578,268.8571428571429 334,185 C 462.7857142857142,101.14285714285714 617.7499999999998,99.00000000000001 755,98 C 892.2500000000002,96.99999999999999 1011.7857142857144,97.14285714285711 1123,181 C 1234.2142857142856,264.8571428571429 1337.1071428571427,432.42857142857144 1440,600 L 1440,600 L 0,600 Z");
    }

    75% {
        d: path("M 0,600 L 0,600 C 131.32142857142858,399.0357142857143 262.64285714285717,198.07142857142856 386,158 C 509.35714285714283,117.92857142857143 624.7499999999999,238.75 732,220 C 839.2500000000001,201.25 938.3571428571429,42.928571428571416 1055,83 C 1171.642857142857,123.07142857142858 1305.8214285714284,361.5357142857143 1440,600 L 1440,600 L 0,600 Z");
    }

    100% {
        d: path("M 0,600 L 0,600 C 136.42857142857144,372.5357142857143 272.8571428571429,145.07142857142858 395,79 C 517.1428571428571,12.928571428571429 625,108.25 732,136 C 839,163.75 945.1428571428573,123.92857142857144 1063,190 C 1180.8571428571427,256.07142857142856 1310.4285714285713,428.0357142857143 1440,600 L 1440,600 L 0,600 Z");
    }
}

.path-1 {
    animation: pathAnim-1 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes pathAnim-1 {
    0% {
        d: path("M 0,600 L 0,600 C 85.03571428571428,494.1071428571429 170.07142857142856,388.2142857142857 311,357 C 451.92857142857144,325.7857142857143 648.7499999999999,369.25000000000006 764,353 C 879.2500000000001,336.74999999999994 912.9285714285713,260.7857142857143 1012,292 C 1111.0714285714287,323.2142857142857 1275.5357142857142,461.6071428571429 1440,600 L 1440,600 L 0,600 Z");
    }

    25% {
        d: path("M 0,600 L 0,600 C 118.82142857142858,457.9642857142857 237.64285714285717,315.92857142857144 365,288 C 492.35714285714283,260.07142857142856 628.2499999999999,346.25000000000006 731,359 C 833.7500000000001,371.74999999999994 903.3571428571429,311.07142857142856 1016,339 C 1128.642857142857,366.92857142857144 1284.3214285714284,483.4642857142857 1440,600 L 1440,600 L 0,600 Z");
    }

    50% {
        d: path("M 0,600 L 0,600 C 117.32142857142858,450 234.64285714285717,300 351,282 C 467.35714285714283,264 582.75,378 709,392 C 835.25,406 972.3571428571429,320 1096,338 C 1219.642857142857,356 1329.8214285714284,478 1440,600 L 1440,600 L 0,600 Z");
    }

    75% {
        d: path("M 0,600 L 0,600 C 118.32142857142858,513.8571428571429 236.64285714285717,427.7142857142857 369,366 C 501.35714285714283,304.2857142857143 647.7499999999999,267.00000000000006 776,278 C 904.2500000000001,288.99999999999994 1014.3571428571429,348.2857142857143 1122,410 C 1229.642857142857,471.7142857142857 1334.8214285714284,535.8571428571429 1440,600 L 1440,600 L 0,600 Z");
    }

    100% {
        d: path("M 0,600 L 0,600 C 85.03571428571428,494.1071428571429 170.07142857142856,388.2142857142857 311,357 C 451.92857142857144,325.7857142857143 648.7499999999999,369.25000000000006 764,353 C 879.2500000000001,336.74999999999994 912.9285714285713,260.7857142857143 1012,292 C 1111.0714285714287,323.2142857142857 1275.5357142857142,461.6071428571429 1440,600 L 1440,600 L 0,600 Z");
    }
}

#hero {
    position: relative;
    overflow: hidden;
    min-height: 150vh;
}

.hero-content {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.hero-text {
    max-width: 800px;
    color: #ffffff;
    max-width: 100%;
}

.hero-img {
    max-width: 80vw;
}

.hero-waves {
    transform: translateY(-25%);
}

@media (max-width: 768px) {
    .hero-content {}

    .hero-waves {
        width: 800%;
        height: 1000px;
        position: absolute;
        top: 40px;
        transform: translateY(-30%);
    }
}


.about-text {
    max-width: 450px;
    flex: 1;

}

.about-video {
    flex: 2;
    max-width: 650px;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(94, 8, 8, 0.1);
    overflow: hidden;
    aspect-ratio: 16/9;
    background-color: black;
    height: auto;
}

.about-photo {
    flex: 1;
    max-width: 500px;
    border-radius: 30px;
}

.photo-founder {
    height: 70vh;
    object-fit: cover;
}

#image-grid {
    overflow: hidden;
}

.image-grid-content {
    height: 100%;
    max-height: 125vh;
    scrollbar-width: none;
    animation: scrollX 10s linear infinite alternate;
}

/* Animación */
@keyframes scrollX {
    from {
        transform: translateX(-30%);
    }

    to {
        transform: translateX(0%);
    }
}

.grid-card {
    max-width: 300px;
    min-width: 200px;
    gap: 20px;
    cursor: pointer;
    transition: transform 4s ease, box-shadow 0.3s ease;
}

.grid-card :hover {
    transform: scale(1.05);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

.grid-card-img {
    border-radius: 30px;
    max-width: 300px;
    min-width: 300px;
    max-height: 300px;
    min-height: 300px;
    width: 100%;
    object-fit: cover;
}

/* MODAL */
.modal {
    display: none;
    /* oculto por defecto */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}

.modal img {
    max-width: 90%;
    max-height: 80%;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2rem;
    color: white;
    cursor: pointer;
    font-weight: bold;
    transition: color 0.3s;
}

.close:hover {
    color: #ff6b6b;
}


/* proyectos */
.proyects-cta-content {
    padding: 112px 50px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* izquierda más ancha */
    gap: 40px;
    position: relative;
    background: url("./assets/overlapping_circles-1757387609146.png");
    width: 100%;
    background-attachment: fixed;
    /* efecto parallax */
    background-size: cover;
}

.proyects-content {
    flex: 2;
}

#proyects h2 {
    margin-bottom: 10px;
}

#proyects .intro {
    max-width: 700px;
    margin: 0 auto 40px;
    font-size: 1.1rem;
}

.proyectos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.proyecto-card {
    background: #f9fafb;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease;
    max-width: 100%;
}

.proyecto-card:hover {
    transform: translateY(-8px);
}

.proyecto-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.proyecto-card-text {
    padding: 0 15px 20px 15px;
}

.proyecto-card h3 {
    margin: 15px 0 10px;
    color: #FF914C;
}

.proyecto-card p {
    font-size: 0.95rem;
    padding: 0 0 15px 0;
    color: #444;
}

/* cta */
#cta {
    flex: 1;

    max-width: 800px;
    min-width: 380px;
}

.cta-box {
    position: relative;
    top: 0;
    right: 0;
    height: 100%;
    max-width: 600px;
}

#cta .content {
    width: 100%;
    position: sticky;
    top: 20%;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 30px;
    text-align: center;
}
@media (max-width: 779px){
    .proyects-cta-content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 112px 20px;
    }
    .proyects-content{
    width: 100%;
    }
    .proyectos-grid{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    .proyecto-card{
    }
    #cta{
        min-width: auto;
        width: 100%;
        justify-content: center !important;
        align-items: center;
        justify-self: center;
    }
}
/* noticias */
#news {
    width: 100%;
    padding: 112px 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.news-content {
    display: flex;
    gap: 80px;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.news-list {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.new-card {
    display: flex;
    flex-direction: column;
    min-width: 200px;
    max-width: 300px;
    border-radius: 30px;
    padding: 40px 20px 40px 20px;
    gap: 20px;
    background-color: white;

}

.new-card-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.new-card-text {
    display: -webkit-box;
    /* comportamiento tipo caja flexible */
    -webkit-line-clamp: 3;
    /* 👈 cantidad de líneas visibles */
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* oculta el resto del texto */
}

@media (max-width: 779px) {
    #news {
        padding: 112px 20px;
    }

    .news-list {
        flex-wrap: nowrap;
        overflow: scroll;
        justify-content: start;
        align-items: start;
    }

    .new-card {
        min-width: 200px;
        max-width: none;
        width: 200px;
    }

    .new-card-img {
        height: 80px;
    }
}


/* contactar */


.contact-main {
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
    width: 100%;
}

.contact-info {
    display: flex;
    width: 314px;
    gap: 24px;
    flex-direction: column;

}

.info-main {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.contact-item {
    display: flex;
    align-items: center;
    gap: 17px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1
}

.form-row {
    width: 100%;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.form-field {
    flex: 1 0 0;
    min-width: 238px;
}

.field-label {
    width: 100%;
    color: #232323;
    font-family: "Rubik", sans-serif;
    font-size: 16px;
    font-weight: 400;
}

.form-input {
    display: flex;
    height: 48px;
    padding: 8px 0px;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(12, 10, 10, 0.15);
    background-color: rgba(255, 255, 255, 0);
    font-family: "Rubik", sans-serif;
    font-size: 16px;
    outline: none;
}

.form-input:focus {
    border-bottom-color: #4d372e;
}

.form-btn {
    width: min-content;

}

.message-field {
    width: 100%;
}

.message-input {
    flex: 1 0 0;
    color: rgba(12, 10, 10, 0.6);
    font-family: "Rubik", sans-serif;
    font-size: 16px;
    font-weight: 400;
    height: 180px;
    padding: 12px 12px 12px 0px;
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(12, 10, 10, 0.15);
    background-color: rgba(255, 255, 255, 0);
    resize: vertical;
    outline: none;
}

.message-input:focus {
    border-bottom-color: #4d372e;
}

.message-input::placeholder {
    color: rgba(12, 10, 10, 0.6);
}

.contact-info-section {
    display: flex;
    width: 503px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    height: 100%;
}

.contact-info-container {
    display: flex;
    padding: 8px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    height: 100%;
}

.contact-info-item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}
@media (max-width: 779px){
    #contactar {
        padding: 112px 40px;
    }
}


footer{
    background-color: #fff;
    display: flex;
    padding: 20px;
}
.footer-content{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.footer-logo{
    color: #000;
}
.redes, .links{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 100%;
}
.links p, .links a{
      max-width: 100%;      /* no se salga del contenedor padre */
  word-wrap: break-word; /* permite cortar palabras largas */
  overflow-wrap: break-word;
}

@media (max-width: 779px){
    footer{
        padding: 40px 20px !important;
    }
    .footer-content{
        flex-direction: column;
        gap: 20px;
    }

}