/* =============================
   Variables globales
   ============================= */
   :root {
    --header-height: 4rem; /* Ajustar según la altura del header */
  }
  
  /* =============================
     Reset y estilos globales
     ============================= */
  html {
    box-sizing: border-box;
    scroll-padding-top: var(--header-height);
  }
  html{
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
img, video, canvas, svg { max-width: 100%; height: auto; }

pre {
  max-width: 100%;
  overflow-x: auto;
}

mjx-container {
  max-width: 100%;
  overflow-x: auto;
}

mjx-container > svg {
  max-width: 100%;
}

table {
  width: 100%;
  overflow-x: auto;
  display: block;
}

@media (max-width: 768px) {
  .solution mjx-container {
    display: block;
  }
}

  *, *::before, *::after {
    box-sizing: inherit;
  }
  body {
    margin: 0;
    padding: 0;
    padding-top: var(--header-height);
    overflow-x: hidden;
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    transition: background 0.3s, color 0.3s;
  }
  
  h2{
  text-align: center;
  font-size: clamp(1.75rem, 1.2rem + 1.2vw, 3rem);
  color:#333;
  margin:0;
  }
  
  #skill-title{ font-size: inherit; color:#fff; }
  
  /* =============================
     HEADER & NAV (responsive)
     ============================= */
  header {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    background: rgba(34, 34, 34, 0.9);
    color: #fff;
    z-index: 1000;
  }
  
  header .logo img {
    max-height: 2.5rem;
    width: auto;
  }
  
  #nav-toggle {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    z-index: 1001;
  }
  #nav-toggle .bar {
    width: 1.5rem;
    height: 0.2rem;
    background-color: #fff;
    border-radius: 0.1rem;
    transition: transform 0.3s, opacity 0.3s;
  }
  #nav-toggle.open .bar:nth-child(1) { transform: translateY(0.5rem) rotate(45deg); }
  #nav-toggle.open .bar:nth-child(2) { opacity: 0; }
  #nav-toggle.open .bar:nth-child(3) { transform: translateY(-0.5rem) rotate(-45deg); }
  
  #navbar {
    position: static;
    transform: none;
  }
  nav ul {
    list-style: none;
    display: flex;
    gap: 2vw;
    margin: 0;
    padding: 0;
  }
  nav ul li {
    margin: 0;
  }
  nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 0.5rem 1rem;
    transition: color 0.3s;
  }
  nav ul li a:hover { color: #ff6600; }
  
  /* =============================
     HERO (responsive)
     ============================= */
  #hero {
    min-height: 80vh;
    padding-top: var(--header-height);
    padding-inline: 5%;
    background: linear-gradient(45deg, #222, #444);
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #hero .hero-container {
    width: 90%;
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    justify-content: center;
  }
  #hero .hero-text {
    flex: 1 1 300px;
  }
  #hero .hero-text h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin: 0.5rem 0;
  }
  #hero .hero-text p {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    margin: 1rem 0;
  }
  .btn {
    background: #ff6600;
    color: #fff;
    text-decoration: none;
    border-radius: 0.3rem;
    padding: 0.75rem 1.5rem;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    display: inline-block;
    transition: background 0.3s, transform 0.2s;
  }
  .btn:hover {
    background: #cc5500;
    transform: scale(1.05);
  }
  .hero-img {
    max-width: 55%;
    opacity: 0;
    transform: translateX(50px);
    display: flex;
    justify-content: flex-end;
  }
  .hero-img img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
  
  /* =============================
     SECCIÓN SOBRE MÍ
     ============================= */
     @media (max-width: 768px) {
        #about-me {
            padding-top: 3% !important;
            padding-bottom: 3% !important;
        }
    
        #about-me h2 {
            margin-bottom: 1rem !important;
        }
    
        .about-me-image {
            margin-bottom: 0 !important;
        }
    }
    
      
      .about-me-container, .about-container {
        display: flex;
        flex-wrap: wrap;           /* que permita varias filas en móvil */
        align-items: center;
        justify-content: center;
        gap: 5%;                   /* gap relativo al ancho */
        width: 90%;
        max-width: 100%;
        margin: 0 auto;
      }
      
      .about-me-image, .about-img {
        width: 50%;                /* 30% del ancho del contenedor */
        aspect-ratio: 1 / 1;       /* mantiene proporción cuadrada */
        overflow: hidden;
        transform: scale(0.9);
        transition: transform 0.3s;
      }
      
      .about-me-img, .about-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      .about-me-img:hover, .about-img:hover {
        transform: scale(1);
      }
      
      .about-me-text, .about-text {
        width: 60%;                /* toma el resto junto a la imagen */
        max-width: 600px;
        text-align: left;
        font-size: 1.2em;
      }
      
      .about-me-text ul, .achievements {
        list-style: none;
        padding: 0;
      }
      
      .about-me-text ul li, .about-me-text .achievements li {
        background: #fff;
        padding: 2% 3%;            /* padding relativo */
        border-radius: 1%;
        margin-bottom: 2%;
        box-shadow: 0 1% 2% rgba(0,0,0,0.1);
        transition: background 0.3s;
      }
      
      .about-me-text ul li:hover {
        background: rgba(255,102,0,0.1);
      }

      /* =============================
   Sobre mí: imagen full‑width bajo el título en móvil
   ============================= */
