/*==========================================================
  JUAN PABLO FUENTES
  EXECUTIVE PORTFOLIO
==========================================================*/


/*==========================================================
RESET
==========================================================*/

*,
*::before,
*::after {

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

}

html {

    scroll-behavior: smooth;

}

body {

    font-family: 'Inter', sans-serif;

    background: #f6f8fb;

    color: #1f2937;

    line-height: 1.75;

    font-size: 16px;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

}


/*==========================================================
VARIABLES
==========================================================*/

:root {

    --primary: #153B50;

    --primary-dark: #102C3A;

    --secondary: #3B82F6;

    --accent: #0EA5E9;

    --background: #F8FAFC;

    --surface: #FFFFFF;

    --surface-light: #F1F5F9;

    --border: #E2E8F0;

    --text: #1E293B;

    --text-light: #64748B;

    --success: #10B981;

    --radius: 18px;

    --radius-small: 10px;

    --transition: .30s;

    --shadow-sm:
        0 4px 12px rgba(15, 23, 42, .05);

    --shadow:
        0 10px 30px rgba(15, 23, 42, .08);

    --shadow-lg:
        0 20px 60px rgba(15, 23, 42, .10);

}


/*==========================================================
LAYOUT
==========================================================*/

.document {

    width: 1200px;

    margin: auto;

    padding: 60px;

}

.page {

    min-height: 70vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 20px 0;

}

section {

    page-break-after: always;

}

section:last-child {

    page-break-after: auto;

}


/*==========================================================
TIPOGRAFÍA
==========================================================*/

h1 {

    font-size: 5rem;

    font-weight: 800;

    color: var(--primary);

    line-height: .95;

    letter-spacing: -3px;

}

h2 {

    font-size: 2.4rem;

    font-weight: 700;

    color: var(--primary);

    margin-bottom: 10px;

}

h3 {

    font-size: 1.35rem;

    color: var(--primary);

    font-weight: 600;

}

h4 {

    color: var(--text-light);

    font-weight: 500;

}

h5 {

    color: var(--primary);

    margin-bottom: 12px;

}

p {

    color: var(--text-light);

    margin-bottom: 18px;

}

strong {

    color: var(--primary);

}

a {

    color: inherit;

    text-decoration: none;

}


/*==========================================================
SECCIONES
==========================================================*/

.section-title {

    display: flex;

    align-items: flex-start;

    gap: 25px;

    margin-bottom: 30px;

}

.section-number {

    width: 70px;

    height: 70px;

    border-radius: 50%;

    background: var(--primary);

    color: white;

    display: flex;

    justify-content: center;

    align-items: center;

    font-weight: 700;

    font-size: 1.3rem;

    flex-shrink: 0;

}

.section-title p {

    margin-top: 8px;

    max-width: 650px;

}


/*==========================================================
DOS COLUMNAS
==========================================================*/

.two-columns {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

}


/*==========================================================
CARDS
==========================================================*/

.cards {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;

}

.info-card {

    background: white;

    border-radius: var(--radius);

    border: 1px solid var(--border);

    padding: 25px;

    transition: .30s;

    box-shadow: var(--shadow-sm);

}

.info-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow);

}

.info-card h3 {

    margin-bottom: 20px;

}


/*==========================================================
CHIPS
==========================================================*/

.chip-group,

.chip-cloud,

.tech-stack {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}

.chip-group span,

.chip-cloud span,

.tech-stack span {

    padding: 10px 18px;

    border-radius: 999px;

    background: var(--surface-light);

    color: var(--primary);

    font-weight: 600;

    font-size: .90rem;

    border: 1px solid var(--border);

    transition: .25s;

}

.chip-group span:hover,

.chip-cloud span:hover,

.tech-stack span:hover {

    background: var(--primary);

    color: white;

}


/*==========================================================
TAGS
==========================================================*/

.tag {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 22px;

    border-radius: 999px;

    background: var(--primary);

    color: white;

    font-size: .9rem;

    font-weight: 600;

}

.hero-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 25px;

}


/*==========================================================
SEPARADORES
==========================================================*/

.separator {

    width: 100%;

    height: 1px;

    background: var(--border);

    margin: 70px 0;

}

/*==========================================================
HERO
==========================================================*/

.hero-page {

    position: relative;

    justify-content: space-between;

}

.hero {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 70px;

    align-items: start;

}

.hero-content {

    display: flex;

    flex-direction: column;

}

