/* Elegant Dark Blue & Gray Theme */
:root {
    --primary-blue: #1e293b;
    --secondary-blue: #334155;
    --accent-blue: #475569;
    --light-blue: #64748b;
    --pale-blue: #94a3b8;
    --dark-navy: #0f172a;
    --charcoal: #1a202c;
    --slate-gray: #2d3748;
    --text-primary: #f8fafc;
    --text-secondary: #e2e8f0;
    --text-muted: #cbd5e1;
    --text-dark: #1e293b;
    --white: #ffffff;
    --off-white: #f8fafc;
    --light-gray: #f1f5f9;
    --border-color: #334155;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.15);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.15);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.25), 0 4px 6px -4px rgb(0 0 0 / 0.2);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.25);
    --gradient-primary: linear-gradient(135deg, var(--dark-navy) 0%, var(--primary-blue) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
    --gradient-accent: linear-gradient(135deg, var(--secondary-blue) 0%, var(--accent-blue) 100%);
}

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

body {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--text-dark);
    background-color: var(--off-white);
    line-height: 1.75;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: -0.01em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Header Styles */
header {
    background: var(--gradient-primary);
    padding: 0;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(15, 23, 42, 0.08);
    position: relative;
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(20px);
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    min-height: 90px;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 0.25rem;
    padding: 0;
}

nav ul li a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    letter-spacing: -0.005em;
    text-transform: uppercase;
}

nav ul li a:hover {
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-primary);
    transform: translateY(-2px);
    backdrop-filter: blur(20px);
}

nav ul li a.active {
    color: var(--text-primary);
    font-weight: 500;
    border-bottom: 2px solid var(--text-primary);
    background: transparent;
}

/* Top Right Container */
.top-right-container {
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.top-right-container > *{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.language-button {
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-secondary);
    border: 1px solid rgba(148, 163, 184, 0.15);
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    font-size: 12px;
    font-weight: 400;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.language-button:hover {
    background: rgba(148, 163, 184, 0.15);
    border-color: rgba(148, 163, 184, 0.25);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.linkedin-logo {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(0) saturate(100%) invert(15%) sepia(25%) saturate(1200%) hue-rotate(200deg) brightness(90%) contrast(120%);
    padding: 3px;
    background: rgba(148, 163, 184, 0.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(148, 163, 184, 0.15);
}

.linkedin-logo:hover {
    transform: translateY(-3px) scale(1.08);
    filter: brightness(0) saturate(100%) invert(20%) sepia(35%) saturate(1400%) hue-rotate(200deg) brightness(95%) contrast(125%);
    background: rgba(148, 163, 184, 0.15);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.2);
}

/* ---------- LINKEDIN LOGO ─ Match language-button ---------- */
.top-right-container .linkedin-logo{
    /* mismo “cuerpo” que el botón */
    width: 2.375rem;           /* 38 px → altura real del botón */
    height: 2.375rem;
    border-radius: 10px;       /* igual que .language-button */
    padding: 0;                /* fuera el relleno extra */
    object-fit: contain;       /* evita deformaciones */
    filter: none;              /* mostramos colores reales */
    transition: all .3s cubic-bezier(.4,0,.2,1);
}

/* efecto hover gemelo (opcional) */
.top-right-container .linkedin-logo:hover{
    transform: translateY(-2px) scale(1.05);
    background: rgba(148,163,184,.15);
    box-shadow: 0 4px 12px rgba(15,23,42,.15);
}


/* Hamburger Menu */
.hamburger-menu {
    display: none;
    font-size: 20px;
    cursor: pointer;
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    padding: 0.75rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    background: rgba(148, 163, 184, 0.05);
    backdrop-filter: blur(20px);
}

.hamburger-menu:hover {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-primary);
    transform: translateY(-50%) scale(1.05);
}


.hero {
  height: 115vh;

  /* ⬇️  Un pelín de “zoom‑out”  */
  background-image: url('foto3.1.jpg') !important;
  background-size: cover !important;
  /* Si en móviles quieres volver a cover, añade media‑query abajo. */

  background-position: center !important;
  background-repeat: no-repeat !important;

  /* Centrado del contenido (mantén esto) */
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero .overlay {
  text-align: center;
  color: var(--text-primary);
  max-width: 1000px;
  padding: 4rem;
  transform: translateY(-5vh);
}


.hero h1 {
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 200;
    margin-bottom: 2rem;
    letter-spacing: -0.04em;
    animation: fadeInUp 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    line-height: 1.1;
}

.hero p {
    font-size: clamp(1.375rem, 2.5vw, 2rem);
    margin-bottom: 3rem;
    opacity: 0.92;
    font-weight: 300;
    letter-spacing: -0.02em;
    animation: fadeInUp 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
    color: var(--charcoal);
    line-height: 1.4;
}

.btn {
    display: inline-block;
    background: var(--gradient-secondary);
    color: var(--text-primary);
    padding: 1.25rem 3rem;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.3);
    animation: fadeInUp 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid rgba(148, 163, 184, 0.15);
    backdrop-filter: blur(20px);
}

.btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.4);
    background: var(--gradient-accent);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Section Styles */
section {
    padding: 8rem 2rem;
    background-color: var(--off-white);
}

section:nth-child(even) {
    background: linear-gradient(135deg, var(--light-gray) 0%, rgba(248, 250, 252, 0.8) 100%);
}

.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 1rem;
}