@media (max-width: 768px) {
    /* Contenedor en columna, centrado horizontalmente */
    .about-me-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      padding: 0 5%;
    }
  
    /* Imagen ocupa todo el ancho del contenedor */
    .about-me-image {
      width: 100%;
      max-width: none;
      margin-bottom: 1rem;
    }
    .about-me-image img {
      width: 100%;
      height: auto;
    }
  
    /* Texto ocupa todo el ancho y se centra */
    .about-me-text {
      width: 100%;
      text-align: center;
    }
  }
  
  
  /* =============================
     EXPERIENCIA (Timeline)
     ============================= */
  #experience {
    background: #fff;
    padding: 5% 4%;
    margin-top: 5rem;
    color: #333;
    text-align: center;
  }
  .timeline {
    max-width: 90%;
    margin: 0 auto;
    position: relative;
  }
  .timeline-item {
    position: relative;
    display: flex;
    justify-content: flex-start;
    margin: 2rem 0;
  }
  .timeline-dot {
    position: absolute;
    left: 0;
    width: 1rem;
    height: 1rem;
    background: #ff6600;
    border-radius: 50%;
    top: 0.5rem;
  }
  .timeline-content {
    flex: 0 0 45%;
    max-width: 45%;
    background: #f5f5f5;
    padding: 1.5%;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
    font-size: clamp(1rem,2vw,1.2rem);
    text-align: left;
    margin-inline-start: 2%;
    border-left: 0.5rem solid #ff6600;
  }
  .timeline-item:nth-child(even) { justify-content: flex-end; }
  .timeline-item:nth-child(even) .timeline-content { margin-inline-start: 0; margin-inline-end: 2%; }
  
  /* =============================
     SKILLS
     ============================= */
  #skills {
    text-align: center;
    padding: 80px 20px;
    background: #222;
    color: #fff;
  }
  .skill-title {
    font-size: 300%;
    color: #fff;
  }
  .skills-container {
    max-width: 800px;
    margin: 0 auto;
  }
  .skill-category {
    font-size: 1.5em;
    margin: 20px 0;
    text-align: left;
    color: #fff;
    display: inline-block;
  }
  .skill {
    margin: 15px 0;
    text-align: left;
  }
  .skill span {
    font-weight: bold;
    color: #fff;
  }
  .skill-bar {
    width: 100%;
    background: #444;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
  }
  .skill-fill {
    height: 100%;
    background: #ff6600;
    transition: width 1.5s ease-in-out;
  }
  
  /* =============================
     PROYECTOS
     ============================= */
  #projects {
    text-align: center;
    padding: 50px 20px;
    background: #f8f9fa;
  }
  .projects-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .project-card {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    width: 250px;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 10px rgba(0,0,0,0.15);
  }
  .project-card h3 { color: #ff6600; margin: 0; }
  .project-card a {
    display: inline-block;
    margin-top: 10px;
    color: #ff6600;
    text-decoration: none;
  }
  
  /* =============================
     CONTACTO
     ============================= */
  #contact {
    background: #222;
    color: #fff;
    text-align: center;
    padding: 50px 20px;
  }
  form {
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  input, textarea {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
  }
  button {
    background: #ff6600;
    border: none;
    padding: 15px 30px;
    color: #fff;
    font-size: 1.3em;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    border-radius: 8px;
  }
  button:hover {
    background: #cc5500;
    transform: scale(1.05);
  }
  .social-links {
    margin-top: 20px;
  }
  .social-links a {
    margin: 0 10px;
    color: #ff6600;
    text-decoration: none;
  }
  
  /* =============================
     FOOTER
     ============================= */
  footer {
    text-align: center;
    padding: 2rem 5%;
    background: #222;
    color: #fff;
    font-size: clamp(0.875rem,2vw,1rem);
  }
  
  /* =============================
     MEDIA QUERIES GENERALES
     ============================= */
     @media (max-width: 900px) {
        #hero {
          min-height: 0 !important;
          padding-top: var(--header-height) !important;
          justify-content: flex-start !important;
          align-items: flex-start !important;
        }
        #hero .hero-container {
          flex-direction: column !important;
          align-items: flex-start !important;
          gap: 0 !important;
        }
        #hero .hero-text {
          margin: 0 !important;
        }
        .hero-img {
          width: 100% !important;
          max-width: none !important;
          margin: 0 !important;
          transform: none !important;
          opacity: 1 !important;
        }
      }
      
  @media (max-width: 768px) {
    /* Timeline móvil */
    .timeline-item { flex-direction: column; align-items: flex-start; }
    .timeline-dot { position: relative; left: 0; margin-bottom: 1rem; }
    .timeline-content { flex: 0 0 90%; max-width: 90%; margin: 0; }
  }
  @media (max-width: 480px) {
    #hero { padding-inline: 3%; }
    .btn { width: 100%; text-align: center; padding: 0.75rem; font-size: 1rem; }
  }

