:root {
    --dark-navy: #0a192f;
    --navy: #112240;
    --light-navy: #233554;
    --lightest-navy: #303C55;
    --slate: #8892b0;
    --light-slate: #a8b2d1;
    --lightest-slate: #ccd6f6;
    --white: #e6f1ff;
    --green: #ff6464;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
    --fz-xxs: 12px;
    --fz-xs: 13px;
    --fz-sm: 14px;
    --fz-md: 16px;
    --fz-lg: 18px;
    --fz-xl: 20px;
    --fz-xxl: 22px;
    --fz-heading-sm: 38px;
    --fz-heading-md: 42px;
    --fz-heading-lg: clamp(50px, 8vw, 70px);
    --fz-heading-xl: clamp(55px, 8vw, 80px);
    --border-radius: 4px;
    --nav-height: 100px;
    --nav-scroll-height: 70px;
    --tab-height: 42px;
    --tab-width: 120px;
    --easing: cubic-bezier(0.645, 0.045, 0.355, 1);
    --transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    --hamburger-width: 30px;
    --hamburger-height: 24px;
    --hamburger-spacing: 4px;
    --hamburger-color: var(--green);
    --mobile-menu-speed: 0.3s;
    --mobile-menu-easing: ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--dark-navy);
    color: var(--light-slate);
    font-family: var(--font-sans);
    font-size: var(--fz-md);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    padding: 0 150px;
    margin: 0 auto;
    width: 100%;
    max-width: 1600px;
    padding-top: var(--nav-height);
}

section {
     padding: 200px 0;
     max-width: 1000px;
     margin: 0 auto;
     min-height: 80vh;
     scroll-margin-top: var(--nav-height);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--lightest-slate);
    font-weight: 600;
    margin-bottom: 1rem;
}

a {
    color: var(--green);
    text-decoration: none;
    transition: var(--transition);
}
a:hover {
   color: var(--green);
   opacity: 0.8;
   text-decoration: none;
}

.button {
    color: var(--green);
    background-color: transparent;
    border: 1px solid var(--green);
    border-radius: var(--border-radius);
    padding: 0.75rem 1.5rem;
    font-family: var(--font-mono);
    font-size: var(--fz-sm);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    display: inline-block;
}

.button:hover {
    background-color: rgba(100, 255, 218, 0.1);
    outline: none;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    padding: 0 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(10, 25, 47, 0.85);
    backdrop-filter: blur(10px);
    z-index: 10;
    transition: var(--transition);
    justify-content: space-between;
}

.desktop-nav {
    display: flex;
    align-items: center;
}

nav ul {
    display: flex;
    align-items: center;
    list-style: none;
}

nav ul li {
    margin: 0 15px;
    font-family: var(--font-mono);
    font-size: var(--fz-xs);
}

nav ul li a {
    color: var(--lightest-slate);
    counter-increment: item 1;
    padding: 10px;
}

nav ul li a::before {
    content: '.';
    margin-right: 5px;
    color: var(--green);
    font-size: var(--fz-xs);
}
 nav ul li a:hover {
    color: var(--green);
 }

.mobile-nav-button-container {
    display: none;
    position: fixed;
    top: 15px;
    right: 25px;
    z-index: 12;
}

.hamburger-button {
    display: inline-block;
    padding: 15px;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
    position: relative;
    z-index: 12;
}
.hamburger-button:hover {
    opacity: 0.7;
}

