:root {
    /* Colores principales - Modo claro */
    --primary-color: #1e88e5;
    --primary-dark: #1565c0;
    --primary-light: #64b5f6;
    --secondary-color: #5e35b1;
    --accent-color: #ff5722;

    /* Colores de fondo - Modo claro */
    --bg-color: #ffffff;
    --bg-alt: #f5f9fc;
    --bg-card: #ffffff;
    --bg-code: #2d333b;

    /* Colores de texto - Modo claro */
    --text-primary: #212121;
    --text-secondary: #757575;
    --text-tertiary: #9e9e9e;
    --text-on-primary: #ffffff;
    --text-on-code: #e6edf3;

    /* Colores de borde y sombra - Modo claro */
    --border-color: #e0e0e0;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-dark: rgba(0, 0, 0, 0.2);

    /* Fuentes */
    --font-primary: 'Poppins', sans-serif;
    --font-code: 'Consolas', 'Monaco', monospace;

    /* Dimensiones */
    --header-height: 70px;
    --border-radius-sm: 4px;
    --border-radius: 8px;
    --border-radius-lg: 16px;

    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Espaciado */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
}

/* Modo oscuro */
[data-theme="dark"] {
    /* Colores principales - Modo oscuro */
    --primary-color: #42a5f5;
    --primary-dark: #1976d2;
    --primary-light: #90caf9;
    --secondary-color: #7e57c2;
    --accent-color: #ff7043;

    /* Colores de fondo - Modo oscuro */
    --bg-color: #121212;
    --bg-alt: #1e1e1e;
    --bg-card: #2a2a2a;
    --bg-code: #1e2227;

    /* Colores de texto - Modo oscuro */
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-tertiary: #757575;

    /* Colores de borde y sombra - Modo oscuro */
    --border-color: #424242;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-dark: rgba(0, 0, 0, 0.5);
}

/* Reset y estilos base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-color);
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-dark);
}

ul {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: var(--spacing-md);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
    position: relative;
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--primary-color);
    border-radius: 2px;
}

h3 {
    font-size: 1.5rem;
}

p {
    margin-bottom: var(--spacing-md);
}

section {
    padding: var(--spacing-xxl) 0;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* Botones */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius);
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    font-family: var(--font-primary);
}

.btn i {
    margin-right: 0.5rem;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--text-on-primary);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-color);
}

.btn-outline {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-outline:hover, .btn-outline:focus {
    background-color: var(--primary-color);
    color: var(--text-on-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-color);
}

/* Header y navegación */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--bg-color);
    box-shadow: 0 2px 10px var(--shadow-color);
    z-index: 1000;
    height: var(--header-height);
    transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
}

header .container {
    display: flex;
    /* Ajusta este valor para controlar el espacio general dentro del header.
       Mantenerlo en 'space-between' es bueno para empujar el logo y los botones a los extremos,
       pero usaremos márgenes en la navegación para separarlos. */
    justify-content: space-between; /* Esto empuja el logo a un extremo y los elementos a la derecha al otro */
    align-items: center;
    height: 100%;
    /* Ajusta el padding lateral del contenedor principal del header.
       'var(--spacing-lg)' es 1.5rem o 24px, lo que da un buen margen al inicio y al final. */
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}

.logo {
    font-size: 1.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    /* Eliminamos cualquier margin-right aquí. El espacio lo gestionará la navegación. */
    margin-right: 0;
}

.dev-text {
    color: var(--primary-color);
}

.ops-text {
    color: var(--secondary-color);
}

.nav a{ white-space: nowrap; }

.nav-links {
    display: flex;
    /* Un buen gap para separar los elementos del menú */
    gap: var(--spacing-xl); /* 2rem o 32px. Puedes ajustar a var(--spacing-lg) si quieres menos */
    /* Este margen empuja la navegación lejos del logo */
    margin-left: var(--spacing-xxl); /* 3rem o 48px. Esto crea una separación clara y definida */
}

.nav-links a {
    color: var(--text-primary);
    font-weight: 500;
    position: relative;
}

.nav-links a:hover, .nav-links a.active {
    color: var(--primary-color);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width var(--transition-fast);
}

.nav-links a:hover::after, .nav-links a.active::after {
    width: 100%;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.cv-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--primary-light);
    color: var(--text-on-primary);
    border-radius: var(--border-radius);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.cv-button:hover {
    background-color: var(--primary-color);
    transform: translateY(-2px);
}