/* =============================
   Mejoras para mobile menu
   ============================= */
   @media (max-width: 48rem) {
    /* 1) Siempre muestro el toggle */
    #nav-toggle {
      display: flex !important;
    }
  
    /* 2) Oculto todo el panel desplazándolo fuera de la pantalla */
    #navbar {
      position: fixed;
      top: var(--header-height);
      right: 0;
      width: 70vw;
      max-width: 20rem;
      height: calc(100vh - var(--header-height));
      background: #222;
      transform: translateX(100%);
      transition: transform 0.3s ease-in-out;
      z-index: 999;
    }
  
    /* 3) Al click, `#navbar.open` lo trae a la vista */
    #navbar.open {
      transform: translateX(0);
    }
  
    /* 4) Dentro de ese panel, el <ul> siempre está presente */
    #navbar ul {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      padding: 1.5rem;
    }
  }
  
  /* =============================
     Asegurar rotación centrada
     ============================= */
  #nav-toggle .bar {
    transform-origin: center center;
  }

  /* =============================
   Ajuste para firma en móvil
   ============================= */
   @media (max-width: 48rem) {
    /* Evitar que el logo crezca y empuje el toggle */
    header .logo {
      flex: 0 0 auto;
    }
    /* Limitar el tamaño de la firma y mantener proporción */
    header .logo img.firma-img {
      max-height: 2rem;             /* Ajustado a 50% de header */
      width: auto;
    }
  }
/* =========================================================
   1) Botón hamburguesa tapado por la firma (mobile ≤ 768 px)
   =========================================================*/
   @media (max-width: 48rem) {

    /* Coloco el toggle SIEMPRE arriba‑derecha y por encima de todo */
    #nav-toggle{
      position:absolute;        /* lo saco del flujo flex */
      top: .5rem;               /* espacio respecto al borde del header */
      right: 1rem;
      z-index: 1002;            /* un poco más que la firma */
    }
  
    /* Limito el ancho de la firma para que no invada el header */
    header .logo{
      max-width: 60%;           /* ajusta al gusto; 60 % suele bastar */
      overflow:hidden;          /* oculta los trazos que sobresalgan */
    }
    header .logo img.firma-img{
      height: 2rem;             /* ya lo tenías; aseguro que no crezca */
      width: auto;
    }
  }
  
  /* =========================================================
     2) Imagen “café” a la izquierda del texto (desktop > 768 px)
     =========================================================*/
  @media (min-width: 769px){
  
    /* Evito que se rompa de línea: todo en una sola fila */
    .about-me-container{
      flex-wrap: nowrap;        /* ya en column en mobile, así que OK */
      gap: 4%;                  /* deja algo de aire pero cabe en 100 % */
    }
  
    /* La imagen ocupa ~40 % y el texto el resto */
    .about-me-image{
      flex: 0 0 40%;
      max-width: 40%;
    }
    .about-me-text{
      flex: 1 1 56%;            /* 40 % (img) + 4 % (gap) + 56 % = 100 % */
      max-width: 56%;
    }
  }