.sobre-mi-container {
    max-width: 950px;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
}

/* Typography */
h1, h2, .titulo-gris {
    color: var(--primary-blue);
    font-size: clamp(2.75rem, 5.5vw, 4.5rem);
    font-weight: 100;
    text-align: center;
    margin-bottom: 4rem;
    letter-spacing: -0.06em;
    position: relative;
    line-height: 1.2;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
}

h1::after, h2::after, .titulo-gris::after {
    content: '';
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: var(--gradient-secondary);
    border-radius: 1px;
}

h3 {
    color: var(--primary-blue);
    font-size: 2.125rem;
    font-weight: 200;
    margin-bottom: 1.5rem;
    letter-spacing: -0.035em;
    line-height: 1.3;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
}

p {
    font-size: 1.25rem;
    line-height: 1.85;
    color: var(--accent-blue);
    margin-bottom: 2rem;
    text-align: left;
    font-weight: 275;
    letter-spacing: -0.015em;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
}

.container p, .sobre-mi-container p {
    text-align: center;
}

/* Profile Image */
.profile-img {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    margin: 3rem auto;
    display: block;
    object-fit: cover;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
    border: 6px solid var(--secondary-blue);
    transition: all 0.3s ease;
}

.profile-img:hover {
    transform: scale(1.03);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.4);
}

/* Education and Experience Lists */
.education-list, .experience-list {
    background: var(--gradient-primary);
    padding: 4rem;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
    margin-top: 3rem;
    border: 1px solid var(--border-color);
    backdrop-filter: blur(20px);
}

.education-item, .experience-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 4rem;
    background: rgba(148, 163, 184, 0.06);
    padding: 3rem;
    border-radius: 20px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(148, 163, 184, 0.12);
    transition: all 0.3s ease;
}

.education-item:hover, .experience-item:hover {
    background: rgba(148, 163, 184, 0.1);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.2);
}

.education-logo, .experience-logo {
    width: 240px;
    height: 240px;
    margin-right: 3rem;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.2);
    flex-shrink: 0;
    border: 2px solid rgba(148, 163, 184, 0.15);
}

.education-content, .experience-content {
    flex: 1;
}

.education-item h2, .experience-item h2 {
    color: var(--text-primary);
    font-size: 2.125rem;
    font-weight: 200;
    margin-bottom: 1rem;
    text-align: left;
    letter-spacing: -0.035em;
    line-height: 1.3;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
}

.education-item h2::after, .experience-item h2::after {
    display: none;
}

.education-date, .experience-date {
    color: var(--pale-blue);
    font-weight: 400;
    font-size: 13px;
    margin-bottom: 1.5rem;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.education-item p, .experience-item p {
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
    text-align: left;
    font-size: 1.1875rem;
    line-height: 1.8;
    font-weight: 275;
}

.experience-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.experience-item ul li {
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 1.25rem;
    color: var(--text-secondary);
    text-align: left;
    font-size: 1.1875rem;
    line-height: 1.8;
    font-weight: 275;
}

.experience-item ul li::before {
    content: '◦';
    position: absolute;
    left: 0.75rem;
    color: var(--pale-blue);
    font-size: 1.5rem;
    font-weight: 300;
    top: -0.125rem;
}

/* Projects Section */
#proyectos {
    background: linear-gradient(135deg, var(--light-gray) 0%, rgba(248, 250, 252, 0.6) 100%);
}