.hamburger-box {
    width: var(--hamburger-width);
    height: var(--hamburger-height);
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
    position: absolute;
    width: var(--hamburger-width);
    height: 2px;
    border-radius: 4px;
    background-color: var(--hamburger-color);
    transition: transform 0.22s var(--mobile-menu-easing);
}
.hamburger-inner::before,
.hamburger-inner::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    width: var(--hamburger-width);
    height: 2px;
    border-radius: 4px;
    background-color: var(--hamburger-color);
    transition: transform 0.15s ease;
}
.hamburger-inner::before {
    top: calc(-1 * (var(--hamburger-height) / 2 - var(--hamburger-spacing) * 1.5));
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.hamburger-inner::after {
    bottom: calc(-1 * (var(--hamburger-height) / 2 - var(--hamburger-spacing) * 1.5));
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s var(--mobile-menu-easing);
}

/* Opcional: Ocultar botón hamburguesa cuando el menú está abierto */
body.menu-open .mobile-nav-button-container {
    opacity: 0.5;
    pointer-events: none;
}

/* Estilo inicial para las secciones ocultas */
.section-hidden {
    opacity: 0;
    transform: translateX(-100px); /* Barrido desde la izquierda */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Estilo para las secciones visibles */
.section-visible {
    opacity: 1;
    transform: translateX(0); /* Posición final */
}

/* Estilo inicial para header y aside ocultos */
.hidden {
    opacity: 0;
    transform: translateY(-50px); /* Barrido desde arriba */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Estilo para header y aside visibles */
.visible {
    opacity: 1;
    transform: translateY(0); /* Posición final */
}

/* --- Estilos Botón de Cierre (Nuevo) --- */
.close-menu-button {
    position: absolute;
    top: 15px;
    right: 25px;
    padding: 10px;
    background-color: transparent;
    border: none;
    color: var(--green);
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    z-index: 12;
    transition: var(--transition);
}
.close-menu-button:hover {
    color: var(--white);
    opacity: 0.8;
}
.close-menu-button span {
    display: block;
    transform: translateY(-2px);
}

.mobile-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: min(75vw, 400px);
    height: 100vh;
    background-color: var(--light-navy);
    z-index: 11;
    padding: 3rem 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--mobile-menu-speed) var(--mobile-menu-easing),
                visibility var(--mobile-menu-speed) var(--mobile-menu-easing);
}

.mobile-menu.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--mobile-menu-speed) var(--mobile-menu-easing),
                visibility 0s linear 0s;
}

.mobile-menu nav {
    text-align: center;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.mobile-menu nav ul {
    display: block !important;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.mobile-menu nav ul li {
    position: relative;
    margin: 0 auto 2rem;
    width: 100%;
}
.mobile-menu nav ul li:last-child {
    margin-bottom: 0;
}

.mobile-menu nav ul li a {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--fz-lg);
    font-weight: 600;
    padding: 0.25rem 0;
    color: var(--lightest-slate);
    text-decoration: none;
    width: 100%;
    transition: var(--transition);
}
.mobile-menu nav ul li a:hover,
.mobile-menu nav ul li a:focus {
    color: var(--green);
}

.mobile-menu .resume-button {
    padding: 1rem 2.5rem;
    margin: 3rem auto 0;
    width: max-content;
    font-size: var(--fz-sm);
}

.logo a {
    font-family: var(--font-mono);
    font-size: var(--fz-xl);
    font-weight: bold;
    color: var(--green);
    text-decoration: none;
    border: 2px solid var(--green);
    padding: 5px 10px;
    display: inline-block;
}



.resume-button {
    margin-left: 20px;
    font-size: var(--fz-xs);
    padding: 0.5rem 1rem;
}

.side {
    position: fixed;
    bottom: 0;
    width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
}
.side.left {
    left: 40px;
}
.side.right {
    right: 40px;
}

.side::after {
    content: '';
    display: block;
    width: 1px;
    height: 90px;
    margin-top: 20px;
    background-color: var(--light-slate);
}

.side ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.side li {
    margin-bottom: 20px;
}

.side a {
    display: inline-block;
     transition: var(--transition);
}
.side a:hover {
     transform: translateY(-3px);
     color: var(--green);
}

.side svg {
    width: 20px;
    height: 20px;
    fill: var(--light-slate);
     transition: var(--transition);
}
.side a:hover svg {
    fill: var(--green);
}

.side .email a {
    font-family: var(--font-mono);
    font-size: var(--fz-xs);
    color: var(--light-slate);
    writing-mode: vertical-rl;
    letter-spacing: 0.1em;
    padding-bottom: 20px;
}
 .side .email a:hover {
     color: var(--green);
     transform: none;
 }

#hero {
    padding-top: 0;
    padding-bottom: 100px;
     min-height: calc(90vh - var(--nav-height));
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
      scroll-margin-top: 0;
    position: relative;
}

#hero .greeting {
    font-family: var(--font-mono);
    font-size: var(--fz-md);
    color: var(--green);
    margin-bottom: 20px;
}

#hero h1 {
    font-size: var(--fz-heading-lg);
    color: var(--lightest-slate);
    margin-bottom: 10px;
    line-height: 1.1;
    padding-left: 0;
}

#hero h2 {
    font-size: var(--fz-heading-md);
    color: var(--slate);
    margin-bottom: 25px;
    line-height: 1.1;
     font-weight: 600;
     padding-left: 0;
}