/* =========================================================
   1) HERO: texto y foto más grandes (solo desktop > 768 px)
   =========================================================*/
   @media (min-width: 769px) {

    /* Título y subtítulo más vistosos */
    #hero .hero-text h1{
      font-size: clamp(3rem, 6vw, 4rem);   /* antes máx 3 rem */
    }
    #hero .hero-text p{
      font-size: clamp(1.25rem, 3vw, 1.5rem);  /* antes máx 1 .25 rem */
    }
  
    /* Foto de perfil un poco mayor */
    .hero-img{
      max-width: 60%;                        /* antes 55 % */
    }
  }
  
  /* =========================================================
     2) Espacio extra antes de “Sobre mí”
     =========================================================*/
  #about-me{
    margin-top: 3rem;   /* un “poquitín” de aire entre secciones */
  }
  
  /* =========================================================
   Firma completa (sin cortes) en móviles
   =========================================================*/
@media (max-width: 48rem) {

  /* El contenedor ya no corta la imagen */
  header .logo{
    max-width: 55vw;     /* ocupa, como mucho, 55 % del ancho */
    overflow: visible;   /* muestra la firma completa */
  }

  /* La firma se reduce en altura y conserva proporción */
  header .logo img.firma-img{
    height: 1.6rem;      /* un poco más baja que antes */
    width: auto;         /* mantiene la relación de aspecto */
    max-width: 100%;     /* no sobrepasa su contenedor */
  }
}

/* ===== Proyectos en FILAS (seguro para el resto de la web) ===== */
#projects .projects-rows{
  display: grid;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Fila: [título centrado] + [texto izq | galería dcha] */
#projects .project-row{
  display: grid;
  grid-template-columns: minmax(320px,1fr) minmax(360px,1fr);
  grid-auto-rows: auto;
  gap: 1.25rem;
  padding: 1.25rem;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Título centrado y a todo el ancho */
#projects .project-title,
#projects .project-title h3{ /* por si usas un <h3> dentro */
  grid-column: 1 / -1;
  text-align: center;
  font-size: clamp(1.4rem, 1rem + 1.2vw, 2.25rem); /* ↑ tamaño fluido */
  line-height: 1.15;
  font-weight: 800;
  margin: .25rem 0 1rem; /* un poco más de aire debajo */
  color: #ff6600;
}

/* Si el título es enlace */
#projects .project-title a{
  color: inherit;
  text-decoration: none;
}
#projects .project-title a:hover{
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* Columna de texto: botón al fondo centrado (sólo en GitHub) */
#projects .project-meta{
  text-align: justify;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
#projects .project-cta{
  grid-column: 1 / -1;  
  justify-self: center; 
  text-align: center;    
  margin-block-start: .75rem;
}

/* Galería reutilizando tus clases */
#projects .project-gallery{ align-self: start; }
#projects .pg-main{
  margin: 0; background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
#projects .pg-main img{ width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
#projects .pg-caption{ font-size: .9rem; color: #555; padding: .35rem .5rem .5rem; }
#projects .pg-thumbs{ display:flex; gap:.5rem; margin-top:.5rem; overflow-x:auto; padding-bottom:.25rem; scrollbar-width:thin; }
#projects .pg-thumb{ border:2px solid transparent; background:transparent; padding:0; border-radius:8px; cursor:pointer; flex:0 0 auto; }
#projects .pg-thumb[aria-selected="true"]{ border-color:#ff6600; }
#projects .pg-thumb img{ width:88px; height:56px; object-fit:cover; display:block; border-radius:6px; }

@media (max-width: 900px){
  #projects .project-row{ grid-template-columns: 1fr; }
  #projects .project-gallery{ order: 2; } /* texto arriba, galería debajo en móvil */
}

/* Contenedor con ancho controlado incluso con zoom alto */
#projects .projects-rows{ width:min(100%, 1200px); margin-inline:auto; }

/* Grid que se adapta mejor si la ventana efectiva se reduce por zoom */
#projects .project-row{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
}

/* Asegurar que la imagen principal nunca “desborde” visualmente */
#projects .pg-main img{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}


/* ===== Carrusel de Skills (oscuro, full-bleed, continuo) ===== */
#skills-carousel { background:#0f1115; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:2.5rem 0; overflow:hidden; }
.skills-swiper { width:100vw; }
.skills-swiper .swiper-wrapper { transition-timing-function: linear !important; align-items:center; }
.skills-swiper .swiper-slide { width: clamp(120px, 12vw, 200px); height: clamp(100px, 10vw, 160px); display:flex; align-items:center; justify-content:center; }
.skills-swiper i { font-size: clamp(3.5rem, 6vw, 5rem); line-height:1; transition: transform .25s ease, filter .25s ease; }
.skills-swiper i:hover { transform: scale(1.08); filter: brightness(1.15); }
.devicon-express-original { filter: invert(1) brightness(0.8); }