.hero-label {

    display: inline-block;

    align-self: flex-start;

    padding: 8px 18px;

    background: #E8F1FF;

    color: var(--secondary);

    border-radius: 999px;

    font-size: .80rem;

    font-weight: 700;

    letter-spacing: 1.8px;

    text-transform: uppercase;

    margin-bottom: 25px;

}

.hero-title {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 18px;

    margin-top: 25px;

    margin-bottom: 25px;

    font-size: 1.2rem;

    color: var(--text-light);

    font-weight: 500;

}

.hero-title span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--secondary);

}

.hero-description {

    max-width: 760px;

    font-size: 1.18rem;

    line-height: 1.9;

    margin-top: 15px;

    margin-bottom: 25px;

}


/*==========================================================
PANEL DERECHO
==========================================================*/

.hero-panel {

    display: flex;

    flex-direction: column;

    gap: 25px;

}

.panel {

    background: var(--surface);

    border-radius: var(--radius);

    padding: 28px;

    border: 1px solid var(--border);

    box-shadow: var(--shadow-sm);

    transition: all .30s;

}

.panel:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow);

}

.panel h3 {

    margin-bottom: 18px;

}

.panel ul {

    list-style: none;

}

.panel li {

    padding: 10px 0;

    border-bottom: 1px solid #eef2f7;

    color: var(--text-light);

}

.panel li:last-child {

    border-bottom: none;

}


/*==========================================================
MÉTRICAS
==========================================================*/

.hero-metrics {

    margin-top: 90px;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

}

.metric {

    background: linear-gradient(180deg, #ffffff, #f8fafc);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 25px;

    text-align: center;

    box-shadow: var(--shadow-sm);

    transition: .35s;

}

.metric:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}

.metric-number {

    font-size: 2.7rem;

    font-weight: 800;

    color: var(--primary);

    line-height: 1;

}

.metric-text {

    margin-top: 15px;

    color: var(--text-light);

    font-size: .95rem;

}


/*==========================================================
FONDO DECORATIVO
==========================================================*/

.hero-page::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(59, 130, 246, .12),
            transparent 70%);

    right: -220px;

    top: -220px;

    z-index: -1;

}

.hero-page::after {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(14, 165, 233, .10),
            transparent 70%);

    left: -180px;

    bottom: -120px;

    z-index: -1;

}


/*==========================================================
UTILIDADES
==========================================================*/

.mt-20 {

    margin-top: 20px;

}

.mt-40 {

    margin-top: 40px;

}

.mt-60 {

    margin-top: 60px;

}

.center {

    text-align: center;

}

.text-primary {

    color: var(--primary);

}

.text-light {

    color: var(--text-light);

}

.w-100 {

    width: 100%;

}


/*==========================================================
ANIMACIONES SUAVES
==========================================================*/

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

.hero-content,
.hero-panel,
.metric {

    animation: fadeUp .7s ease both;

}

.hero-panel {

    animation-delay: .15s;

}

.metric:nth-child(1) {
    animation-delay: .20s;
}

.metric:nth-child(2) {
    animation-delay: .30s;
}

.metric:nth-child(3) {
    animation-delay: .40s;
}

.metric:nth-child(4) {
    animation-delay: .50s;
}

/*==========================================================
PROYECTOS
==========================================================*/

.project-list {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 36px;

    margin-top: 30px;

}


/*==========================================================
PROYECTO DESTACADO
==========================================================*/

.project-card.featured {

    grid-column: 1 / -1;

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 45px;

    align-items: start;

}


/*==========================================================
TARJETA
==========================================================*/

.project-card {

    position: relative;

    overflow: hidden;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 22px;

    padding: 38px;

    box-shadow: var(--shadow-sm);

    transition:
        transform .35s,
        box-shadow .35s,
        border-color .35s;

}

.project-card:hover {

    transform: translateY(-8px);

    border-color: #c7d8ef;

    box-shadow: var(--shadow-lg);

}


/*==========================================================
BANDA SUPERIOR
==========================================================*/

.project-type {

    display: inline-flex;

    align-items: center;

    padding: 8px 16px;

    border-radius: 999px;

    background: #EAF3FF;

    color: var(--secondary);

    font-size: .78rem;

    font-weight: 700;

    letter-spacing: .8px;

    text-transform: uppercase;

    margin-bottom: 24px;

}


/*==========================================================
CABECERA
==========================================================*/

.project-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 30px;

    margin-bottom: 30px;

}