.project-item {
    background: var(--white);
    margin-bottom: 4.5rem;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(51, 65, 85, 0.06);
}

.project-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15);
}

.project-content {
    padding: 3.5rem;
}

.project-item h3 {
    color: var(--primary-blue);
    font-size: 2.5rem;
    font-weight: 200;
    margin-bottom: 1.75rem;
    text-align: center;
    letter-spacing: -0.04em;
    line-height: 1.2;
}

.project-item p {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--accent-blue);
    font-size: 1.25rem;
    line-height: 1.8;
    font-weight: 275;
}

.dashboard-img {
    width: 100%;
    max-width: 900px;
    margin: 3rem auto;
    display: block;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
    transition: all 0.3s ease;
    border: 1px solid rgba(51, 65, 85, 0.08);
}

.dashboard-img:hover {
    transform: scale(1.03);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.2);
}

.project-item iframe {
    width: 100%;
    height: 600px;
    border: none;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
    margin: 3rem 0;
    border: 1px solid rgba(51, 65, 85, 0.08);
}

.project-item a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 400;
    display: inline-block;
    padding: 1.125rem 2.5rem;
    background: var(--gradient-secondary);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 2rem;
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.15);
}

.project-item a:hover {
    background: var(--gradient-accent);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
}

/* Contact Section */
#contacto {
    background: linear-gradient(135deg, var(--light-gray) 0%, rgba(248, 250, 252, 0.8) 100%);
}

#contacto a {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 400;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    padding-bottom: 3px;
}

#contacto a:hover {
    border-bottom-color: var(--primary-blue);
    color: var(--secondary-blue);
}

/* Images */
.images {
    display: flex;
    gap: 3rem;
    margin: 4rem 0;
    justify-content: center;
    width: 100%;
}

.img-large {
    flex: 1;
    max-width: none;
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(51, 65, 85, 0.08);
    transition: all 0.3s ease;
}

.img-large:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.2);
}

/* Dividers */
hr {
    border: none;
    height: 0.5px;
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.3), transparent);
    margin: 4rem 0;
}

/* Footer */
footer {
    background: var(--gradient-primary);
    text-align: center;
    padding: 3rem 0;
    color: var(--text-secondary);
    margin-top: auto;
    border-top: 1px solid var(--border-color);
}

footer p {
    margin: 0;
    font-size: 14px;
    opacity: 0.8;
    letter-spacing: 0.01em;
    font-weight: 300;
}

footer a {
    color: var(--pale-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hamburger-menu {
        display: block;
    }

    nav ul {
        display: none;
        flex-direction: column;
        width: 100%;
        background: var(--secondary-blue);
        position: absolute;
        top: 100%;
        left: 0;
        box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25);
        z-index: 1000;
        padding: 2rem 0;
        border-top: 1px solid var(--border-color);
        backdrop-filter: blur(20px);
    }

    nav ul.active {
        display: flex;
    }

    nav ul li {
        width: 100%;
        text-align: center;
    }

    nav ul li a {
        display: block;
        padding: 1.5rem;
        border-radius: 0;
        font-size: 14px;
    }

    .top-right-container {
        position: static;
        transform: none;
        flex-direction: column;
        gap: 1.5rem;
        margin-top: 2rem;
        padding: 2rem;
        background: rgba(148, 163, 184, 0.08);
        border-top: 1px solid var(--border-color);
        backdrop-filter: blur(20px);
    }

    .education-item, .experience-item {
        flex-direction: column;
        text-align: center;
        padding: 2.5rem;
    }

    .education-logo, .experience-logo {
        margin: 0 auto 2rem auto;
        width: 160px;
        height: 160px;
    }

    .education-item h2, .experience-item h2 {
        text-align: center;
    }

    .education-item p, .experience-item p {
        text-align: center;
    }

    .experience-item ul li {
        text-align: center;
    }

    .images {
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
    }

    .img-large {
        width: 100%;
        height: 280px;
    }

    section {
        padding: 5rem 1.5rem;
    }

    .container, .sobre-mi-container {
        padding: 0 1rem;
    }

    .education-list, .experience-list {
        padding: 2.5rem;
    }

    .profile-img {
        width: 280px;
        height: 280px;
    }
}