#hero p {
    max-width: 700px;
    color: var(--slate);
    margin-bottom: 50px;
    font-size: var(--fz-lg);
}

section h2 {
    font-family: var(--font-mono);
    font-size: var(--fz-heading-md);
    color: var(--lightest-slate);
    margin-bottom: 2rem;
    position: relative;
    padding-left: 40px;
}

section h2::before {
    counter-increment: section;
    content: '.';
    position: absolute;
    left: 0;
    top: 5px;
    color: var(--green);
    font-size: var(--fz-xl);
    font-weight: normal;
}

 section h2::after {
    content: '';
    display: block;
    position: relative;
    top: -5px;
    width: 500px;
    height: 1px;
    margin-left: 25px;
    background-color: var(--lightest-navy);
 }

 /* --- Estilos para la Sección About --- */

#about .about-content {
    display: grid; /* Usando Grid para layout */
    grid-template-columns: 3fr 2fr; /* Proporción 3:2 para texto/imagen */
    gap: 50px; /* Espacio entre texto e imagen */
    align-items: flex-start; /* Alinea los items al inicio */
}

#about .about-text p {
    margin-bottom: 15px; /* Espacio entre párrafos */
    color: var(--slate);
    font-size: var(--fz-lg); /* Tamaño de fuente ligeramente mayor */
     max-width: none; /* Anula el max-width general si lo hubiera */
}

#about .about-text .highlight {
    color: var(--green); /* Resalta el nombre de la universidad */
}

#about .skills-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 200px)); /* 2 columnas */
    gap: 0 10px; /* Espacio vertical 0, horizontal 10px */
    padding: 0;
    margin: 20px 0 0 0;
    overflow: hidden;
    list-style: none;
}

#about .skills-list li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 20px;
    font-family: var(--font-mono);
    font-size: var(--fz-sm); /* Un poco más pequeño */
    color: var(--slate);
}

#about .skills-list li::before {
    content: '▸'; /* Flecha como viñeta */
    position: absolute;
    left: 0;
    top: 1px; /* Ajuste vertical */
    color: var(--green);
    font-size: var(--fz-sm);
    line-height: 12px;
}

#about .about-image {
    position: relative;
    max-width: 300px; /* Ancho máximo del contenedor de imagen */
    grid-column: 2 / 3; /* Asegura que esté en la segunda columna del grid */
     margin-left: auto; /* Empuja hacia la derecha si hay espacio */
}

#about .image-wrapper {
    position: relative;
    width: 100%;
    border-radius: var(--border-radius);
    background-color: var(--green); /* Fondo para la foto */
    transition: var(--transition);
}
 #about .image-wrapper:hover,
 #about .image-wrapper:focus {
    background: transparent;
     outline: 0;
 }


#about .image-wrapper::before { /* Crea el borde exterior */
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
    transition: var(--transition);
    top: 0;
    left: 0;
     border: 2px solid var(--green);
     z-index: 1; /* Debajo de la imagen pero sobre el ::after */
}

 #about .image-wrapper::after { /* Crea el desplazamiento/sombra */
     content: '';
     display: block;
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: var(--border-radius);
     transition: var(--transition);
     border: 2px solid var(--green);
     top: 15px;  /* Desplazamiento vertical */
     left: 15px; /* Desplazamiento horizontal */
     z-index: 0; /* Detrás de todo */
 }

#about .image-wrapper:hover::after {
     top: 10px;
     left: 10px;
}


#about .about-image img {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    /* Mezcla para efecto de color (opcional, ajusta si es necesario) */
    mix-blend-mode: multiply;
    filter: grayscale(100%) contrast(1);
    transition: var(--transition);
    z-index: 2; /* Encima de los pseudo-elementos */
}

 #about .image-wrapper:hover img {
     mix-blend-mode: normal;
     filter: none;
 }


** --- Estilos para la Sección Experience --- **

 #experience {
    max-width: 750px; /* Un poco más de ancho */
    min-height: 340px; /* Altura mínima para evitar colapso */
}

.experience-tabs {
    display: flex;
    gap: 30px; /* Aumenta el espacio entre lista y panel */
    position: relative;
}

.tab-list {
    position: relative;
    /* width: max-content; */ /* Quitado para que sea más flexible */
    min-width: 180px; /* Ancho mínimo fijo más grande */
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
     flex-shrink: 0; /* Evita que la lista se encoja */
}