.project-header h3 {

    font-size: 1.45rem;

    margin-bottom: 8px;

}

.project-header h4 {

    font-size: .95rem;

    color: var(--text-light);

    font-weight: 500;

}


/*==========================================================
ROL
==========================================================*/

.project-role {

    flex-shrink: 0;

    padding: 12px 20px;

    border-radius: 999px;

    background: var(--primary);

    color: white;

    font-size: .82rem;

    font-weight: 700;

    letter-spacing: .5px;

}


/*==========================================================
CUERPO
==========================================================*/

.project-content {

    display: grid;

    grid-template-columns: 1.6fr 1fr;

    gap: 40px;

    margin-bottom: 30px;

}

.project-description p {

    margin-bottom: 0;

}

.project-details ul {

    list-style: none;

}

.project-details li {

    position: relative;

    padding-left: 26px;

    margin-bottom: 14px;

    color: var(--text-light);

}

.project-details li::before {

    content: "";

    position: absolute;

    left: 0;

    top: 10px;

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: var(--secondary);

}


/*==========================================================
TECNOLOGÍAS
==========================================================*/

.tech-stack {

    margin-top: 25px;

    padding-top: 24px;

    border-top: 1px solid var(--border);

}

.tech-stack span {

    background: #F8FAFC;

}

.project-card:hover .tech-stack span {

    background: #EDF5FF;

}


/*==========================================================
EFECTO DECORATIVO
==========================================================*/

.project-card::after {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(59, 130, 246, .08),
            transparent 70%);

    right: -130px;

    top: -130px;

    opacity: 0;

    transition: .45s;

}

.project-card:hover::after {

    opacity: 1;

}


/*==========================================================
TÍTULOS INTERNOS
==========================================================*/

.project-description h5,
.project-details h5 {

    margin-bottom: 18px;

    color: var(--primary);

    font-size: 1rem;

    font-weight: 700;

}


/*==========================================================
SEPARACIÓN ENTRE TARJETAS
==========================================================*/

.project-card p {

    margin-bottom: 0;

}


/*==========================================================
RESPONSIVE INTERNO
==========================================================*/

.project-card.featured .project-content {

    grid-template-columns: 2fr 1fr;

}

.project-card:not(.featured) .project-content {

    display: block;

}

.project-card:not(.featured) .project-details {

    margin-top: 25px;

}


/*==========================================================
MICROINTERACCIONES
==========================================================*/

.project-card h3 {

    transition: .30s;

}

.project-card:hover h3 {

    color: var(--secondary);

}

.project-card:hover .project-role {

    background: var(--secondary);

}


/*==========================================================
SOMBRA SUAVE EN EL BORDE
==========================================================*/

.project-card::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 22px;

    padding: 1px;

    background: linear-gradient(135deg,
            rgba(59, 130, 246, .18),
            rgba(255, 255, 255, 0));

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    opacity: 0;

    transition: .35s;

}

.project-card:hover::before {

    opacity: 1;

}

/*==========================================================
TIMELINE
==========================================================*/

.timeline {

    position: relative;

    margin: 20px 0 40px;

    padding-left: 140px;

}

.timeline-line {

    position: absolute;

    left: 62px;

    top: 0;

    bottom: 0;

    width: 3px;

    background: linear-gradient(to bottom,
            var(--secondary),
            #D7E6FA);

    border-radius: 10px;

}

.timeline-item {

    position: relative;

    display: grid;

    grid-template-columns: 140px 1fr;

    gap: 40px;

    margin-bottom: 55px;

}

.timeline-item:last-child {

    margin-bottom: 0;

}


/*==========================================================
PUNTO
==========================================================*/

.timeline-dot {

    position: absolute;



    top: 24px;

    width: 22px;

    height: 22px;

    border-radius: 50%;

    background: white;

    border: 5px solid var(--secondary);

    box-shadow: 0 0 0 8px #EDF5FF;

    z-index: 2;

}


/*==========================================================
FECHA
==========================================================*/

.timeline-date {

    color: var(--primary);

    font-weight: 700;

    font-size: .95rem;

    text-align: right;

    padding-top: 20px;

    padding-right: 18px;

}


/*==========================================================
CARD
==========================================================*/

.timeline-card {

    background: white;

    border-radius: 20px;

    border: 1px solid var(--border);

    padding: 32px;

    box-shadow: var(--shadow-sm);

    transition: .35s;

}

.timeline-card:hover {

    transform: translateY(-6px);

    box-shadow: var(--shadow);

}

.timeline-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;

    margin-bottom: 22px;

}