@media (max-width: 480px) {
    .hero {
        height: 90vh;
    }

    .hero .overlay {
        padding: 2rem;
    }

    .education-list, .experience-list {
        padding: 2rem;
    }

    .education-item, .experience-item {
        padding: 2rem;
    }

    .project-content {
        padding: 2.5rem;
    }

    nav {
        min-height: 80px;
    }

    .profile-img {
        width: 240px;
        height: 240px;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus styles for accessibility */
a:focus, button:focus {
    outline: 2px solid var(--pale-blue);
    outline-offset: 2px;
}

/* Loading animation for images */
img {
    transition: opacity 0.3s ease;
}

img:not([src]) {
    opacity: 0;
}

/* Enhanced animations */
@media (prefers-reduced-motion: no-preference) {
    .education-item, .experience-item, .project-item {
        animation: fadeInUp 0.6s ease-out;
    }
    
    .education-item:nth-child(2) { animation-delay: 0.1s; }
    .education-item:nth-child(3) { animation-delay: 0.2s; }
    .experience-item:nth-child(2) { animation-delay: 0.1s; }
    .experience-item:nth-child(3) { animation-delay: 0.2s; }
    .project-item:nth-child(2) { animation-delay: 0.1s; }
    .project-item:nth-child(3) { animation-delay: 0.2s; }
}

@media (max-width:640px){

    /* HERO: ocupa la pantalla sin dejar barras blancas */
    .hero{
        height:100vh;
        background-size:cover;            /* sin zoom‑out en pantallas chicas */
        padding:0 1rem;                   /* un respiro lateral para el texto */
    }

    .hero h1{
        font-size:clamp(2rem,8vw,3rem);   /* título más compacto             */
    }

    .hero p{
        font-size:clamp(1rem,4.5vw,1.25rem);
        margin-bottom:2rem;
    }

    /* DASHBOARD: ratio más cuadrado y radios menores   */
    .project-item iframe,
    .project-item .dashboard-img{
        aspect-ratio:4/3;
        border-radius:12px;
        box-shadow:0 6px 20px rgba(15,23,42,.15);
    }
}

/* =========================================================
   NAVEGACIÓN RESPONSIVE  –  MENÚ HAMBURGUESA
   ========================================================= */

/* 1) Estilo base del menú y del botón -------------------- */
nav{
    position:relative;                 /* para posicionar el dropdown   */
}

#menu{
    display:flex;
    gap:2rem;
    list-style:none;
    padding:0;
    margin:0;
}

/* Icono hamburguesa (☰) oculto en escritorio */
.hamburger-menu{
    display:none;                      /* se mostrará sólo en móvil     */
    font-size:2rem;
    cursor:pointer;
    user-select:none;
}

/* 2) Breakpoint – pantallas < 768 px ---------------------- */
@media (max-width:768px){

    /* Oculta la lista por defecto */
    #menu{
        display:none;                  /* se mostrará al activar */
        flex-direction:column;
        position:absolute;
        top:100%;                      /* justo bajo <nav>       */
        left:0;
        width:100%;
        background:rgba(15,23,42,.96); /* fondo oscuro y opacidad */
        padding:1rem 0;
        text-align:center;
        z-index:10;
    }

    /* Enséñala cuando JS añade .active */
    #menu.active{
        display:flex;
    }

    /* Muestra el botón hamburguesa */
    .hamburger-menu{
        display:block;
        color:var(--text-primary, #fff);
    }

    /* Ajusta cada enlace para que no queden pegados */
    #menu li a{
        display:block;
        padding:1rem 0;
    }
    .top-right-container {
        flex-direction: row !important; /* Cambia de column a row */
        gap: 0.5rem !important; /* Espacio reducido entre elementos */
        position: absolute !important; /* Vuelve a posicionar para alinear con hamburguesa */
        top: 50% !important;
        right: 4rem !important; /* Ajusta posición para dejar espacio al hamburguesa */
        transform: translateY(-50%) !important;
        margin-top: 0 !important;
        padding: 0 !important;
        background: none !important;
        border-top: none !important;
    }

    /* Ajustar hamburguesa para que quepa en la misma línea */
    .hamburger-menu {
        position: absolute !important;
        right: 1rem !important; /* Posición ajustada */
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 1.6rem !important; /* Tamaño reducido */
        padding: 0.25rem 0.5rem !important; /* Padding más fino */
    }

    /* Hacer el menú desplegable más fino */
    #menu.active {
        padding: 0.5rem 0 !important; /* Padding vertical reducido */
        background: rgba(15, 23, 42, 0.9) !important; /* Fondo más ligero */
    }

    #menu li a {
        padding: 0.8rem 0 !important; /* Padding de items más fino para pestañas delgadas */
        font-size: 13px !important; /* Tamaño de texto reducido */
    }

    /* Hacer la barra superior más delgada */
    header {
        padding: 0.5rem 0 !important; /* Padding reducido */
    }

    nav {
        min-height: 60px !important; /* Altura mínima más baja (antes 90px) */
        padding: 0 1rem !important;
    }
    /* Centrar texto en párrafos, listas, títulos y otros elementos comunes */
    body, p, li, h1, h2, h3, section, .hero p, .education-item p, .experience-item p, .project-item p, .education-date, .experience-date {
        text-align: center !important; /* Fuerza el centrado horizontal de todo el texto */
    }

    /* Ajustes específicos para listas en experiencia y otros para mantener legibilidad */
    .experience-item ul li, .education-item ul li {
        text-align: center !important; /* Centra items de listas */
        padding-left: 0 !important; /* Elimina padding izquierdo para centrado simétrico */
    }

    /* Centrar descripciones y contenidos en secciones */
    .education-content, .experience-content, .project-content {
        text-align: center !important;
    }
    .hero p {
        text-align: center !important; /* Alinea al centro en móvil */
        margin: 0 auto !important; /* Centra el bloque */
        max-width: 90% !important; /* Evita que se desborde */
    }

    /* Reducir tamaño de títulos en Experiencia, Formación y Proyectos */
    section h2, .experience-item h2, .education-item h2, .project-item h3 {
        font-size: clamp(1.6rem, 5vw, 2.2rem) !important; /* Tamaño más pequeño y responsivo para móviles */
        line-height: 1.2 !important; /* Mejora la legibilidad */
    }

    /* Centrar fechas en Experiencia y Formación */
    .experience-date, .education-date {
        text-align: center !important; /* Alinea al centro */
        display: block !important; /* Asegura que sea un bloque centrado */
        margin: 0 auto 1rem auto !important; /* Espacio y centrado */
    }
    .experience-item p, .experience-item ul li,
    .education-item p, .education-item ul li,
    .project-item p, .project-item ul li {
        text-align: center !important; /* Centra el texto principal en cada apartado */
    }

    /* Ajustes para fechas y otros elementos si es necesario, pero manteniendo solo textos principales centrados */
    .experience-date, .education-date {
        text-align: center !important; /* Mantiene fechas centradas como en ajustes previos */
    }
    section#formacion p,
    section#experiencia p,
    section#proyectos p {
        text-align: center !important;
    }
    section#formacion p, section#experiencia p, section#proyectos p,
    section#formacion li, section#experiencia li, section#proyectos li {
        text-align: center !important;  /* Fuerza centrado en móvil */
    }

    /* Ajustes adicionales para clases comunes en tus secciones */
    .education-item p, .experience-item p, .project-item p,
    .education-item li, .experience-item li, .project-item li {
        text-align: center !important;
    }
    section#contacto p,
    section#contacto li {
        text-align: center !important;  /* Fuerza centrado en móvil */
    }
    .experience-item ul li::before {
        content: none !important;  /* Quita el '◦' en móvil */
    }

    /* Ajuste opcional para listas sin bullets, manteniendo alineación */
    .experience-item ul li {
        padding-left: 0 !important;  /* Elimina padding izquierdo para evitar espacios vacíos */
        text-align: left !important;  /* Mantiene alineación izquierda si es necesario, o cambia a center si prefieres */
    }
}