.tab-button {
    display: inline-flex;
    align-items: center;
    width: 100%;
    background-color: transparent;
    color: var(--slate);
    font-family: var(--font-mono);
    font-size: var(--fz-xs);
    text-align: left;
    white-space: nowrap;
    border: none;
    border-left: 2px solid var(--lightest-navy);
    padding: 13px 20px; /* Ajustado padding */
    cursor: pointer;
    transition: var(--transition);
    height: var(--tab-height, 42px); /* Asegura altura constante */
}
.tab-button:hover,
.tab-button:focus {
     background-color: var(--light-navy);
     color: var(--green);
     outline: none;
}
.tab-button.active {
     color: var(--green);
     background-color: var(--light-navy);
     font-weight: 500;
     border-left-color: var(--green); /* Cambia el borde izquierdo directamente */
}
 /* Ocultar el highlight bar ya que su movimiento perfecto requiere JS */
 /* Si quieres mantenerlo estático, puedes descomentar y ajustar */
.tab-highlight {
    position: absolute;
     top: 0; /* Posición inicial */
     left: -2px; /* Alineado con el borde */
     z-index: 10;
     width: 2px;
     height: var(--tab-height, 42px);
     border-radius: var(--border-radius);
     background: var(--green);
     transition: transform 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
     transition-delay: 0.1s;
     /* El JS ajustará este transform */
     transform: translateY(0px); /* Inicialmente en la primera posición */
}


.tab-panels {
    flex-grow: 1; /* Ocupa el espacio restante */
    /* padding-left: 10px; */ /* Quitado, usa el gap del flex container */
    width: 100%; /* Asegura que ocupe el espacio */
    min-width: 0; /* Permite que se encoja si es necesario */
}

.tab-panel {
    display: none; /* Oculto por defecto */
    padding: 5px;
    width: 100%;
    height: 100%;
}
.tab-panel.active {
    display: block; /* Visible si está activo */
}

.tab-panel h3 {
    color: var(--lightest-slate);
    font-size: var(--fz-xxl);
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 5px;
}
.tab-panel h3 .company {
    color: var(--green);
}
 /* Corregido selector para el '@' */
 .tab-panel h3 .company::before {
     content: " @ "; /* Espacios alrededor del @ */
     /* color: var(--green); */ /* Quitado, hereda color de .company */
 }

.tab-panel p.date {
    font-family: var(--font-mono);
    font-size: var(--fz-xs);
    color: var(--light-slate);
    margin-bottom: 25px;
}

.tab-panel ul {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: var(--fz-lg);
}
.tab-panel ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    color: var(--slate);
}
.tab-panel ul li::before {
    content: '▸';
    position: absolute;
    left: 0;
    top: 3px;
    color: var(--green);
}

/* --- Ajustes Responsivos para la Sección work --- */
#work {
    max-width: 1000px; /* Ajusta según necesites */
}

.featured-projects-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.social-buttons{
    margin-top: 20px; 
    display: flex; 
    gap: 20px; 
    margin-left: 10px;
}
.project {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    margin-bottom: 100px;
}

.project:last-of-type {
     margin-bottom: 70px;
}

.project-content {
    position: relative;
    grid-column: 1 / 8; /* Por defecto a la izquierda */
    grid-row: 1 / -1;
    text-align: left;
    z-index: 2; /* Contenido encima de la imagen */
}

.project:nth-of-type(odd) .project-content {
    grid-column: 7 / -1; /* Texto a la derecha para impares */
    text-align: right;
}

.project-overline {
    margin: 10px 0;
    color: var(--green);
    font-family: var(--font-mono);
    font-size: var(--fz-xs);
    font-weight: 400;
}

.project-title {
    color: var(--lightest-slate);
    font-size: clamp(24px, 5vw, 28px);
    margin: 0 0 20px;
}
.project-title a {
     color: var(--lightest-slate);
     text-decoration: none;
}
  .project-title a:hover {
       color: var(--green);
  }


.project-description {
    background-color: var(--light-navy);
    color: var(--light-slate);
    padding: 25px;
    border-radius: var(--border-radius);
    font-size: var(--fz-lg);
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 30px 0px rgba(2, 12, 27, 0.7);
    transition: var(--transition);
}
.project-description:hover {
    box-shadow: 0 20px 30px -15px rgba(2,12,27,0.7);
}
.project-description p {
    margin: 0;
}
 .project-description a {
      display: inline-block;
      text-decoration: none;
      text-decoration-skip-ink: auto;
      position: relative;
      transition: var(--transition);
      color: var(--green);
 }


