/* Reset and Base Styles */

* {
    box-sizing: border-box;
}

* {

    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #fcfcfc;
    color: #222;
    line-height: 1.6;
}

p {
    text-align: start;
}

.section-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Header */
.header {
    background: white;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 64px;
}

.nav {
    width: 100vw;
    display: flex;
    align-items: center;
}

.nav-container {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo {
    display: flex;
    gap: 2px;
    align-items: center;
}

.logo-text {
    font-family: 'Limelight', serif;
    font-size: 42px;
    color: #23719f;
    line-height: 1;
}

.nav-menu {
    display: flex;
    gap: 64px;
}

.nav-link {
    color: #6b7280;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #23719f;
}

/* Hero Section */
.hero {
    background-color: #fcfcfc;
    padding-top: 120px;
    min-height: 600px;
    display: flex;
    align-items: center;

}

.hero-container {
    max-width: 1440px;
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
   

}

.ux-description {
    max-width: 720px;

    display: flex;
    flex-direction: row;
    align-items: center;


}


.ux-title {
    color: transparent;
    -webkit-text-stroke: 1px #05293E;

}

h1 {
    font-family: poppins, sans-serif;
    font-size: 48px;
    font-weight: 800;
    line-height: 48px;
}

a {
    text-decoration: none;

}

.front-description {
    max-width: 50%;

    display: flex;
    flex-direction: row;
    align-items: center;

}

.developer-title {
    color: #23719f;
}

.hero-description {
    font-size: 16px;
    font-weight: 200;
    line-height: 24px;
    color: #05293e;
}

.text-content {
    min-width: 340px;
}


.hero-content {
    display: flex;
    gap: 60px;
    align-items: center;

}

.hero-card {
    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.designer-card {
    z-index: 2;
}

.developer-card {
    z-index: 1;
}

.hero-image {
    max-width: 360px;
    background-size: 232.03% 233.51%;
    background-position: 8.18% 12%;
    background-repeat: no-repeat;

}







.hero-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 48px;
    margin-bottom: 24px;
    color: #222;
}




/* Contact Bar */
.contact-bar {
    background-color: #f9fafb;
    padding: 20px 0;
}

.contact-container {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;

}

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

.contact-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.contact-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #222;
    text-decoration: none;
    letter-spacing: 0.96px;
    white-space: nowrap;
}

.contact-link:hover {
    color: #23719f;
}

.download-btn {
    background: transparent;
    border: 2px solid #23719f;
    border-radius: 8px;
    padding: 14px 32px;
    color: #23719f;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 177px;

}

.download-btn:hover {
    background: #23719f;
    color: white;
}

/* Featured Work Section */
.featured-work {
    background: white;
    padding: 80px 0 64px;
}

.section-title {
    font-size: 56px;
    font-weight: 500;
    line-height: 110%;
    color: #00021e;
    text-align: start;
    margin-bottom: 64px;
    margin-top: 0px;
}

.work-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 72px;
}

.work-item {
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

@media (max-width: 996px) {

.ux-description, .front-description {
        max-width: 100%;

        justify-content: center;
        margin-bottom: 24px;
    }

    .work-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }



}

.work-preview {
    width: 100%;
    flex: 1;

}

.work-mockup {
    width: 540px;
    height: 347px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}






.work-content {
    flex: 1;

    padding-top: 0px;
}

.work-title {
    font-size: 20px;
    font-weight: 600;
    color: #05283e;
    margin-bottom: 16px;
    line-height: 28px;
}

.work-description {
    font-size: 18px;
    font-weight: 400;
    color: #27374d;
    line-height: 1.5;
    margin-bottom: 24px;
    letter-spacing: 1.08px;
}

.work-tags {
    display: flex;
    gap: 8px;
}

.tag {
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 400;
}

.tag-UX {
    background-color: #e0f2fe76;
    color: #0284c7;
}