/* =========================================================
   AJUSTE RESPONSIVE EXTRA (≤ 640 px)
   ========================================================= */

@media (max-width: 640px){

  /* ---------- A) HERO : cabecera+botones más compactos ---------- */

  .hero{
      height: 100vh;
      background-size: cover;
      padding: 0 1rem;              /* menos margen lateral           */
  }

  /* overlay = contenedor de ENGLISH + LinkedIn */
  .hero .overlay{
      padding: 2rem 1rem;           /* antes 4rem – lo hacemos +fino  */
  }

  /* Botón idioma  + icono social centrados y pegados            */
  .hero .overlay .btn,
  .hero .overlay .social-link{
      margin: .5rem auto;           /* (antes 1-1.5 rem)              */
  }

  /* ---------- B) BARRA DE NAVEGACIÓN (hamburguesa) ---------- */

  nav{
      padding: .4rem 1rem;          /* alto total + bajito            */
  }
  .hamburger-menu{
      font-size: 1.6rem;            /* icono algo menor               */
      padding: .25rem .4rem;
  }

  /* dropdown más fino */
  #menu{
      padding: .5rem 0;
  }
  #menu li a{
      padding: .8rem 0;             /* líneas menos altas             */
  }

  /* ---------- C) SECCIONES GENERALES  (Experiencia…) ---------- */

  /* contenedor genérico de sección */
  .section{
      padding: 3rem 1rem;           /* estrecha márgenes horizontales */
  }

  /* título “Experiencia / Educación / Skills …” */
  .section-title{
      font-size: clamp(1.75rem, 7vw, 2.25rem); /* más pequeño           */
      line-height: 1.15;
      margin-bottom: 1.5rem;
  }

  /* párrafos y listas dentro de la sección */
  .section p,
  .section li{
      font-size: clamp(.9rem, 4.2vw, 1.05rem);
      line-height: 1.5;
  }

  /* ---------- D) TARJETAS / DASHBOARD / MOCKUPS ---------- */

  .project-item iframe,
  .project-item .dashboard-img{
      aspect-ratio: 4 / 3;
      border-radius: 12px;
      box-shadow: 0 6px 20px rgba(15,23,42,.15);
  }
}
/* =========================================================
   FIN DE ESTILO RESPONSIVE
   ========================================================= */
   /* ================  MOBILE TWEAKS  ≤ 640 px  ================ */