.project-tech-list {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    margin: 25px 0 10px;
    padding: 0;
    list-style: none;
}

.project:nth-of-type(odd) .project-tech-list {
     justify-content: flex-end; /* Alinea a la derecha para impares */
}

.project-tech-list li {
    margin: 0 20px 5px 0;
    color: var(--light-slate);
    font-family: var(--font-mono);
    font-size: var(--fz-xs);
    white-space: nowrap;
}
.project:nth-of-type(odd) .project-tech-list li {
     margin: 0 0 5px 20px; /* Invierte margen para alineación derecha */
}


.project-links {
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 10px;
    margin-left: -10px;
    color: var(--lightest-slate);
}
.project:nth-of-type(odd) .project-links {
    justify-content: flex-end;
    margin-left: 0;
    margin-right: -10px;
}
.project-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}
 .project-links a svg {
      width: 22px;
      height: 22px;
      fill: var(--light-slate);
      transition: var(--transition);
 }
  .project-links a:hover svg {
       fill: var(--green);
  }

.project-image {
    grid-column: 6 / -1; /* Por defecto a la derecha */
    grid-row: 1 / -1;
    position: relative;
    z-index: 1; /* Imagen detrás del contenido */
    transition: var(--transition);
    border-radius: var(--border-radius);
}

.project:nth-of-type(odd) .project-image {
     grid-column: 1 / 8; /* Imagen a la izquierda para impares */
}

 .project-image a {
      width: 100%;
      background-color: var(--green);
      border-radius: var(--border-radius);
      vertical-align: middle;
 }
  .project-image a::before {
       content: '';
       position: absolute;
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       z-index: 3;
       transition: var(--transition);
       background-color: var(--navy);
       mix-blend-mode: screen;
       border-radius: var(--border-radius);
  }
   .project-image a:hover::before {
        background-color: transparent;
        filter: none;
   }


 .project-image img {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
      position: relative;
      border-radius: var(--border-radius);
      mix-blend-mode: multiply;
      filter: grayscale(100%) contrast(1) brightness(80%);
      transition: var(--transition);
      object-fit: cover; /* Ajusta la imagen */
 }
  .project-image a:hover img {
       filter: none;
       mix-blend-mode: normal;
  }

.btn-mobile-otros {
    display: flex;
    flex-direction: column;
    margin-top: 25px;
}
.btn-mobile-otros a{
    margin-top: 10px;
}