/* ===== Proyectos: Swiper ===== */
.projects-swiper { width:min(100%, 1100px); margin:0 auto; padding: 1rem 0 2rem; }
.projects-swiper .swiper-slide { display:flex; justify-content:center; }
.projects-swiper .swiper-button-prev, .projects-swiper .swiper-button-next { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.95); box-shadow:0 2px 8px rgba(0,0,0,.12); }
.projects-swiper .swiper-button-prev:after, .projects-swiper .swiper-button-next:after { font-size:16px; font-weight:700; color:#333; }
.projects-swiper .swiper-pagination-bullet { background:#888; opacity:.6; }
.projects-swiper .swiper-pagination-bullet-active { background:#ff6600; opacity:1; }


/* ===== Projects slider: external nav & tighter layout ===== */
#projects { position: relative; }
.projects-swiper { width: min(100%, 1200px); margin: 0 auto; padding: 0 0 1.25rem; }
.projects-swiper .swiper-slide { overflow: visible; } /* allow outer buttons to show */
.project-card.wide { width: 100%; }

/* External nav buttons: centered vertically, OUTSIDE the swiper width */
.projects-prev, .projects-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.95);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  font-size: 22px; line-height: 40px; text-align: center;
  color: #333;
  cursor: pointer;
}
.projects-prev { left: max(8px, calc(50% - 650px)); }  /* stick to container edges */
.projects-next { right: max(8px, calc(50% - 650px)); }

/* Pagination below the slider, centered */
.projects-pagination { margin-top: .5rem; text-align: center; }
.projects-pagination .swiper-pagination-bullet { background: #888; opacity: .6; }
.projects-pagination .swiper-pagination-bullet-active { background: #ff6600; opacity: 1; }

/* Make sure inner project galleries are usable and not covered */
.project-gallery { position: relative; z-index: 1; }
.projects-prev, .projects-next { z-index: 2; } /* above content but outside slides */


/* ===== Spacing under Projects title ===== */
#projects .projects-title { margin-bottom: 1rem; }

/* ===== Simpler external nav buttons for projects ===== */
.projects-prev, .projects-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #333;
  font-size: 28px;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
  opacity: .85;
}
.projects-prev:hover, .projects-next:hover { transform: translateY(-50%) scale(1.05); opacity: 1; }

.projects-prev:active, .projects-next:active { transform: translateY(-50%) scale(0.98); }

/* Placement hugging container edges (1200px max width) */
#projects { position: relative; }
.projects-swiper { width: min(100%, 1200px); margin: 0 auto; padding-bottom: 1.25rem; }
.projects-prev { left: max(8px, calc(50% - 640px)); }
.projects-next { right: max(8px, calc(50% - 640px)); }

/* Pagination below slider */
.projects-pagination { margin-top: .25rem; text-align: center; }
.projects-pagination .swiper-pagination-bullet { background: #888; opacity: .6; }
.projects-pagination .swiper-pagination-bullet-active { background: #ff6600; opacity: 1; }

/* Ensure internal project galleries are usable */
.project-gallery { position: relative; z-index: 1; }


/* ===== FINAL FIXES (compact) ===== */
#projects .projects-title{ margin-bottom:.75rem !important; }

#projects{ position:relative; }
#projects .projects-swiper{
  width:min(100%,1200px);
  margin:0 auto;
  padding-bottom:.5rem !important;   /* reduce gap under slider */
}

#projects .projects-pagination{
  position:static !important;
  margin:.25rem 0 0 !important;
  text-align:center;
}
#projects .projects-pagination .swiper-pagination-bullet{
  width:8px; height:8px;
  background:#bdbdbd;
  opacity:.9;
  margin:0 4px !important;
}
#projects .projects-pagination .swiper-pagination-bullet-active{
  background:#ff6600;
}