@media (max-width:640px){

  /* ---------- HEADER / NAV  ---------- */
  header{                /* contenedor del logo + botones */
      padding:.4rem 1rem;
  }
  .hamburger-menu{
      font-size:1.6rem;
      padding:.25rem .4rem;
  }
  nav ul{
      padding:.4rem 0;   /* lista desplegable más fina    */
  }
  nav ul li a{
      padding:.7rem 0;
  }

  /* ---------- HERO ---------- */
  .hero{
      height:100vh;
      background-size:cover;
      padding:0 1rem;
  }
  .hero .overlay{
      padding:2rem 1rem;         /* menos alto */
  }
  .hero h1{
      font-size:clamp(2rem,8vw,3rem);
  }
  .hero p{
      font-size:clamp(.95rem,4.5vw,1.2rem);
      margin-bottom:2rem;
  }

  /* ---------- SECCIONES (Experiencia, Educación, etc.) ---------- */
  section{                       /* cualquier <section> */
      padding:3rem 1rem;         /* márgenes laterales más finos */
  }
  section h2{                    /* títulos de sección */
      font-size:clamp(1.6rem,7vw,2.2rem);
      line-height:1.15;
      margin-bottom:1.2rem;
  }
  section p,
  section li{
      font-size:clamp(.9rem,4.2vw,1.05rem);
      line-height:1.5;
  }

  /* ---------- PROYECTOS / DASHBOARD ---------- */
  .project-item iframe,
  .project-item img{
      aspect-ratio:4/3;
      border-radius:12px;
      box-shadow:0 6px 20px rgba(15,23,42,.15);
  }
  .hero .overlay {
    display: flex;               /* de columna a fila */
    justify-content: center;     /* centrar horizontal */
    gap: 1rem;                   /* espacio entre ambos */
    flex-wrap: wrap;             /* por si cabe muy justo */
  }
  .hero .overlay .btn,
  .hero .overlay .social-link {
    margin: 0 !important;        /* eliminamos el margin auto */
  }

  /* 2) Texto de la sección “Experiencia” alineado a la izquierda */
  /* Si quieres sólo en esa sección, sustituye `section` por `#experiencia` */
  section#experiencia p,
  section#experiencia li {
    text-align: left !important;
  }
  .top-right-container {
    display: flex !important;        /* pasa a flex-row */
    align-items: center;             /* alinea icono y botón */
    justify-content: center;         /* centra el conjunto */
    gap: 0.5rem;                     /* espacio reducido entre ellos */
  }

  /* Quita márgenes que los apilaban */
  .top-right-container .language-button,
  .top-right-container a[href*="linkedin.com"] {
    margin: 0 !important;
  }
  .hero .overlay {
    display: flex !important;           /* fila en lugar de columna */
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;             /* hueco estrecho entre ellos */
  }

  /* Quita márgenes que los apilaban */
  .hero .overlay .btn,
  .hero .overlay .social-link {
    margin: 0 !important;
  }

  /* Achica el botón “English” */
  .hero .overlay .btn {
    padding: 0.4rem 0.8rem !important;
    font-size: clamp(0.9rem, 4vw, 1.1rem) !important;
  }

  /* Achica el icono de LinkedIn */
  .hero .overlay .social-link img,
  .hero .overlay .social-link i {
    width: 1.6rem !important;
    height: auto !important;
    font-size: 1.6rem !important;       /* en caso de que sea un font‑icon */
  }
  /* Ajusta estos selectores a tus IDs o clases reales si son distintos */
  section#formacion p,
  section#formacion li,
  section#experiencia p,
  section#experiencia li,
  section#proyectos p,
  section#proyectos li,
  section#contacto p,
  section#contacto li {
    /* Mismo tamaño que usas en Sobre mí */
    font-size: clamp(0.85rem, 4vw, 1rem) !important;
    line-height: 1.4 !important;
    text-align: left !important;    /* deja el texto alineado a la izquierda */
  }
  section#experiencia,
  section#formacion,
  section#proyectos {
    /* antes tenías padding: 3rem 1rem; 
       ahora reducimos a 0.5rem para ganar ancho */
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Si además tienes un .container o .wrapper dentro de cada sección, 
     asegúrate de que no limite el ancho: */
  section#experiencia .container,
  section#formacion .container,
  section#proyectos .container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .top-right-container {
        right: 3.5rem !important; /* Ajuste fino para espacio */
        gap: 0.3rem !important;
    }

    .hamburger-menu {
        font-size: 1.4rem !important;
        right: 0.5rem !important;
    }

    nav {
        min-height: 50px !important; /* Aún más delgada en móviles pequeños */
    }
    /* Ajustes finos para mantener centrado en móviles pequeños */
    .hero p {
        font-size: clamp(1rem, 4vw, 1.25rem) !important; /* Reduce ligeramente el tamaño si es necesario */
    }

    /* Títulos aún más compactos en móviles pequeños */
    section h2, .experience-item h2, .education-item h2, .project-item h3 {
        font-size: clamp(1.4rem, 4.5vw, 2rem) !important;
    }

    /* Fechas centradas con más espacio en pantallas pequeñas */
    .experience-date, .education-date {
        font-size: 12px !important; /* Tamaño reducido para encajar mejor */
    }
    .experience-item p, .experience-item ul li,
    .education-item p, .education-item ul li,
    .project-item p, .project-item ul li {
        text-align: center !important;
        /*font-size: clamp(0.85rem, 4vw, 1rem) !important;  Tamaño responsivo con centrado */
    }
    section#formacion p, section#experiencia p, section#proyectos p,
    section#formacion li, section#experiencia li, section#proyectos li {
        text-align: center !important;
    }
    section#contacto p,
    section#contacto li {
        text-align: center !important;
    }
    .experience-item ul li {
        padding-left: 0 !important;
        margin-bottom: 1rem !important;  /* Espacio entre items para mejor legibilidad sin bullets */
    }
}