#theme-toggle {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all var(--transition-fast);
}

#theme-toggle:hover {
    background-color: var(--border-color);
}

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
}

.hamburger span {
    height: 2px;
    width: 100%;
    background-color: var(--text-primary);
    border-radius: 2px;
    transition: all var(--transition-fast);
}

/* Sección Hero */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: var(--header-height);
    background-color: var(--bg-alt);
}

.hero .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xxl);
}

.hero-content {
    flex: 1;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

.hero .accent {
    color: var(--primary-color);
}

.hero .subtitle {
    font-size: 1.5rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

.hero .description {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-xl);
    max-width: 600px;
}

.hero-cta {
    display: flex;
    gap: var(--spacing-md);
}

.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.code-window {
    background-color: var(--bg-code);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 10px 30px var(--shadow-dark);
}

.code-header {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
}

.dot.red {
    background-color: #ff5f56;
}

.dot.yellow {
    background-color: #ffbd2e;
}

.dot.green {
    background-color: #27c93f;
}

.filename {
    margin-left: var(--spacing-md);
    color: var(--text-on-code);
    font-size: 0.9rem;
    opacity: 0.8;
}

.code-content {
    padding: var(--spacing-lg);
    overflow-x: auto;
}

.code-content pre {
    margin: 0;
    color: var(--text-on-code);
    font-family: var(--font-code);
}

.code-content code {
    line-height: 1.5;
}

/* Sección Sobre Mí */
.about-content {
    display: flex;
    gap: var(--spacing-xxl);
    align-items: center;
}

.about-image {
    flex: 0 0 300px;
}

.image-container {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 10px 30px var(--shadow-color);
    margin-bottom: var(--spacing-lg);
}

.profile-image {
    transition: transform var(--transition-normal);
}

.image-container:hover .profile-image {
    transform: scale(1.05);
}

.social-links {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--bg-alt);
    border-radius: 50%;
    color: var(--primary-color);
    font-size: 1.2rem;
    transition: all var(--transition-fast);
}

.social-links a:hover {
    background-color: var(--primary-color);
    color: var(--text-on-primary);
    transform: translateY(-3px);
}

.about-text {
    flex: 1;
}

.about-text h3 {
    margin-bottom: var(--spacing-md);
}

.key-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.info-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.info-item i {
    font-size: 1.2rem;
    color: var(--primary-color);
}

/* Sección de Experiencia */
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 150px;
    width: 3px;
    background-color: var(--border-color);
}

.timeline-item {
    position: relative;
    padding-bottom: var(--spacing-xxl);
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: 148px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary-color);
    transform: translateX(-50%);
    z-index: 1;
}

.timeline-date {
    position: absolute;
    left: 0;
    width: 130px;
    text-align: right;
    font-weight: 600;
    color: var(--primary-color);
}

.timeline-content {
    margin-left: 180px;
    background-color: var(--bg-card);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: 0 5px 15px var(--shadow-color);
}

.timeline-content h3 {
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
}

.timeline-content h4 {
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
    font-weight: normal;
    font-size: 1rem;
}