/* --- Ajustes Responsivos para Work --- */
  /* --- Ajustes Responsivos para Work (Revisados) --- */
  @media (max-width: 768px) {
    .project {
        display: block; /* Cambia a bloque */
        margin-bottom: 70px;
        position: relative; /* Necesario para posicionar la imagen absoluta */
        border-radius: var(--border-radius); /* Opcional: Redondea el contenedor */
        overflow: hidden; /* Evita que la imagen se salga */
    }
    #contact{
        text-align: center;
    }
    .social-buttons {
        justify-content: center;
        text-align: center;
        margin-left: 0;
    }
    .project-image,
    .project:nth-of-type(odd) .project-image {
        /* Resetea propiedades de Grid */
        grid-column: auto;
        grid-row: auto;
        /* Posiciona la imagen como fondo */
        position: absolute;
        inset: 0; /* top/right/bottom/left = 0 */
        width: 100%;
        height: 100%;
        opacity: 0.1; /* Más opacidad para que sea más sutil */
        z-index: 0; /* Detrás del contenido */
        border-radius: 0; /* Sin borde redondeado */
        transition: none; /* Sin transición en móvil */
    }

     .project-image a { /* El enlace que envuelve la imagen */
         display: block;
         width: 100%;
         height: 100%;
         background-color: transparent; /* Sin fondo verde */
     }
     .project-image a::before {
          display: none; /* Oculta el overlay de 'screen' */
     }

     .project-image img {
         object-fit: cover; /* Cubre todo el contenedor */
         height: 100%;
         mix-blend-mode: normal; /* Resetea modos de mezcla */
         filter: none; /* Resetea filtros */
         border-radius: 0; /* Sin borde redondeado */
         opacity: 1; /* Opacidad controlada por .project-image */
         transition: none;
     }

    .project-content,
    .project:nth-of-type(odd) .project-content {
        /* Resetea propiedades de Grid */
        grid-column: auto;
        grid-row: auto;
        /* Posicionamiento y Estilo del Contenido */
        position: relative; /* Flujo normal, encima de la imagen */
        z-index: 2; /* Asegura que esté encima */
        padding: 40px 30px; /* Ajusta padding */
        text-align: left; /* Siempre alineado a la izquierda */
        background-color: rgba(17, 34, 64, 0.7); /* Fondo semi-transparente oscuro para legibilidad */
        /* Considera usar un color sólido si prefieres: background-color: var(--navy); */
        border-radius: 0; /* Sin borde redondeado aquí */
        min-height: 320px; /* Altura mínima para contener texto y dar espacio */
        display: flex; /* Ayuda a centrar verticalmente el contenido */
        flex-direction: column;
        justify-content: center;
    }

    /* Asegura colores legibles para el texto sobre el fondo oscuro */
    .project-title a {
         color: var(--lightest-slate);
         text-decoration: none; /* Asegura no subrayado */
    }
     .project-title a:hover {
         color: var(--green); /* Mantiene hover */
     }

    .project-description {
        background-color: transparent; /* Sin fondo propio */
        padding: 0;
        box-shadow: none; /* Sin sombra */
        color: var(--light-slate); /* Color de texto principal */
    }
    .project-description p {
         color: var(--light-slate); /* Asegura color del párrafo */
         margin-bottom: 0; /* Ajusta si es necesario */
    }

    /* Ajuste de listas y enlaces */
    .project-tech-list,
    .project:nth-of-type(odd) .project-tech-list {
         justify-content: flex-start; /* Alinea a la izquierda */
         margin-top: 15px;
         margin-bottom: 15px;
    }
    .project-tech-list li,
    .project:nth-of-type(odd) .project-tech-list li {
         margin: 0 10px 5px 0;
         color: var(--light-slate); /* Asegura color */
    }
     .project-links,
     .project:nth-of-type(odd) .project-links {
         justify-content: flex-start; /* Alinea a la izquierda */
         margin-left: -10px; /* Mantiene alineación del icono */
         margin-right: 0;
     }
     .project-links a svg {
         fill: var(--light-slate); /* Asegura color del icono */
     }
     .project-links a:hover svg {
          fill: var(--green);
     }

    /* Estilos para los botones en dispositivos móviles */
    .btn-mobile-otros {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra los botones horizontalmente */
        gap: 15px; /* Espaciado uniforme entre los botones */
        margin-top: 25px;
    }

    .btn-mobile-otros .button {
        width: 50%; /* Asegura que los botones ocupen todo el ancho disponible */
        max-width: 300px; /* Ancho máximo para evitar que sean demasiado grandes */
        padding: 0.8rem 1.5rem; /* Padding uniforme */
        font-size: var(--fz-sm); /* Tamaño de fuente consistente */
        text-align: center; /* Centra el texto dentro del botón */
    }
    .theme-toggle-button {
        margin-left: 0 !important;
    }
}

/* Ajustes más finos para pantallas muy pequeñas */
 @media (max-width: 480px) {
      .project-content {
           padding: 30px 20px; /* Menos padding */
           min-height: 280px; /* Menos altura mínima */
       }
      .project-tech-list li {
           font-size: var(--fz-xxs);
           margin-right: 5px;
       }
 }

/* --- Ajustes Responsivos para Experience (Revisados) --- */
@media (max-width: 600px) {
    .experience-tabs {
        display: block; /* Cambia a diseño de bloque */
        gap: 0; /* Elimina el espacio entre lista y panel */
    }

    .tab-list {
        display: flex;
        flex-direction: row; /* Cambia a fila horizontal */
        overflow-x: auto; /* Permite desplazamiento horizontal si no caben */
        width: 100%;
        margin-bottom: 20px; /* Espacio inferior */
        border-bottom: 1px solid var(--lightest-navy); /* Línea separadora */
    }

    .tab-button {
        flex: 1; /* Asegura que las pestañas ocupen el mismo espacio */
        padding: 10px 15px;
        border-left: none; /* Elimina el borde izquierdo */
        border-bottom: 2px solid transparent; /* Borde inferior para resaltar */
        text-align: center; /* Centra el texto */
        white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    }

    .tab-button.active {
        border-bottom-color: var(--green); /* Resalta la pestaña activa */
    }

    .tab-panels {
        padding-left: 0; /* Elimina el padding izquierdo */
    }
}