.timeline-header h3 {

    margin-bottom: 6px;

}

.timeline-header h4 {

    font-size: .95rem;

}


/*==========================================================
ETIQUETA
==========================================================*/

.timeline-tag {

    padding: 9px 18px;

    border-radius: 999px;

    background: #EAF3FF;

    color: var(--secondary);

    font-size: .80rem;

    font-weight: 700;

    white-space: nowrap;

}


/*==========================================================
HIGHLIGHTS
==========================================================*/

.timeline-highlights {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 24px;

}

.timeline-highlights span {

    background: #F8FAFC;

    border: 1px solid var(--border);

    border-radius: 999px;

    padding: 8px 14px;

    font-size: .82rem;

    color: var(--primary);

    font-weight: 600;

}


/*==========================================================
DOCENCIA
==========================================================*/

.training-layout {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 50px;

    align-items: start;

}


/*==========================================================
ÁREA PRINCIPAL
==========================================================*/

.training-main h3 {

    margin-bottom: 25px;

    margin-top: 15px;

}

.training-main h3:first-child {

    margin-top: 0;

}


/*==========================================================
NUBE DE TECNOLOGÍAS
==========================================================*/

.chip-cloud {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 45px;

}

.chip-cloud.large span {

    font-size: .95rem;

    padding: 12px 20px;

}

.chip-cloud span {

    transition: .30s;

}

.chip-cloud span:hover {

    transform: translateY(-3px);

}


/*==========================================================
MINI CARDS
==========================================================*/

.cards-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

}

.mini-card {

    background: white;

    border: 1px solid var(--border);

    border-radius: 16px;

    padding: 24px;

    text-align: center;

    font-weight: 600;

    color: var(--primary);

    box-shadow: var(--shadow-sm);

    transition: .30s;

}

.mini-card:hover {

    background: var(--primary);

    color: white;

    transform: translateY(-4px);

}


/*==========================================================
SIDEBAR
==========================================================*/

.training-sidebar {

    background: white;

    border-radius: 20px;

    border: 1px solid var(--border);

    padding: 32px;

    box-shadow: var(--shadow-sm);

}

.training-sidebar h3 {

    margin-bottom: 25px;

}

.organization-list {

    list-style: none;

}

.organization-list li {

    position: relative;

    padding: 14px 0 14px 22px;

    border-bottom: 1px solid #EEF2F7;

    color: var(--text-light);

}

.organization-list li:last-child {

    border-bottom: none;

}

.organization-list li::before {

    content: "";

    position: absolute;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--secondary);

    left: 0;

    top: 22px;

}


/*==========================================================
HOVER GENERAL
==========================================================*/

.timeline-card:hover .timeline-tag {

    background: var(--secondary);

    color: white;

}

.timeline-card:hover h3 {

    color: var(--secondary);

}


/*==========================================================
ANIMACIÓN
==========================================================*/

.timeline-item {

    animation: fadeUp .6s ease both;

}

.timeline-item:nth-child(1) {
    animation-delay: .10s;
}

.timeline-item:nth-child(2) {
    animation-delay: .20s;
}

.timeline-item:nth-child(3) {
    animation-delay: .30s;
}

.timeline-item:nth-child(4) {
    animation-delay: .40s;
}

.timeline-item:nth-child(5) {
    animation-delay: .50s;
}

.timeline-item:nth-child(6) {
    animation-delay: .60s;
}

/*==========================================================
COMPETENCIAS TÉCNICAS
==========================================================*/

.skills-layout {

    display: grid;

    gap: 40px;

}

.skill-category {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 22px;

    padding: 25px;

    box-shadow: var(--shadow-sm);

    transition: .35s;

}

.skill-category:hover {

    transform: translateY(-6px);

    box-shadow: var(--shadow);

}

.skill-category h3 {

    position: relative;

    margin-bottom: 28px;

    padding-bottom: 15px;

}

.skill-category h3::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 70px;

    height: 4px;

    border-radius: 4px;

    background: var(--secondary);

}

.skill-category .chip-cloud {

    margin-bottom: 0;

}


/*==========================================================
FORMACIÓN
==========================================================*/

.education-timeline {

    position: relative;

    margin: 70px auto;

    max-width: 900px;

}