.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.tech-stack span {
    background-color: var(--bg-alt);
    color: var(--primary-color);
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Sección de Proyectos */
.projects {
    background-color: var(--bg-alt);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.project-card {
    background-color: var(--bg-card);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 5px 15px var(--shadow-color);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px var(--shadow-color);
}

.project-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.project-card:hover .project-image img {
    transform: scale(1.05);
}

.project-content {
    padding: var(--spacing-lg);
}

.project-content h3 {
    margin-bottom: var(--spacing-sm);
}

.project-links {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.section-cta {
    text-align: center;
    margin-top: var(--spacing-xl);
}

/* Sección de Habilidades */
.skills-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.skills-group h3 {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.skill-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.skill-icon {
    font-size: 1.5rem;
    color: var(--primary-color);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-alt);
    border-radius: 50%;
}

.skill-info {
    flex: 1;
}

.skill-info h4 {
    margin-bottom: var(--spacing-xs);
    font-size: 1rem;
}

.skill-bar {
    height: 8px;
    background-color: var(--bg-alt);
    border-radius: 4px;
    overflow: hidden;
}

.skill-progress {
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 4px;
}

/* Sección de Contacto */
.contact {
    background-color: var(--bg-alt);
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xxl);
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
}

.contact-method {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.contact-method .icon {
    width: 50px;
    height: 50px;
    background-color: var(--primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-primary);
    font-size: 1.2rem;
}

.contact-method h4 {
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.social-links-large {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.social-links-large a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: var(--bg-card);
    border-radius: 50%;
    color: var(--primary-color);
    font-size: 1.5rem;
    transition: all var(--transition-fast);
    box-shadow: 0 5px 15px var(--shadow-color);
}

.social-links-large a:hover {
    background-color: var(--primary-color);
    color: var(--text-on-primary);
    transform: translateY(-3px) scale(1.05);
}

.contact-form-container {
    background-color: var(--bg-card);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 10px 30px var(--shadow-color);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 500;
}

.form-group input, .form-group textarea {
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-primary);
    transition: border-color var(--transition-fast);
}

.form-group input:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Footer */
footer {
    background-color: var(--bg-color);
    border-top: 1px solid var(--border-color);
    padding: var(--spacing-xxl) 0 var(--spacing-lg);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.footer-logo p {
    margin-top: var(--spacing-md);
    color: var(--text-secondary);
}

.footer-links h3, .footer-cta h3 {
    margin-bottom: var(--spacing-md);
    font-size: 1.2rem;
}

.footer-links ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer-links a {
    color: var(--text-secondary);
}

.footer-links a:hover {
    color: var(--primary-color);
}

.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    color: var(--text-tertiary);
}

/* Botón Scroll Top */
#scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    color: var(--text-on-primary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 5px 15px var(--shadow-color);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity var(--transition-normal), visibility var(--transition-normal), transform var(--transition-normal);
}

#scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#scroll-top:hover {
    background-color: var(--primary-dark);
}

/* Media Queries para Responsive */
@media (max-width: 992px) {
    h1 {
        font-size: 2.2rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    .hero .container {
        flex-direction: column;
        gap: var(--spacing-xl);
    }

    .hero-content, .hero-image {
        max-width: 100%;
    }

    .about-content {
        flex-direction: column;
    }

    .about-image {
        flex: 0 0 auto;
        margin: 0 auto;
    }

    .contact-content {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .timeline::before {
        left: 20px;
    }

    .timeline-dot {
        left: 20px;
    }

    .timeline-date {
        position: relative;
        left: 0;
        width: auto;
        text-align: left;
        margin-left: 40px;
        margin-bottom: var(--spacing-sm);
    }

    .timeline-content {
        margin-left: 40px;
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: 60px;
    }

    .nav-links {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        background-color: var(--bg-color);
        flex-direction: column;
        padding: var(--spacing-lg);
        box-shadow: 0 5px 10px var(--shadow-color);
        transform: translateY(-100%);
        opacity: 0;
        transition: transform var(--transition-normal), opacity var(--transition-normal);
        z-index: 100;
    }

    .nav-links.active {
        transform: translateY(0);
        opacity: 1;
    }

    .hamburger {
        display: flex;
    }

    .hamburger.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    .cv-button span {
        display: none;
    }

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

    .hero h1 {
        font-size: 2rem;
    }

    .hero .subtitle {
        font-size: 1.2rem;
    }
}

@media (max-width: 576px) {
    .hero-cta {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .hero-cta .btn {
        width: 100%;
    }

    .code-window {
        max-width: 100%;
    }

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

/* --- Fijar columnas por breakpoint para la grilla de proyectos --- */
@media (min-width: 992px) {
    .projects-grid { grid-template-columns: repeat(3, minmax(280px, 1fr)); }
}

@media (min-width: 768px) and (max-width: 991px) {
    .projects-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
}

/* Asegura altura uniforme de la imagen del card */
.project-image { height: 180px; }

/* --- Grilla de proyectos: columnas por breakpoint --- */
@media (min-width: 992px) {
    .projects-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(260px, 1fr));
        gap: 1.5rem;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .projects-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(260px, 1fr));
        gap: 1.25rem;
    }
}
@media (max-width: 767.98px) {
    .projects-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Cards más compactos y de altura consistente */
.project-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.project-image {
    height: 180px;               /* ajusta si quieres 160/200 */
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
}
.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Contenido del card */
.project-content {
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.project-content > p:first-of-type {
    margin: 0;
    display: -webkit-box;        /* recorta descripción a 3 líneas para que no desborde */
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tech chips y enlaces */
.tech-stack { display: flex; flex-wrap: wrap; gap: .4rem; }
.project-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: .5rem; }

/* Listado interno más compacto */
.project-card ul {
    margin: .5rem 0 0 1rem;
    line-height: 1.3;
    font-size: .95rem;
}

/* --- Layout sólido para Proyectos (3/2/1 columnas) --- */
@media (min-width: 992px) {
    .projects-grid{
        display:grid !important;
        grid-template-columns: repeat(3, minmax(260px,1fr)) !important;
        gap: 1.5rem !important;
        align-items: start;
    }
}
@media (min-width: 768px) and (max-width: 991.98px){
    .projects-grid{
        display:grid !important;
        grid-template-columns: repeat(2, minmax(260px,1fr)) !important;
        gap: 1.25rem !important;
    }
}
/* en móvil ya queda 1 columna; solo ajusto el gap */
@media (max-width: 767.98px){
    .projects-grid{ gap: 1rem !important; }
}

/* Tarjetas más compactas y parejas */
.project-card{ display:flex; flex-direction:column; height:100%; }
.project-image{ height:180px; overflow:hidden; }
.project-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.project-content{ padding-top:1rem; display:flex; flex-direction:column; gap:.6rem; }
.project-content > p:first-of-type{
    margin:0;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.project-links{ margin-top:auto; display:flex; flex-wrap:wrap; gap:.5rem; }

/* (opcional) listas internas más cortas */
.project-card ul{ margin:.5rem 0 0 1rem; line-height:1.35; font-size:.95rem; }

/* --- Proyectos: versión compacta (no cambia el look, solo tamaño) --- */

/* 3 columnas en desktop, 2 en tablet, 1 en móvil */
@media (min-width: 992px){ .projects-grid{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:1.25rem;} }
@media (min-width: 768px) and (max-width: 991.98px){ .projects-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:1.1rem;} }

/* Card más compacto */
.project-card{ padding:1rem 1.25rem; display:flex; flex-direction:column; }
.project-image{ height:160px; overflow:hidden; border-radius:var(--border-radius-lg); }
.project-image img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Títulos y textos un pelín más pequeños */
.project-content h3{ font-size:1.25rem; margin:0 0 .35rem; }
.project-content > p:first-of-type{
    margin:0;
    font-size:.96rem;
    line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; /* 2 líneas */
}

/* Chips y listas más discretas */
.tech-stack span{ font-size:.85rem; padding:.28rem .5rem; }
.project-card ul{ margin:.5rem 0 0 1rem; font-size:.92rem; line-height:1.35; }

/* Botón pequeño real (por si no lo tienes) */
.btn.btn-sm{ padding:.4rem .65rem; font-size:.9rem; }

.plus h2 { margin-bottom: 1.25rem; }
.plus .project-card { max-width: 900px; margin: 0 auto; }
.plus audio { width: 100%; border-radius: 12px; outline: none; }

/* Botón compacto para caber bien en el header */
.btn.btn-sm { padding: .35rem .6rem; font-size: .9rem; line-height: 1; }
.header-actions .btn { margin-left: .5rem; }

/* Si en móviles quieres ocultarlo para no saturar */
@media (max-width: 640px){
    .header-actions .btn.btn-sm[href="#plus"]{ display: none; }
}

/*.success-message i{font-size:3rem;color:var(--primary);margin-bottom:1rem;}*/
.success-message i { font-size:3rem; color: var(--primary-color); margin-bottom:1rem; }



/* Estilos para los botones en la sección de inicio */
.hero-buttons {
    display: flex;
    justify-content: center; /* Centra los botones horizontalmente */
    align-items: center; /* Alinea verticalmente los botones */
    flex-wrap: wrap; /* Permite que los botones se envuelvan a la siguiente línea en pantallas pequeñas */
    gap: 1rem; /* Espacio entre los botones */
}

/* Estilo general para los botones que queremos unificar */
.hero-buttons .btn {
    min-width: 180px; /* Tamaño mínimo para asegurar que todos los botones sean iguales */
    text-align: center; /* Centra el texto en el botón */
}

/* =============================
   Unificación de botones header
   ============================= */

/* variables de tamaño */
:root{
    --btn-h: 42px;
    --btn-radius: 12px;
    --btn-pad-x: .95rem;
    --btn-gap: .5rem;
}

/* base compartida para cv-button y .btn */
.header-actions .cv-button,
.header-actions .btn{
    display: inline-flex;
    align-items: center;
    gap: var(--btn-gap);
    height: var(--btn-h);
    padding: 0 var(--btn-pad-x);
    border-radius: var(--btn-radius);
    line-height: 1;
    font-weight: 600;
    box-sizing: border-box;   /* incluye el borde en el alto */
    margin-left: .5rem;       /* separación uniforme entre botones */
}

/* iconos alineados */
.header-actions .cv-button i,
.header-actions .btn i{ font-size: .95em; }

/* estilos coherentes */
.cv-button{
    background: var(--primary-color);
    color: #fff;
    border: 1.5px solid var(--primary-color);
}
.cv-button:hover{
    /* fallback */
    background: #2c7be5;                /* pon aquí un tono cercano si quieres */
    /* moderno */
    background: color-mix(in srgb, var(--primary-color) 92%, white);
}

.btn.btn-outline{
    border: 1.5px solid var(--primary-color);
    color: var(--primary-color);
    background: transparent;
}
.btn.btn-outline:hover{
    /* fallback */
    background: rgba(44,123,229,.12);
    /* moderno */
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

/* foco accesible */
.header-actions .cv-button:focus-visible,
.header-actions .btn:focus-visible{
    outline: 2px solid color-mix(in srgb, var(--primary-color) 60%, white);
    outline-offset: 2px;
}

/* botón compacto para "Plus" */
.header-actions .btn.btn-sm{
    height: calc(var(--btn-h) - 8px);
    padding: 0 .6rem;
    font-size: .9rem;
    line-height: 1;
}

/* opcional: ocultar Plus en móviles muy estrechos */
@media (max-width: 1024px){
    .header .logo{ margin-right: 28px; }
}


/* ====== Header layout & spacing fix ====== */
.header .container{
    padding-left: 20px;           /* un poco más de aire al borde izquierdo */
    padding-right: 20px;
}

.header-content{ align-items: center; }
.nav a{ line-height: 42px; } /* iguala con los botones del header */


/* MÁS separación entre el logo y el 1er ítem del menú */
.header .logo{
    margin-right: clamp(36px, 5vw, 96px); /* subí un poco el mínimo */
}


/* Navegación consistente */
.nav{
    display: flex;
    gap: clamp(16px, 2.2vw, 26px);         /* espacio uniforme entre enlaces */
    white-space: nowrap;
}

/* Acciones a la derecha, sin empujar la nav */
.header-actions{
    margin-left: clamp(24px, 4vw, 64px);
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* botón icon-only (ya lo vienes usando) */
.header-actions .icon-only{
    width: 42px; height: 42px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; border: 1.5px solid var(--primary-color);
    color: var(--primary-color); background: transparent; margin-left: .5rem;
}
.header-actions .icon-only:hover{
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

/* Mostrar sol en claro y luna en oscuro */
.icon-sun, .icon-moon{ display: none; }
[data-theme="light"] .icon-sun{ display:inline; }
[data-theme="dark"]  .icon-moon{ display:inline; }

/* =============================
   Unificación y ajuste de header
   ============================= */

/* evita saltos (“Sobre mí”) y asegura look consistente */
.nav-links a{ white-space: nowrap; }

/* separa logo del menú y acerca el logo a la izquierda */
.header .container{ padding-left: 8px; }
.header .logo{
    display:inline-flex; align-items:center;
    margin-right: clamp(16px, 2.2vw, 40px);
}

/* botones del header: mismo alto/borde entre cv-button y .btn */
:root{
    --btn-h: 42px;
    --btn-radius: 12px;
    --btn-pad-x: .95rem;
    --btn-gap: .5rem;
}
.header-actions .cv-button,
.header-actions .btn{
    display:inline-flex; align-items:center; gap:var(--btn-gap);
    height:var(--btn-h); padding:0 var(--btn-pad-x);
    border-radius:var(--btn-radius); line-height:1; font-weight:600;
    box-sizing:border-box; margin-left:.5rem;
}
.header-actions .cv-button i,
.header-actions .btn i{ font-size:.95em; }

/* cv-button con mismo borde que outline */
.cv-button{
    background: var(--primary-color);
    color:#fff; border:1.5px solid var(--primary-color);
}
.cv-button:hover{
    background: color-mix(in srgb, var(--primary-color) 92%, white);
}

/* outline coherente */
.btn.btn-outline{
    border:1.5px solid var(--primary-color);
    color:var(--primary-color); background:transparent;
}
.btn.btn-outline:hover{
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

/* foco accesible */
.header-actions .cv-button:focus-visible,
.header-actions .btn:focus-visible{
    outline:2px solid color-mix(in srgb, var(--primary-color) 60%, white);
    outline-offset:2px;
}

/* botón compacto para “Plus” */
.header-actions .btn.btn-sm{
    height: calc(var(--btn-h) - 8px);
    padding: 0 .6rem; font-size:.9rem; line-height:1;
}

/* opcional: si la cabecera queda apretada en móviles muy estrechos, oculta “Plus” */
@media (max-width: 640px){
    .header-actions .btn.btn-sm[href="#plus"]{ display:none; }
}

/* =============================
   Menú móvil más robusto
   ============================= */

.hamburger{ z-index:1101; } /* por delante del panel */
.nav-links{
    z-index:1100; /* por delante del contenido, por detrás de la hamburguesa */
}
@media (max-width: 768px){
    .nav-links{
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--header-height));
        background-color: var(--bg-color);
        flex-direction: column;
        gap: 1rem;
        padding: 1.25rem 1rem 2rem;
        box-shadow: 0 5px 10px var(--shadow-color);
        transform: translateY(-100%); opacity: 0;
        transition: transform var(--transition-normal), opacity var(--transition-normal);
        overflow-y: auto;  /* permite scroll dentro del menú */
        -webkit-overflow-scrolling: touch;
    }
    .nav-links.active{ transform: translateY(0); opacity: 1; }

    /* oculto el texto de CV en muy estrecho para ganar aire */
    .cv-button span{ display:none; }
}

/* icono de tema */
.icon-btn{
    background:none; border:none; color:var(--text-primary);
    font-size:1.2rem; cursor:pointer; padding:.5rem; border-radius:50%;
    transition: background-color var(--transition-fast);
}
.icon-btn:hover{ background-color: var(--border-color); }


/* Botón del tema */
.icon-btn{
    background: none; border: 1.5px solid var(--primary-color);
    color: var(--primary-color);
    width: 42px; height: 42px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: .5rem; cursor: pointer;
}
.icon-btn:hover{ background: color-mix(in srgb, var(--primary-color) 12%, transparent); }

/* Mostrar icono según tema actual */
.icon-sun, .icon-moon{ display: none; }
[data-theme="light"] .icon-sun{ display: inline-block; }
[data-theme="dark"]  .icon-moon{ display: inline-block; }

/* Proyectos: pulido móvil */
@media (max-width: 576px){
    .project-image{ height: 140px; object-position: top; }
    .project-content{ padding: .9rem 1rem; gap: .5rem; }
    .project-content h3{ font-size: 1.1rem; }
    .tech-stack span{ font-size: .8rem; padding: .24rem .5rem; }
    .project-links .btn{ width: 100%; justify-content: center; } /* tap target cómodo */
    .project-content > p:first-of-type{ -webkit-line-clamp: 2; }  /* aún más compacto */
}





/* === Dropdown de Descargas (CV + Dossier) === */
.docs-group { position: relative; }
.docs-toggle { display: inline-flex; align-items: center; gap: .5rem; }
.docs-toggle .caret { transition: transform .2s ease; }

.docs-group.open .docs-toggle .caret { transform: rotate(180deg); }

/* Contenedor del menú */
.docs-menu{
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    min-width: 240px;
    padding: .5rem;
    margin: 0;
    list-style: none;
    background: var(--bg-elev-2, #111418);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    display: none;
    z-index: 60;
}

/* Mostrar cuando el grupo está abierto o tiene foco */
.docs-group.open .docs-menu,
.docs-group:focus-within .docs-menu { display: block; }

/* Items */
.docs-item{
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .65rem;
    border-radius: 10px;
    color: var(--text, #e6eaf2);
    text-decoration: none;
    white-space: nowrap;
}

.docs-item:hover,
.docs-item:focus-visible{
    background: rgba(255,255,255,.06);
    outline: none;
}

.menu-sep{
    height: 1px;
    margin: .35rem .25rem;
    background: rgba(255,255,255,.08);
    border-radius: 1px;
}

/* Pequeños ajustes responsivos para que no se descuadre en móvil */
@media (max-width: 640px){
    .docs-menu{
        right: 0;
        min-width: 220px;
    }
}