.tag-UI {
    background-color: #9df0764c;
    color: #0284c7;
}

.tag-react {
    background-color: #dbeafe;
    color: #2563eb;
}

.tag-node {
    background-color: #dcfce7;
    color: #16a34a;
}

/* About Section */
.about-section {
    background: #f9fafb;
    padding: 60px 0;
    text-align: center;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    max-width: 1440px;
    margin: 0 auto;
}



/* Profile */

.profile-image {

    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    /* recorta esquinas redondeadas */
}

.profile-photo {
    width: 100%;
    height: 100%;
    background: url(images/skate.svg) center center / cover no-repeat;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}

/* Experience Section */
.section-formation {
    grid-column: span 12;
    grid-column: 5 / span 8;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.experience-section {
    grid-column: span 12;
    grid-column: 5 / span 8;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.fomation {
    margin: none;
}

.card-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.card-row.three {
    grid-template-columns: repeat(3, 1fr);
}

.experience-card {
    background: rgb(255, 255, 255);
    /* lighter transparency */
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.card-header h3 {
    font-size: 1.2rem;
    color: #8c8c8c;
    margin: 0;
}

.logo {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
}

.logo-experience {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
}

.role {
    flex: 1;
    font-size: 1rem;
    color: #8c8c8c;
    margin: 0 0 1rem;
}

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.year {
    font-size: 1.5rem;
    color: #23719f;
}

.tag {
    border: 1px solid #23719f;
    color: #23719f;
    border-radius: 999px;
    padding: 0.25rem 1rem;
    font-size: 0.9rem;
}

/* Languages */
.languages {
    display: grid;
    grid-template-columns: (8, 1fr);
    gap: 1.5rem;
}

.language-card {

    background: rgba(255, 255, 255);
    /* lighter transparency */
    backdrop-filter: blur(5px) saturate(80%);
    border-radius: 16px;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.language-card img {
    max-height: 48px;
    object-fit: cover;
}

/* Bio */
.bio {
    grid-column: span 12;

    border-radius: 16px;

    color: rgb(76, 76, 76);
    font-weight: 300;
    line-height: 1.2;

}

.bio p {
    margin-bottom: 1rem;
    font-size: 2rem;
    line-height: 1.5;

}

/* Skills Section */
.skills-section {
    background-color: #ffffff;
    padding: 80px 0;
}

.skills-header {
    text-align: center;
    margin-bottom: 64px;
}

.skills-header .section-title {

    margin-bottom: 16px;
}

.section-subtitle {
    font-size: 20px;
    color: #6b7280;
    line-height: 28px;
    margin-bottom: 48px;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
  }
  
  /* Menos de 600px: forzar 2 columnas */
  @media (max-width: 600px) {
    .skills-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
.skill-card {
    background: transparent;
    text-align: center;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
}



.skill-name {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

/* Contact Section */
.contact-section {
    background: white;
    padding: 80px 0 120px;
}

.contact-content {
    max-width: 1440px;
    margin: 0 auto;
    text-align: center;
}

/*contact form+/* Contact Form Section */

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 500px;
    margin: 0 auto;
}

.contact-form label {
    font-weight: 500;
    color: #374151;
}

.contact-form input,
.contact-form textarea {
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    font-size: 16px;
    color: #222;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #23719f;
    box-shadow: 0 0 0 2px rgba(35, 113, 159, 0.2);
    outline: none;
}

.cta-button {
    background: #23719f;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease;
}

.cta-button:hover {
    background: #1c4e6a;
}

.form-message {
    text-align: center;
    margin-top: 16px;
    font-size: 16px;
    color: #16a34a;
}

/* Footer */
.footer {
    background: #111827;
    color: white;
    padding: 48px 0;
}

.footer-container {
    max-width: 1440px;
    margin: 0 auto;

}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;

}

.footer-name {
    font-family: 'Limelight', serif;


    line-height: 1;

    font-size: 24px;

    color: white;
    margin-bottom: 8px;
}

.footer-title {
    font-size: 16px;
    color: #9ca3af;
    line-height: 24px;
}

.footer-social {
    display: flex;
    gap: 20px;
}

.social-link {
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.social-link:hover {
    opacity: 1;
}

.linkedin-link {
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M16.25 1.25H1.24609C0.558594 1.25 0 1.81641 0 2.51172V17.4883C0 18.1836 0.558594 18.75 1.24609 18.75H16.25C16.9375 18.75 17.5 18.1836 17.5 17.4883V2.51172C17.5 1.81641 16.9375 1.25 16.25 1.25ZM5.28906 16.25H2.69531V7.89844H5.29297V16.25H5.28906ZM3.99219 6.75781C3.16016 6.75781 2.48828 6.08203 2.48828 5.25391C2.48828 4.42578 3.16016 3.75 3.99219 3.75C4.82031 3.75 5.49609 4.42578 5.49609 5.25391C5.49609 6.08594 4.82422 6.75781 3.99219 6.75781ZM15.0117 16.25H12.418V12.1875C12.418 11.2188 12.3984 9.97266 11.0703 9.97266C9.71875 9.97266 9.51172 11.0273 9.51172 12.1172V16.25H6.91797V7.89844H9.40625V9.03906H9.44141C9.78906 8.38281 10.6367 7.69141 11.8984 7.69141C14.5234 7.69141 15.0117 9.42187 15.0117 11.6719V16.25Z" fill="%239CA3AF"/%3E%3C/svg%3E');
}

.github-link {
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6.48047 15.5234C6.48047 15.6016 6.39062 15.6641 6.27734 15.6641C6.14844 15.6758 6.05859 15.6133 6.05859 15.5234C6.05859 15.4453 6.14844 15.3828 6.26172 15.3828C6.37891 15.3711 6.48047 15.4336 6.48047 15.5234ZM5.26563 15.3477C5.23828 15.4258 5.31641 15.5156 5.43359 15.5391C5.53516 15.5781 5.65234 15.5391 5.67578 15.4609C5.69922 15.3828 5.625 15.293 5.50781 15.2578C5.40625 15.2305 5.29297 15.2695 5.26563 15.3477ZM6.99219 15.2813C6.87891 15.3086 6.80078 15.3828 6.8125 15.4727C6.82422 15.5508 6.92578 15.6016 7.04297 15.5742C7.15625 15.5469 7.23437 15.4727 7.22266 15.3945C7.21094 15.3203 7.10547 15.2695 6.99219 15.2813ZM9.5625 0.3125C4.14453 0.3125 0 4.42578 0 9.84375C0 14.1758 2.72656 17.8828 6.62109 19.1875C7.12109 19.2773 7.29688 18.9688 7.29688 18.7148C7.29688 18.4727 7.28516 17.1367 7.28516 16.3164C7.28516 16.3164 4.55078 16.9023 3.97656 15.1523C3.97656 15.1523 3.53125 14.0156 2.89062 13.7227C2.89062 13.7227 1.99609 13.1094 2.95312 13.1211C2.95312 13.1211 3.92578 13.1992 4.46094 14.1289C5.31641 15.6367 6.75 15.2031 7.30859 14.9453C7.39844 14.3203 7.65234 13.8867 7.93359 13.6289C5.75 13.3867 3.54688 13.0703 3.54688 9.3125C3.54688 8.23828 3.84375 7.69922 4.46875 7.01172C4.36719 6.75781 4.03516 5.71094 4.57031 4.35937C5.38672 4.10547 7.26562 5.41406 7.26562 5.41406C8.04688 5.19531 8.88672 5.08203 9.71875 5.08203C10.5508 5.08203 11.3906 5.19531 12.1719 5.41406C12.1719 5.41406 14.0508 4.10156 14.8672 4.35937C15.4023 5.71484 15.0703 6.75781 14.9688 7.01172C15.5938 7.70313 15.9766 8.24219 15.9766 9.3125C15.9766 13.082 13.6758 13.3828 11.4922 13.6289C11.8516 13.9375 12.1563 14.5234 12.1563 15.4414C12.1563 16.7578 12.1445 18.3867 12.1445 18.707C12.1445 18.9609 12.3242 19.2695 12.8203 19.1797C16.7266 17.8828 19.375 14.1758 19.375 9.84375C19.375 4.42578 14.9805 0.3125 9.5625 0.3125Z" fill="%239CA3AF"/%3E%3C/svg%3E');
}

.behance-link {
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4.654 3c.461 0 .887.035 1.278.14.39.07.711.216.996.391s.497.426.641.747c.14.32.216.711.216 1.137 0 .496-.106.922-.356 1.242-.215.32-.566.606-.997.817.606.176 1.067.496 1.348.922s.461.957.461 1.563c0 .496-.105.922-.285 1.278a2.3 2.3 0 0 1-.782.887c-.32.215-.711.39-1.137.496a5.3 5.3 0 0 1-1.278.176L0 12.803V3zm-.285 3.978c.39 0 .71-.105.957-.285.246-.18.355-.497.355-.887 0-.216-.035-.426-.105-.567a1 1 0 0 0-.32-.355 1.8 1.8 0 0 0-.461-.176c-.176-.035-.356-.035-.567-.035H2.17v2.31c0-.005 2.2-.005 2.2-.005zm.105 4.193c.215 0 .426-.035.606-.07.176-.035.356-.106.496-.216s.25-.215.356-.39c.07-.176.14-.391.14-.641 0-.496-.14-.852-.426-1.102-.285-.215-.676-.32-1.137-.32H2.17v2.734h2.305zm6.858-.035q.428.427 1.278.426c.39 0 .746-.106 1.032-.286q.426-.32.53-.64h1.74c-.286.851-.712 1.457-1.278 1.848-.566.355-1.243.566-2.06.566a4.1 4.1 0 0 1-1.527-.285 2.8 2.8 0 0 1-1.137-.782 2.85 2.85 0 0 1-.712-1.172c-.175-.461-.25-.957-.25-1.528 0-.531.07-1.032.25-1.493.18-.46.426-.852.747-1.207.32-.32.711-.606 1.137-.782a4 4 0 0 1 1.493-.285c.606 0 1.137.105 1.598.355.46.25.817.532 1.102.958.285.39.496.851.641 1.348.07.496.105.996.07 1.563h-5.15c0 .58.21 1.11.496 1.396m2.24-3.732c-.25-.25-.642-.391-1.103-.391-.32 0-.566.07-.781.176s-.356.25-.496.39a.96.96 0 0 0-.25.497c-.036.175-.07.32-.07.46h3.196c-.07-.526-.25-.882-.497-1.132zm-3.127-3.728h3.978v.957h-3.978z" fill="%239CA3AF"/%3E%3C/svg%3E');
}


.footer-bottom {
    border-top: 1px solid #374151;
    padding-top: 24px;
    text-align: center;
}

.footer-copyright {
    font-size: 16px;
    color: #9ca3af;
    line-height: 24px;
}

/* Responsive Design */
@media (max-width: 1200px) {

    .nav-container,
    .footer-container {
        padding: 0 24px;
    }

    .hero-content {
        flex-direction: column;
        gap: 40px;
    }

    .hero-card {
        max-width: 600px;
        margin: 0 auto;
    }

    .hero-text {
        margin-top: -250px;
    }
}

@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }

    .hero-title {
        font-size: 36px;
        line-height: 36px;
    }

    .contact-container {
        flex-direction: column;
        gap: 16px;
    }

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

    .contact-methods {
        flex-direction: column;
        gap: 32px;
    }

    .work-item {
        flex-direction: column;
        text-align: center;
    }

    .work-content {
        padding-top: 24px;
    }
}

@media (max-width: 480px) {
    .hero-image {
        width: 280px;
        height: 400px;
    }

    .hero-title {
        font-size: 28px;
        line-height: 28px;
    }

    .skills-grid {
        grid-template-columns: 1fr;
    }
}




.carousel-wrap {
    width: 100%;
}

.carousel {
    position: relative;
    overflow: hidden;
    background: #fcfcfc;
    border-radius: 12px;
    padding: 18px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.logos {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}



.logo img {
    height: 80px;

}

.logo-carousel {}

@media (max-width:600px) {
 .bio p {
        font-size: 1.5rem;
        line-height: 1.4;
    }

    .section-title {
        font-size: 48px;
        font-weight: 500;
        line-height: 100%;
        color: #00021e;
        text-align: start;
        margin-bottom: 32px;
        margin-top: 0px;
    }

    .logo {
        width: 120px;
        height: 56px
    }

    :root {
        --gap: 14px
    }
}

/*contact form+/* Contact Form Section */

.contact-section {
    background: #23719f;
    padding: 80px 24px 120px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1024px;
    margin: 0 auto;
    padding: 32px;
    background-color: #ffffff45;
    border-radius: 24px;
}

.contact-form label {
    font-weight: 500;
    color: #374151;
    text-align: start;
}

.contact-form input,
.contact-form textarea {
    padding: 12px 16px;
    border: 1px solid #ffffff;
    border-radius: 12px;
    font-size: 16px;
    color: #ffffff;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #23719f;
    box-shadow: 0 0 0 2px rgba(35, 113, 159, 0.2);
    outline: none;
}

.cta-button {
    background: #23719f;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease;
}

.cta-button:hover {
    background: #1c4e6a;
}

.form-message {
    text-align: center;
    margin-top: 16px;
    font-size: 16px;
    color: #16a34a;
}



/* Responsive layout para tablets y móviles */
@media (max-width: 1024px) {

    .profile-image,
    .experience-section,
    .bio {
        grid-column: span 12 !important;
        /* cada bloque ocupa toda la fila */
    }

    .card-row {
        grid-template-columns: 2fr;
        /* las cards en columna */
    }

    .card-row.three {
        grid-template-columns: 2fr;
        /* lo mismo para las de 3 columnas */
    }
}

@media (max-width: 600px) {
    .experience-card {
        padding: 1rem;
    }

    .card-header h3 {
        font-size: 1rem;
    }

    .year {
        font-size: 1.2rem;
    }
}

.conect {
    color: #FFFFFF;
}


@media (max-width: 768px) {
    .logo-text {
        font-size: 28px;
        /* más pequeño en tablet */
    }

    @media (max-width: 480px) {
        .logo-text {
            font-size: 20px;
            /* aún más pequeño en móvil */
        }
    }

    @media (max-width: 500px) {
        .skills-grid {
          display: grid;
          grid-auto-flow: column;               /* llena por columnas */
          grid-template-rows: repeat(3, 1fr);   /* siempre 3 filas */
          grid-auto-columns: 140px;             /* ancho fijo de cada columna */
          gap: 12px;
          overflow-x: auto;                     /* scroll solo horizontal */
          overflow-y: hidden;                   /* evita scroll vertical */
          -webkit-overflow-scrolling: touch;    /* suaviza en iOS */
          scroll-snap-type: x mandatory;
          padding: 12px;
          height: calc(140px * 3 + 24px);       /* alto fijo: 3 filas + gaps (ajusta al tamaño real de tus cards) */
        }
      
        .skills-grid .skill-card {
          width: 100%;
          height: 140px;              /* altura fija por card para que no “rompa” filas */
          display: flex;
          align-items: center;
          justify-content: center;
          scroll-snap-align: start;
          box-sizing: border-box;
          padding: 8px;
        }
      
        .skill-card img {
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
        }
      }