/* Simple circular arrow buttons OUTSIDE the swiper */
#projects .projects-prev,
#projects .projects-next{
  position:absolute !important;
  top:calc(50% - 22px) !important;
  z-index:5;
  width:44px; height:44px;
  border-radius:50% !important;
  border:1px solid #e5e7eb !important;
  background:#fff !important;
  box-shadow:0 2px 8px rgba(0,0,0,.08) !important;
  color:#111 !important;
  font-size:22px !important;
  line-height:44px !important;
  text-align:center !important;
  cursor:pointer !important;
  transition:transform .12s ease, box-shadow .12s ease !important;
}
#projects .projects-prev:hover,
#projects .projects-next:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 4px 12px rgba(0,0,0,.12) !important;
}

/* Hug container edges (max 1200px) */
#projects .projects-prev{ left:max(8px, calc(50% - 620px)); }
#projects .projects-next{ right:max(8px, calc(50% - 620px)); }

/* Ensure inner galleries remain clickable */
#projects .swiper-slide{ overflow:visible !important; }
#projects .project-gallery{ position:relative; z-index:1; }


/* ===== FINAL UI TWEAKS v2 ===== */

/* 1) Proyectos: todos los cards con misma altura (ajustable) */
:root { --project-card-min-h: 620px; }  /* ← cambia este valor si quieres otra altura */
#projects .swiper-slide > article,
#projects .project-card.wide,
#projects .project-row {
  min-height: var(--project-card-min-h);
}
/* Evitar que la galería interna estire raro el layout */
#projects .project-gallery { align-self: start; }
#projects .project-card.wide img,
#projects .project-row img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* 2) Botones externos simples (sin fondo ovalado raro) */
#projects .projects-prev,
#projects .projects-next{
  position: absolute !important;
  top: calc(50% - 16px) !important;
  z-index: 5;
  width: 32px; height: 32px;
  padding: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #111 !important;
  font-size: 24px !important;
  line-height: 32px !important;
  text-align: center !important;
  cursor: pointer !important;
  opacity: .9;
  transition: transform .12s ease, opacity .12s ease;
}
#projects .projects-prev:hover,
#projects .projects-next:hover { opacity: 1; transform: translateY(-1px); }
#projects .projects-prev:active,
#projects .projects-next:active { transform: translateY(0); }

/* Pegados al borde del contenedor (máx 1200px) */
#projects { position: relative; }
#projects .projects-swiper { width: min(100%, 1200px); margin: 0 auto; padding-bottom: .4rem !important; }
#projects .projects-prev  { left: max(0px, calc(50% - 620px)); }
#projects .projects-next  { right: max(0px, calc(50% - 620px)); }

/* 3) Paginación compacta (menos hueco abajo) */
#projects .projects-pagination{ margin: .2rem 0 0 !important; text-align:center; }
#projects .projects-pagination .swiper-pagination-bullet{
  width: 8px; height: 8px; margin: 0 4px !important;
  background: #bdbdbd; opacity: .9;
}
#projects .projects-pagination .swiper-pagination-bullet-active{ background: #ff6600; }

/* 4) Asegurar clicabilidad de la mini-galería */
#projects .swiper-slide{ overflow: visible !important; }
#projects .project-gallery{ position: relative; z-index: 1; }




/* === SINGLE-SOURCE EQUAL HEIGHT (slides) === */
#projects .projects-swiper .swiper-wrapper { align-items: stretch !important; }
#projects .projects-swiper .swiper-slide {
  height: var(--projects-fixed-h, auto) !important;
  overflow: visible !important;
  position: relative;
  box-sizing: border-box;
}
#projects .projects-swiper { overflow: visible !important; }

/* Article fills the slide height to keep CTAs inside */
#projects .projects-swiper .swiper-slide > article.project-row{
  min-height: 100% !important;
  box-sizing: border-box;
  padding-bottom: 14px;
  position: relative;
  z-index: 1;
}

/* Keep CTAs clickable above pagination */
#projects .project-cta{ position: relative; z-index: 2; }
#projects .projects-pagination{ position: relative; z-index: 1; margin-top: 6px; }



/* === OVERRIDE: seamless skills carousel between sections === */
#skills-carousel {
  background: transparent !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 1.25rem 0 !important;
  overflow: visible !important;
  border: 0 !important;
  box-shadow: none !important;
}
.skills-swiper { width: 100% !important; }



/* Inline tech icons row (doesn't affect layout flow) */
#projects .tech-icons{ display:inline-flex; flex-wrap:wrap; gap:.5rem .75rem; align-items:center; margin-top:.35rem; }
#projects .tech-icons i{ font-size: 24px; line-height:1; }
#projects .tech-icons .label{ font-size:.9rem; opacity:.85; margin-left:.25rem; }