/* --- Ajustes Responsivos para About --- */
@media (max-width: 768px) {
    #about .about-content {
        display: block; /* Cambia a layout de bloque (una columna) */
    }
    #about .about-image {
         margin: 50px auto 0; /* Centra la imagen y añade espacio superior */
         max-width: 250px; /* Imagen más pequeña en móvil */
    }
    #about .image-wrapper::after {
         top: 10px;
         left: 10px;
    }
    body.light-mode .project-overline{
        color: #ffffff !important; 
    }
    .mobile-menu .resume-button, .theme-toggle-button{

    }
}
@media (max-width: 333px) {
     #about .skills-list {
         grid-template-columns: 1fr; /* Una columna en pantallas muy pequeñas */
     }
}

 #hero h2::after, #hero h2::before { display: none; }

@media (max-width: 1080px) {
    main {
        padding: 0 100px;
        padding-top: var(--nav-height);
    }
    .side { display: none; }
    section h2::after { width: 100px; margin-left: 200px; }
}

@media (max-width: 768px) {
     main {
        padding: 0 25px;
        padding-top: var(--nav-height);
    }
    header {
        padding: 0 25px;
    }
     header nav { display: none; }
     header .resume-button { margin-left: auto; }
     #hero { align-items: center; text-align: center; }
     #hero h1 { font-size: clamp(30px, 15vw, 70px); }
     #hero h2 { font-size: clamp(35px, 10vw, 50px); }
     #hero p { max-width: 90%; font-size: var(--fz-md); }
     section { padding: 80px 0; }
     section h2 { padding-left: 0; text-align: center; }
     section h2::before { display: none; }
     section h2::after { display: none; }
}

 @media (max-width: 480px) {
      main {
        padding: 0 15px;
        padding-top: var(--nav-scroll-height);
    }
     header {
         height: var(--nav-scroll-height);
     }
    #hero .greeting { font-size: var(--fz-sm); }
     #hero h1 { font-size: 32px; }
     #hero h2 { font-size: 26px; }
     #hero p { font-size: var(--fz-sm); }
     .button { padding: 0.6rem 1.2rem; font-size: var(--fz-xs); }
     section { padding: 60px 20px; scroll-margin-top: var(--nav-scroll-height); }
}

@media (max-width: 768px) {
    .desktop-nav {
        display: none;
    }
    .mobile-nav-button-container {
        display: block;
    }
}

body.menu-open {
    overflow: hidden;
}

/* Botón de cambio de tema */
.theme-toggle-button {
    margin-left: 20px;
    font-size: var(--fz-xs);
    padding: 0.5rem 1rem;
    cursor: pointer;
    background-color: var(--light-navy);
    color: var(--lightest-slate);
    border: 1px solid var(--lightest-slate);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.theme-toggle-button:hover {
    background-color: var(--green);
    color: var(--dark-navy);
}

/* Modo claro */
body.light-mode {
    background-color: var(--white);
    color: var(--dark-navy);
}
body.light-mode h1 {
    color: var(--green) !important;
}
body.light-mode h2 {
    color: #d55555 !important;
}
body.light-mode h3 {
    color: var(--dark-navy);
}
body.light-mode a {
    color: var(--green);
}
body.light-mode .project-overline {
    color: var(--dark-navy);
}
body.light-mode .social-buttons a:link{
    color: var(--dark-navy) !important;
}
body.light-mode .greeting{
    color: var(--dark-navy) !important;
}

body.light-mode header {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
}

body.light-mode .button {
    background-color: var(--dark-navy);
    color: var(--white);
    border: 1px solid var(--dark-navy);
}

body.light-mode .button:hover {
    background-color: var(--green);
    color: var(--dark-navy);
}

/* CSS para el botón de desplazamiento */
.scroll-down-container {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeInUp 2s ease forwards;
    opacity: 0;
}

.scroll-down-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-color);
    text-decoration: none;
    transition: transform 0.3s ease;
    padding: 10px;
}

.scroll-down-button:hover {
    transform: translateY(5px);
}

.scroll-text {
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 500;
}

.scroll-down-button svg {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}