.education-timeline::before {

    content: "";

    position: absolute;

    left: 32px;

    top: 0;

    bottom: 0;

    width: 3px;

    background: linear-gradient(var(--secondary),
            #DCEAFD);

}

.education-item {

    position: relative;

    display: flex;

    gap: 25px;

    margin-bottom: 50px;

}

.education-item:last-child {

    margin-bottom: 0;

}

.education-icon {

    width: 65px;

    height: 65px;

    border-radius: 50%;

    background: white;

    border: 4px solid var(--secondary);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 1.6rem;

    flex-shrink: 0;

    box-shadow: 0 0 0 10px #EDF5FF;

    z-index: 2;

}

.education-content {

    flex: 1;

    background: white;

    border-radius: 20px;

    padding: 30px;

    border: 1px solid var(--border);

    box-shadow: var(--shadow-sm);

    transition: .30s;

}

.education-content:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow);

}

.education-content h3 {

    margin-bottom: 14px;

}


/*==========================================================
PÁGINA FINAL
==========================================================*/

.final-page {

    justify-content: space-between;

}

.closing-card {

    background: linear-gradient(135deg,
            #153B50,
            #1F5D7A);

    color: white;

    border-radius: 28px;

    padding: 60px;

    margin-bottom: 60px;

    box-shadow: var(--shadow-lg);

}

.closing-card h2 {

    color: white;

    margin-bottom: 30px;

}

.closing-card p {

    color: rgba(255, 255, 255, .92);

    font-size: 1.08rem;

    line-height: 1.9;

}


/*==========================================================
CONTACTO
==========================================================*/

.contact-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;

    margin-bottom: 60px;

}

.contact-grid>div {

    background: white;

    border-radius: 18px;

    border: 1px solid var(--border);

    padding: 30px;

    box-shadow: var(--shadow-sm);

}

.contact-grid h4 {

    color: var(--primary);

    margin-bottom: 18px;

    font-size: 1rem;

    font-weight: 700;

}

.contact-grid p {

    margin: 0;

}


/*==========================================================
FOOTER
==========================================================*/

.portfolio-footer {

    margin-top: auto;

    border-top: 2px solid var(--border);

    padding-top: 40px;

    text-align: center;

}

.footer-name {

    font-size: 2rem;

    font-weight: 800;

    color: var(--primary);

}

.footer-title {

    margin-top: 12px;

    color: var(--secondary);

    font-weight: 600;

    font-size: 1.1rem;

}

.footer-line {

    margin-top: 18px;

    color: var(--text-light);

    letter-spacing: .5px;

}


/*==========================================================
RESPONSIVE
==========================================================*/

@media (max-width:1200px) {

    .document {

        width: 100%;

        padding: 40px;

    }

    .hero {

        grid-template-columns: 1fr;

    }

    .hero-panel {

        margin-top: 40px;

    }

    .hero-metrics {

        grid-template-columns: repeat(2, 1fr);

    }

    .project-list {

        grid-template-columns: 1fr;

    }

    .project-card.featured {

        grid-template-columns: 1fr;

    }

    .project-content {

        grid-template-columns: 1fr !important;

    }

    .training-layout {

        grid-template-columns: 1fr;

    }

    .contact-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .two-columns {

        grid-template-columns: 1fr;

    }

    .timeline {

        padding-left: 90px;

    }

    .timeline-item {

        grid-template-columns: 90px 1fr;

    }

    .timeline-line {

        left: 38px;

    }

    .timeline-dot {

        left: 28px;

    }

}


@media (max-width:768px) {

    body {

        font-size: 15px;

    }

    .document {

        padding: 25px;

    }

    .page {

        min-height: auto;

        padding: 50px 0;

    }

    h1 {

        font-size: 3rem;

        letter-spacing: -2px;

    }

    h2 {

        font-size: 2rem;

    }

    .hero-metrics {

        grid-template-columns: 1fr;

    }

    .cards {

        grid-template-columns: 1fr;

    }

    .cards-grid {

        grid-template-columns: 1fr;

    }

    .contact-grid {

        grid-template-columns: 1fr;

    }

    .timeline {

        padding-left: 0;

    }

    .timeline-line,

    .timeline-dot {

        display: none;

    }

    .timeline-item {

        display: block;

    }

    .timeline-date {

        text-align: left;

        padding: 0 0 15px 0;

    }

    .section-title {

        flex-direction: column;

        gap: 20px;

    }

    .section-number {

        width: 55px;

        height: 55px;

        font-size: 1rem;

    }

}