/**
 * Theme Name:        Natalia Vera Villó
 * Theme URI:         https://nataliaveravillo.com
 * Description:       Portfolio Natalia Vera Villó
 * Version:           1.0.0
 * Author:            Natalia Vera Villó
 * Tags:              UX/UI,simple.
 * Text Domain:       fabled-sunset
 * Domain Path:       /assets/lang
 * Tested up to:      6.4
 * Requires at least: 6.2
 * Requires PHP:      7.4
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */



/* Reset básico */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: "Raleway", sans-serif;
     background-color: #fff;
     color: #000;
 }

 html {
     scroll-behavior: smooth;
     overflow-x: hidden;
     width: 100%;
 }

 /* =============================================== NAVBAR ====================================== */
 header {
     width: 100%;
     display: flex;
     justify-content: center;
     padding: 0;
     position: sticky;
     top: 0;
     z-index: 100;
     background: transparent;
     transition: all 0.4s ease;
 }

 /*Estado con scroll navbar*/
 header.scrolled {
     padding: 16px 123px;
 }

 .navbar {
     width: 100%;
     background: #fff;
     border-radius: 9999px;
     padding: 16px;
     height: 72px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     box-sizing: border-box;
 }

 header.scrolled .navbar {
     background: #000;
 }

 /* === MOBILE MENU BASE === */
 .mobile-menu-btn {
     display: flex;
     cursor: pointer;
 }


 /* === Animación del menú === */
 .nav-links {
     transition: transform 0.4s ease, opacity 0.4s ease;
 }

 /* Ocultamos por defecto en móvil */
 .nav-links {
     display: flex;
     align-items: center;
     gap: 8px;
 }


 /* Logo */
 .circle {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background-color: none;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     overflow: hidden;
 }

 .circle img {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 120%;
     height: 120%;
     object-fit: cover;
     border-radius: 50%;
     transform: translate(-50%, -50%);
     transition: transform 0.5s ease, opacity 0.5s ease;
 }


 /* === Navbar Links === */
 .nav-links {
     display: flex;
     align-items: center;
     gap: 8px;
     list-style: none;
     margin: 0;
     padding: 0;
 }

 /* Links principales */
 .nav-links>li>a {
     display: flex;
     align-items: center;
     gap: 4px;
     padding: 8px 16px;
     color: #000;
     font-family: "Raleway", sans-serif;
     font-size: 16px;
     font-weight: 400;
     line-height: 24px;
     text-decoration: none;
     border-radius: 9999px;
     transition:
         color 0.3s ease,
         border-color 0.3s ease,
         background-color 0.3s ease,
         stroke 0.3s ease;
 }

 header.scrolled .nav-links>li>a {
     color: #fff;
 }

 /* Por defecto (sin scroll) */
 .nav-links .dropdown a .icon svg path {
     stroke: #000;
 }

 /* Cuando haces scroll */
 header.scrolled .nav-links .dropdown a .icon svg path {
     stroke: #fff;
 }

 /* Hover */
 /* === HOVER SIN SCROLL === */
 .nav-links>li>a:hover,
 .nav-links>li>a:focus {
     color: #000;
     border: 1px solid #000;
 }

 /* === HOVER CON SCROLL === */
 header.scrolled .nav-links>li>a:hover,
 header.scrolled .nav-links>li>a:focus {
     color: #fff;
     border: 1px solid #fff;
 }


 /* Estado al hacer clic  sin scroll*/
 .nav-links>li>a:active {
     background: #fff;
     color: #000;
     border: 1px solid #fff;
 }

 header.scrolled .nav-links>li>a:active {
     background: #000;
     color: #fff;
     border: 1px solid #000;
 }

 /* === Dropdown container === */
 .nav-links .dropdown {
     position: relative;
 }

 /* Dropdown SIN SCROLL (por defecto) */
 .nav-links .dropdown .dropdown-menu,
 .btn.primary .dropdown-menu {
     position: absolute;
     top: 100%;
     left: 0;
     background: #fff;
     border-radius: 16px;
     padding: 16px;
     list-style: none;
     display: none;
     min-width: 120px;
     white-space: nowrap;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
     z-index: 100;
 }

 /* Mostrar dropdown al hover */
 .nav-links .dropdown:hover .dropdown-menu,
 .btn.primary:hover .dropdown-menu {
     display: block;
 }

 /* Items dropdown - SIN SCROLL */
 .nav-links .dropdown .dropdown-menu li a,
 .btn.primary .dropdown-menu li a {
     display: block;
     padding: 8px 12px;
     color: #000;
     font-family: "Raleway", sans-serif;
     font-size: 16px;
     font-weight: 400;
     line-height: 24px;
     text-decoration: none;
     border-radius: 8px;
     transition: background 0.3s, color 0.3s;
 }

 /* Hover - SIN SCROLL */
 .nav-links .dropdown .dropdown-menu li a:hover,
 .btn.primary .dropdown-menu li a:hover {
     background: rgba(0, 0, 0, 0.1);
     color: #000;
 }

 /* Active - SIN SCROLL */
 .nav-links .dropdown .dropdown-menu li a:active,
 .btn.primary .dropdown-menu li a:active {
     background: #000;
     color: #fff;
 }

 /* === Dropdown CON SCROLL === */
 header.scrolled .nav-links .dropdown .dropdown-menu,
 header.scrolled .btn.primary .dropdown-menu {
     background: #000;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
 }

 /* Items - CON SCROLL */
 header.scrolled .nav-links .dropdown .dropdown-menu li a,
 header.scrolled .btn.primary .dropdown-menu li a {
     color: #fff;
 }

 /* Hover - CON SCROLL */
 header.scrolled .nav-links .dropdown .dropdown-menu li a:hover,
 header.scrolled .btn.primary .dropdown-menu li a:hover {
     background: rgba(255, 255, 255, 0.25);
     color: #fff;
 }

 /* Active - CON SCROLL */
 header.scrolled .nav-links .dropdown .dropdown-menu li a:active,
 header.scrolled .btn.primary .dropdown-menu li a:active {
     background: #fff;
     color: #000;
 }

 /* Icono SIN SCROLL */
 .nav-links .dropdown a .icon svg path {
     stroke: #000;
 }

 /* Icono CON SCROLL */
 header.scrolled .nav-links .dropdown a .icon svg path {
     stroke: #fff;
 }

 /* === Icono del dropdown === */
 .nav-links .dropdown a .icon {
     display: flex;
     align-items: center;
 }

 /* Animación de rotación del ícono */
 .nav-links .dropdown a .icon svg {
     transition: transform 0.5s ease, stroke 0.5s ease;
 }

 /* Rotar icono cuando el dropdown está abierto */
 .nav-links .dropdown:hover a .icon svg {
     transform: rotate(180deg);
 }



 /* ===== Botones ===== */
 .nav-buttons {
     display: flex;
     align-items: center;
     gap: 16px;
 }

 /* === Botón primario con dropdown === */
 .btn.primary {
     position: relative;
 }

 /* === Versión SIN SCROLL (por defecto) === */
 .btn.primary>a {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 4px;
     padding: 8px 16px;
     height: 40px;
     background: #fff;
     color: #000;
     border: 1px solid #000;
     border-radius: 9999px;
     text-decoration: none;
     cursor: pointer;
     transition: background 0.3s, color 0.3s, border 0.3s;
     white-space: nowrap;
 }

 .btn.primary>a svg path {
     stroke: #000;
 }

 /* Animación de rotación del icono */
 .btn.primary .arrow {
     width: 16px;
     height: 16px;
     transition: transform 0.5s ease, stroke 0.5s ease;
 }

 /* Gira la flecha cuando el dropdown está abierto */
 .btn.primary:hover .arrow {
     transform: rotate(180deg);
 }

 /* Hover SIN scroll */
 .btn.primary>a:hover {
     background: rgba(0, 0, 0, 0.05);
 }

 /* Active SIN scroll */
 .btn.primary>a:active {
     background: #000;
     color: #fff;
     border: 1px solid #000;
 }

 .btn.primary>a:active svg path {
     stroke: #fff !important;
 }

 /* === Versión CON SCROLL === */
 header.scrolled .btn.primary>a {
     background: transparent;
     color: #fff;
     border: 1px solid #fff;
 }

 header.scrolled .btn.primary>a svg path {
     stroke: #fff;
 }

 header.scrolled .btn.primary>a:hover {
     background: rgba(255, 255, 255, 0.25);
 }

 /* Active CON SCROLL */
 header.scrolled .btn.primary>a:active {
     background: #fff;
     color: #000;
     border: 1px solid #fff;
 }

 header.scrolled .btn.primary>a:active svg path {
     stroke: #000 !important;
 }

 /* Tamaños de íconos */
 .btn.primary svg {
     display: block;
 }

 .btn.primary svg:first-child {
     width: 20px;
     height: 20px;
 }

 .btn.primary .arrow {
     width: 16px;
     height: 16px;
 }

 /* === Botón secundario (SIN SCROLL - por defecto) === */
 .btn.secondary {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 8px 16px;
     height: 40px;
     background: #000;
     border: 1px solid #000;
     border-radius: 9999px;
     text-decoration: none;
     color: #fff;
     cursor: pointer;
     transition: background 0.3s, color 0.3s, border 0.3s;
     white-space: nowrap;
 }

 .btn.secondary svg {
     width: 24px;
     height: 24px;
     transition: stroke 0.3s ease;
 }

 .btn.secondary svg path {
     stroke: #fff;
 }

 .btn.secondary span {
     font-family: "Raleway", sans-serif;
     font-size: 16px;
     font-weight: 400;
     line-height: 24px;
 }

 /* Hover SIN scroll */
 .btn.secondary:hover {
     background: rgba(0, 0, 0, 0.25);
     border: transparent;
     color: #fff;
 }

 .btn.secondary:hover svg path {
     stroke: #fff !important;
 }

 /* Active SIN scroll */
 .btn.secondary:active {
     background: #fff;
     color: #000;
     border: 1px solid #fff;
 }

 .btn.secondary:active svg path {
     stroke: #000 !important;
 }

 /* === Botón secundario CON SCROLL === */
 header.scrolled .btn.secondary {
     background: #fff;
     color: #000;
     border: 1px solid transparent;
 }

 header.scrolled .btn.secondary svg path {
     stroke: #000;
 }

 /* Hover CON SCROLL */
 header.scrolled .btn.secondary:hover {
     background: rgba(255, 255, 255, 0.25);
     color: #fff;
 }

 header.scrolled .btn.secondary:hover svg path {
     stroke: #fff !important;
 }

 /* Active CON SCROLL */
 header.scrolled .btn.secondary:active {
     background: #000;
     color: #fff;
     border: 1px solid #000;
 }

 header.scrolled .btn.secondary:active svg path {
     stroke: #fff !important;
 }

/* === Escritorio SIN SCROLL === */
.nav-links > li > a.active {
    background: transparent;
    color: #000;
    border: 1px solid #000;
}

/* === Escritorio CON SCROLL (header.scrolled) === */
header.scrolled .nav-links > li > a.active {
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
}

/* === Móvil CON SCROLL (header.scrolled) === */
/*header.scrolled .mobile-nav-links > li > a.active {
    background: #fff;
    color: #000;
    border: 1px solid #fff;
}*/

/* Móvil - SIN SCROLL */
/*.mobile-nav-links > li > a.active {
    background: #000;
    color: #fff;
    border: 1px solid #000;
}*/

/* Active */
.mobile-nav-links li a.active {
  background: #000;
  color: #fff;
  border: 1px solid #000;
}

 /* =============================== HERO SECTION ============================ */
 .hero {
     max-width: 1366px;
     margin: 0 auto;
     padding: 64px 123px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 32px;
     align-items: end;
 }

 .hero-content h6 {
     color: #747474;
     font-family: "Raleway", sans-serif;
     font-size: 30px;
     font-style: normal;
     font-weight: 600;
     line-height: 40px;
     letter-spacing: -0.64px;
     margin-bottom: 16px;
 }

 .hero-content h2 {
     color: #000;
     font-family: "Raleway", sans-serif;
     font-size: 56px;
     font-style: normal;
     font-weight: 600;
     line-height: 64px;
     letter-spacing: -1.12px;
     margin-bottom: 16px;
 }

 .hero-content p {
     color: #000;
     font-family: "Raleway", sans-serif;
     font-size: 24px;
     font-style: normal;
     font-weight: 400;
     line-height: 32px;
     letter-spacing: -2%;
     margin-bottom: 48px;
 }

 /* BUTTONS */
 .hero-buttons {
     display: flex;
     gap: 16px;
 }

 .hero-buttons .hero-btn {
     display: flex;
     padding: 12px 24px;
     justify-content: center;
     align-items: center;
     gap: 8px;
     height: 48px;
     border-radius: 9999px;
     font-family: "Raleway", sans-serif;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: 24px;
     text-decoration: none;
     cursor: pointer;
     transition: background 0.3s, color 0.3s, border 0.3s;
     white-space: nowrap;
 }

 .hero-btn.primary {
     background: #000;
     color: #fff;
 }

 .hero-btn.primary:hover {
     background: rgba(0, 0, 0, 0.25);
     color: #fff;
 }

 .hero-btn.primary:active {
     background: #fff;
     color: #000;
     border: 1px solid #fff;
 }

 .hero-btn.secondary {
     background: transparent;
     border: 1px solid #000;
     color: #000;
 }

 .hero-btn.secondary:hover {
     background: transparent;
     border: 1px solid rgba(0, 0, 0, 0.25);
     color: rgba(0, 0, 0, 0.25);
 }

 .hero-btn.secondary:active {
     background: transparent;
     border: 1px solid #FFF;
     color: #000;
 }


 /* Imagen del hero */

 .hero-image {
     position: relative;
     width: 100%;
     height: 608px;
     overflow: visible;
 }

 .hero-image img {
     width: 100%;
     height: 100%;
     display: block;
     border-radius: 24px;
     object-fit: cover;
 }

 /* tags */
 .tags-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     overflow: visible;
 }

 .tag {
     position: absolute;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 12px 24px;
     height: 56px;
     border-radius: 9999px;
     cursor: pointer;
     white-space: nowrap;

     /* Estado inicial para animación */
     opacity: 0;
     transform: translateY(-150px) rotate(0deg);

     /* 🔥 Transición suave al cambiar de posición o rotación */
     transition:
         top 0.8s ease-in-out,
         left 0.8s ease-in-out,
         transform 0.8s ease-in-out,
         opacity 0.8s ease-in-out;
 }

 .tag p {
     font-size: 24px;
     line-height: 32px;
     letter-spacing: -2%;
     font-weight: 600;
     text-align: center;
     white-space: nowrap;
 }

 .tag svg {
     width: 32px;
     height: 32px;
     flex-shrink: 0;
 }

 /* Colores individuales */
 .tag1 {
     background-color: #E7C3FB;
     color: #A038DC;
     top: 550px;
     left: -70px;
     --rotate: 15deg;
 }

 .tag2 {
     background-color: #FBFBC3;
     color: #ACAB2B;
     top: 515px;
     left: 115px;
     --rotate: -5deg;
 }

 .tag3 {
     background-color: #FBC3E7;
     color: #DC38A3;
     top: 570px;
     left: 330px;
     --rotate: 10deg;
 }

 .tag4 {
     background-color: #C3FBE9;
     color: #2BAC83;
     top: 465px;
     left: 30px;
     --rotate: -18deg;
 }

 .tag5 {
     background-color: #FBDDC3;
     color: #ED8A28;
     top: 455px;
     left: 340px;
     --rotate: 15deg;
 }

 .tag6 {
     background-color: #C3F5FB;
     color: #2B9FAC;
     top: 415px;
     left: -55px;
     --rotate: 0deg;
 }

 .tag7 {
     background-color: #FBCFC3;
     color: #DC5B38;
     top: 365px;
     left: 370px;
     --rotate: 0deg;
 }

 /* Hover */
 .tag:hover {
     transform: scale(1.05) rotate(var(--rotate));
     z-index: 10;
 }

 /* Animación de caída */
 @keyframes drop {
     0% {
         transform: translateY(-150px) rotate(var(--rotate));
         opacity: 0;
     }

     100% {
         transform: translateY(0) rotate(var(--rotate));
         opacity: 1;
     }
 }


 /* =================================== Section Work ====================== */
 .work {
     width: 100%;
     max-width: 1366px;
     margin: 0 auto;
     padding: 64px 123px;
 }

 /* Título */
 .work .title h6 {
     font-size: 32px;
     line-height: 40px;
     letter-spacing: -2%;
     font-weight: 600;
     text-align: left;
     margin-bottom: 48px;
     width: 100%;
     max-width: 832px;
 }

 /* Cards Container */
 .cards {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     /* 4 columnas iguales */
     gap: 32px;
     /* Espacio entre tarjetas */
     align-items: stretch;
     /* Hace que todas las filas tengan la misma altura */
 }

 /* Card */
 .card {
     padding: 24px;
     border-radius: 24px;
     text-align: left;
     color: #000;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
 }


 /* Colores diferentes para cada card */
 .card-1 {
     background-color: #F7ECFE;
 }

 .card-2 {
     background-color: #ECFEF8;
 }

 .card-3 {
     background-color: #ECFCFE;
 }

 .card-4 {
     background-color: #FEECF7;
 }

 /* Icono */
 .card .icon {
     width: 48px;
     height: 48px;
     margin-bottom: 16px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* Colores de fondo del icono */
 .card-1 .icon {
     background-color: #E7C3FB;
 }

 .card-2 .icon {
     background-color: #C3FBE9;
 }

 .card-3 .icon {
     background-color: #C3F5FB;
 }

 .card-4 .icon {
     background-color: #FBC3E7;
 }

 .card .icon img {
     width: 24px;
     height: 24px;
 }

 /* Card Textos */
 .card-title {
     font-size: 24px;
     line-height: 32px;
     letter-spacing: -2%;
     font-weight: 600;
     margin-bottom: 16px;
 }

 .card-text {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     margin-top: auto;
 }



 /* ================================================ Projects ================================================ */
 .projects-stack {
     max-width: 100%;
     margin: 0 auto;
     padding: 64px 123px;
     position: relative;
 }

 .title {
     text-align: center;
     margin-bottom: 48px;
 }

 .title h3 {
     font-size: 48px;
     line-height: 56px;
     letter-spacing: -2%;
     font-weight: 600;
     text-align: center;
     margin-bottom: 16px;
 }

 .title p {
     font-size: 24px;
     line-height: 32px;
     letter-spacing: -2%;
     font-weight: 400;
     text-align: center;
 }

 /* Contenedor de las cards */
 .cards-stack {
     position: relative;
     display: flex;
     flex-direction: column;
     gap: 24px;
     height: 300vh;
 }

 /* Cada card individual */
 .stack-card {
     display: flex;
     flex-direction: row;
     width: 100%;
     max-width: 1120px;
     height: 600px;
     padding: 64px;
     margin: 0 auto;
     gap: 32px;
     border-radius: 16px;
     color: #fff;
     position: sticky;
     top: 100px;
     z-index: 1;
     transition: transform 0.5s ease, box-shadow 0.5s ease;
     transform: scale(1);
     align-items: center;
 }

 /* Estado reducido cuando la siguiente card la empuja */
 .stack-card.shrink {
     transform: scale(0.95);
     box-shadow: 0 0 0 rgba(0, 0, 0, 0);
     z-index: 0;
     background-color: #484848;
 }

 /* Colores de fondo distintos por card */
 .project-1 {
     background-color: #000;
 }

 .project-2 {
     background-color: #000;
 }

 .project-3 {
     background-color: #000;
 }

 /* Div internos de la card: texto e imagen */
 .stack-card .content-text {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 /* Imagen dentro del div .image */
 .stack-card .image {
     flex: 1;
     height: 100%;
     /* <- ahora sí tiene altura */
     display: flex;
 }

 .stack-card .image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 24px;
     display: block;
 }

 /* Ajuste de topics */
 /* Ajuste de topics para que hagan wrap */
 .topics {
     display: flex;
     flex-wrap: wrap;
     /* permite que los topics se bajen a la siguiente fila */
     gap: 8px;
     margin-bottom: 24px;
 }

 /* Mantener ancho de cada topic consistente */
 .topic {
     display: flex;
     align-items: center;
     gap: 4px;
     padding: 4px 12px;
     height: 32px;
     border: 1px solid #fff;
     border-radius: 9999px;
     background: transparent;
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     white-space: nowrap;
     text-align: left;
     color: #fff;
     margin-bottom: 0;
     /* ya no hace falta, gap se encarga */
 }


 .topic img {
     width: 16px;
     height: 16px;
     flex-shrink: 0;
 }

 /* Card text */
 .card-text h6 {
     font-size: 32px;
     line-height: 40px;
     letter-spacing: -2%;
     font-weight: 600;
     text-align: left;
     margin-bottom: 16px;
     color: #fff
 }

 .card-text p {
     font-size: 16px;
     line-height: 24px;
     letter-spacing: 0;
     font-weight: 400;
     text-align: left;
     margin-bottom: 48px;
     color: #fff
 }

 .project-link {
     display: inline-block;
     padding: 12px 24px;
     height: 48px;
     font-size: 18px;
     line-height: 24px;
     letter-spacing: 0;
     font-weight: 400;
     text-decoration: none;
     border-radius: 9999px;
     background-color: #fff;
     color: #000;
     cursor: pointer;
     text-align: center;
     transition: all 0.3s ease;
 }

 .project-link:hover {
     background-color: rgba(255, 255, 255, 0.25);
 }

 .project-link:active {
     background-color: transparent;
     color: #fff;
 }

 /* ================================================ Tools ================================================ */
 /* Sección general */
 .tools-section {
     padding: 64px 123px;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .tools-text {
     text-align: center;
     margin-bottom: 48px;
 }

 .tools-text h6 {
     font-size: 32px;
     line-height: 40px;
     font-weight: 600;
     margin: 0 0 16px 0;
 }

 .tools-text p {
     font-size: 24px;
     line-height: 32px;
     font-weight: 400;
     margin: 0;
 }

 /* Carrusel */
 .carousel-wrapper {
     overflow: visible;
     position: relative;
 }

 .carousel-inner {
     width: 568px;
     height: 120px;
     overflow: hidden;
     position: relative;
     padding: 8px 0;
 }

 .carousel-wrapper::before,
 .carousel-wrapper::after {
     content: "";
     position: absolute;
     top: 0;
     width: 60px;
     height: 100%;
     z-index: 5;
     pointer-events: none;
 }

 .carousel-wrapper::before {
     left: 0;
     background: linear-gradient(to right, #fff, transparent);
 }

 .carousel-wrapper::after {
     right: 0;
     background: linear-gradient(to left, #fff, transparent);
 }

 .track {
     display: flex;
     animation: scroll 10s linear infinite;
     gap: 24px;
 }

 /* Pausar animación cuando el usuario pasa el mouse */
 .track.paused {
     animation-play-state: paused;
 }

 /* Tarjetas individuales de herramientas */
 .tool {
     position: relative;
     width: 88px;
     height: 88px;
     border-radius: 16px;
     background-color: #f3f3f3;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
     display: flex;
     justify-content: center;
     align-items: center;
     flex: 0 0 auto;
     cursor: pointer;
 }

 .tool img {
     width: 48px;
     height: 48px;
 }

 /* POPUP oculto dentro del tool (solo para copiar contenido) */
 .tool-popup {
     display: none;
 }

 /* Fondos personalizados por herramienta */
 .tool.adobe {
     background-image: url('img/svg-tools/background_adobe.png');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
 }

 .tool.adobe img {
     max-height: 60%;
     width: auto;
     object-fit: contain;
 }

 .tool.figma {
     background-color: #000B1D;
 }

 .tool.figma img {
     max-height: 70%;
     width: auto;
     object-fit: contain;
 }

 .tool.photoshop {
     background-color: #001E36;
 }

 .tool.photoshop img {
     height: 45%;
     width: auto;
     object-fit: contain;
 }

 .tool.premiere {
     background-color: #00005B;
 }

 .tool.premiere img {
     height: 45%;
     width: auto;
     object-fit: contain;
 }

 .tool.after {
     background-color: #00005B;
 }

 .tool.after img {
     height: 45%;
     width: auto;
     object-fit: contain;
 }


 .tool.illustrator {
     background-color: #330000;
 }

 .tool.illustrator img {
     height: 45%;
     width: auto;
     object-fit: contain;
 }

 .tool.indesign {
     background-color: #49021F;
 }

 .tool.indesign img {
     height: 45%;
     width: auto;
     object-fit: contain;
 }

 .tool.lightroom {
     background-color: #001E36;
 }

 .tool.lightroom img {
     height: 45%;
     width: auto;
     object-fit: contain;
 }

 .tool.substance {
     background-color: #1E3101;
 }

 .tool.substance img {
     height: 45%;
     width: auto;
     object-fit: contain;
 }


 .tool.autocad {
     background-color: #fff;
 }

 .tool.autocad img {
     object-fit: contain;
 }

 .tool.maya {
     background-color: #fff;
 }

 .tool.maya img {
     object-fit: contain;
 }

 .tool.blender {
     background-color: #fff;
 }

 .tool.blender img {
     object-fit: contain;
 }

 .tool.blender img {
     max-height: 70%;
     width: auto;
     object-fit: contain;
 }

 .tool.keyshot {
     background-color: #fff;
 }

 .tool.keyshot img {
     height: 60px;
     width: auto;
     object-fit: contain;
 }

 .tool.davinci {
     background-color: #22384E;
 }

 .tool.davinci img {
     object-fit: contain;
 }

 .tool.unity {
     background-color: #fff;
 }

 .tool.axure {
     background-color: #fff;
 }

 .tool.github {
     background-color: #fff;
 }

 .tool.github img {
     height: 60px;
     width: auto;
     object-fit: contain;
 }

 .tool.wordpress {
     background-color: #fff;
 }

 .tool.wordpress img {
     object-fit: contain;
 }

 .tool.notion {
     background-color: #fff;
 }

 .tool.notion img {
     object-fit: contain;
 }

 .tool.slack {
     background-color: #fff;
 }

 .tool.slack img {
     object-fit: contain;
 }

 .tool.jira {
     background-color: #fff;
 }

 .tool.jira img {
     object-fit: contain;
 }

 .tool.androidstudio {
     background-color: #fff;
 }

 .tool.androidstudio img {
     object-fit: contain;
 }

 .tool.vscode {
     background-color: #fff;
 }

 .tool.vscode img {
     object-fit: contain;
 }

 .tool.html {
     background-color: #fff;
 }

 .tool.html img {
     object-fit: contain;
 }

 .tool.css {
     background-color: #fff;
 }

 .tool.css img {
     object-fit: contain;
 }

 .tool.js {
     background-color: #fff;
 }

 .tool.js img {
     object-fit: contain;
 }

 .tool.php {
     background-color: #fff;
 }

 .tool.react img {
     object-fit: contain;
 }

 .tool.php img {
     height: 60px;
     width: auto;
     object-fit: contain;
 }

 .tool.mysql {
     background-color: #fff;
 }

 .tool.mysql img {
     height: 35px;
     width: auto;
     object-fit: contain;
 }

 .tool.react {
     background-color: #fff;
 }

 .tool.react img {
     object-fit: contain;
 }



 /* Popup flotante fuera del track */
 .floating-popup {
     position: absolute;
     background: #000;
     color: #fff;
     padding: 8px;
     border-radius: 8px;
     width: 192px;
     font-size: 14px;
     line-height: 20px;
     z-index: 9999;
     pointer-events: none;
     opacity: 0;
     transform: translateY(0);
     transition: opacity 0.2s ease, transform 0.2s ease;
     display: none;
 }

 .floating-popup strong {
     font-weight: 600;
     display: block;
     margin-bottom: 4px;
 }

 .floating-popup::after {
     content: "";
     position: absolute;
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
     border-width: 6px;
     border-style: solid;
     border-color: #000 transparent transparent transparent;
 }

 /* Animación del carrusel */
 @keyframes scrollCarousel {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(-50%);
     }
 }


 /* Lista */
 /* === FULL LIST === */

 .full-list-wrapper {
     text-align: center;
     margin-top: 24px;
 }

 /* === BOTÓN ORIGINAL === */
 /* === BOTÓN ORIGINAL (solo texto negro, sin fondo) === */
 #show-full-list {
     display: flex;
     /*padding: 8px 16px;*/
     justify-content: center;
     align-items: center;
     gap: 8px;
     height: 40px;
     border-radius: 9999px;
     font-family: "Raleway", sans-serif;
     font-size: 16px;
     font-style: normal;
     font-weight: 600;
     line-height: 24px;
     text-decoration: underline;
     cursor: pointer;
     transition: opacity 0.3s ease;
     align-self: flex-start;
     margin-top: 24px;
     color: #000;
     /* texto negro */
     background: transparent;
     /* sin fondo */
     border: none;
 }

 /* Al hacer hover → texto al 25% de opacidad */
 #show-full-list:hover {
     opacity: 0.25;
 }

 /* Al hacer click (activo) → vuelve al 100% */
 #show-full-list:active {
     opacity: 1;
 }


 /* === MODAL === */
 .full-list-modal {
     display: none;
     position: fixed;
     z-index: 10000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow-y: auto;
     background-color: rgba(0, 0, 0, 0.6);
 }

 /* Contenedor del modal */
 .full-list-content {
     background-color: #fff;
     margin: 5% auto;
     padding: 64px;
     border-radius: 24px;
     max-width: 720px;
     position: relative;
     text-align: center;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 }

 /* Título */
 .full-list-content h3 {
     margin-bottom: 24px;
     font-family: "Raleway", sans-serif;
     font-size: 24px;
     color: #000;
 }

 /* Botón de cierre dentro */
 .close {
     position: absolute;
     top: 24px;
     right: 48px;
     font-size: 48px;
     font-weight: 400;
     cursor: pointer;
     color: #000;
     transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
 }

 .close:hover {
     opacity: 0.25;
     transform: scale(1.1);
     /* aumenta un poco el tamaño */
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     /* sombra ligera al hacer hover */
 }


 /* === LISTA DE HERRAMIENTAS === */
 .tool-list {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 20px;
 }

 .tool-list .tool {
     width: 100px;
     height: 100px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     border-radius: 16px;
     background-color: #f3f3f3;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
     overflow: hidden;
     padding: 4px;
     transition: transform 0.3s, box-shadow 0.3s;
 }

 .tool-list .tool:hover {
     transform: translateY(-4px);
     box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
 }

 .tool-list .tool img {
     width: 48px;
     height: auto;
     object-fit: contain;
     margin-bottom: 16px;
 }

 .tool-list .tool .tool-name {
     font-family: "Raleway", sans-serif;
     font-size: 12px;
     font-weight: 600;
     text-align: center;
     line-height: 12px;
     color: #000;
 }

 /* === PERSONALIZACIONES INDIVIDUALES === */
 .tool-list .tool.adobe img {
     width: 52px;
 }

 .tool-list .tool.adobe .tool-name {
     color: #fff;
 }

 .tool-list .tool.figma img {
     height: 44px;
 }

 .tool-list .tool.figma .tool-name {
     color: #fff;
 }

 .tool-list .tool.photoshop img {
     width: 45px;
 }

 .tool-list .tool.photoshop .tool-name {
     color: #fff;
 }

 .tool-list .tool.premiere img {
     width: 40px;
 }

 .tool-list .tool.premiere .tool-name {
     color: #fff;
 }

 .tool-list .tool.after img {
     width: 50px;
 }

 .tool-list .tool.after .tool-name {
     color: #fff;
 }

 .tool-list .tool.illustrator img {
     height: 36px;
 }

 .tool-list .tool.illustrator .tool-name {
     color: #fff;
 }

 .tool-list .tool.indesign img {
     height: 36px;
 }

 .tool-list .tool.indesign .tool-name {
     color: #fff;
 }

 .tool-list .tool.lightroom img {
     width: 38px;
 }

 .tool-list .tool.lightroom .tool-name {
     color: #fff;
 }

 .tool-list .tool.tool.substance img {
     width: 38px;
 }

 .tool-list .tool.substance .tool-name {
     color: #fff;
 }

 .tool-list .tool.tool.autocad img {
     height: 44px;
 }

 .tool-list .tool.autocad .tool-name {
     color: #000;
 }

 .tool-list .tool.maya img {
     height: 44px;
 }

 .tool-list .tool.maya .tool-name {
     color: #000;
 }

 .tool-list .tool.tool.blender img {
     height: 44px;
 }

 .tool-list .tool.blender .tool-name {
     color: #000;
 }

 .tool-list .tool.keyshot img {
     height: 44px;
 }

 .tool-list .tool.keyshot .tool-name {
     color: #000;
 }

 .tool-list .tool.davinci img {
     height: 44px;
 }

 .tool-list .tool.davinci .tool-name {
     color: #fff;
 }

 .tool-list .tool.unity img {
     height: 44px;
 }

 .tool-list .tool.unity .tool-name {
     color: #000;
 }

 .tool-list .tool.axure img {
     height: 40px;
 }

 .tool-list .tool.axure .tool-name {
     color: #000;
 }

 .tool-list .tool.github img {
     width: 54px;
 }

 .tool-list .tool.github .tool-name {
     color: #000;
 }

 .tool-list .tool.wordpress img {
     height: 44px;
 }

 .tool-list .tool.wordpress .tool-name {
     color: #000;
 }

 .tool-list .tool.notion img {
     height: 44px;
 }

 .tool-list .tool.notion .tool-name {
     color: #000;
 }

 .tool-list .tool.slack img {
     height: 44px;
 }

 .tool-list .tool.slack .tool-name {
     color: #000;
 }

 .tool-list .tool.jira img {
     height: 44px;
 }

 .tool-list .tool.jira .tool-name {
     color: #000;
 }

 .tool-list .tool.androidstudio img {
     height: 44px;
 }

 .tool-list .tool.androidstudio .tool-name {
     color: #000;
 }

 .tool-list .tool.vscode img {
     height: 44px;
 }

 .tool-list .tool.vscode .tool-name {
     color: #000;
 }

 .tool-list .tool.html img {
     height: 44px;
 }

 .tool-list .tool.html .tool-name {
     color: #000;
 }

 .tool-list .tool.css img {
     height: 44px;
 }

 .tool-list .tool.css .tool-name {
     color: #000;
 }


 .tool-list .tool.js img {
     height: 44px;
 }

 .tool-list .tool.js .tool-name {
     color: #000;
 }

 .tool-list .tool.php img {
     height: 44px;
 }

 .tool-list .tool.php .tool-name {
     color: #000;
 }

 .tool-list .tool.mysql img {
     width: 64px;
 }

 .tool-list .tool.mysql .tool-name {
     color: #000;
 }

 .tool-list .tool.react img {
     height: 44px;
 }

 .tool-list .tool.react .tool-name {
     color: #000;
 }







 /* ===================== Lines ==================== */
 /* === SECCIÓN DE LÍNEAS === */
 .lines-section {
     position: relative;
     width: 100%;
     padding-bottom: 20px;
 }

 .lines-container {
     position: relative;
     width: 100%;
     height: 80px;
     /* altura total */
     display: flex;
     justify-content: center;
     align-items: center;
 }

 /* Línea inclinada 3º (fondo rosa claro) */
 .line1 {
     width: 100%;
     height: 56px;
     background-color: #FEECF7;
     transform: skewY(-3deg);
     transform-origin: top left;
     position: absolute;
     top: 55px;
     left: 0;
     z-index: 1;
 }

 /* Línea inclinada -1.5º con texto */
 .line2 {
     width: 100%;
     height: 56px;
     background-color: #FBC3E7;
     transform: skewY(1.5deg);
     transform-origin: top left;
     overflow: hidden;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 2;

     display: flex;
     align-items: center;
     justify-content: center;
     /* centra horizontalmente el contenido */
 }

 /* Texto en movimiento tipo marquee */
 .marquee {
     display: flex;
     align-items: center;
     white-space: nowrap;
     position: relative;
     top: 0;
     transform: none;
     /* eliminamos el desplazamiento vertical manual */
     font-family: 'Raleway', sans-serif;
     font-size: 32px;
     line-height: 40px;
     color: #AC2B7F;
     font-weight: 400;
     letter-spacing: -2%;
     font-style: italic;
 }

 /* Contenedor interno del texto */
 .marquee-content {
     display: flex;
     align-items: center;
     gap: 48px;
     justify-content: center;
 }



 /* ===================== ABOUT ============================== */
 .custom-section {
     padding: 64px 123px;
     max-width: 1366px;
     margin: 0 auto;
     gap: 64px;
 }

 /* ====== Dos columnas con ancho fijo ====== */
 .two-columns {
     display: grid;
     grid-template-columns: 5fr 7fr;
     gap: 32px;
     margin-bottom: 48px;
     align-items: stretch;
 }

 /* ====== Apartado presentación ====== */
 .column-left {
     width: 100%;
 }

 .column-left img {
     width: 100%;
     height: 100%;
     border-radius: 24px;
     object-fit: cover;
     display: block;
 }

 .column-right {
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
 }

 /* Label */
 .section-label {
     background-color: #000;
     color: #fff;
     padding: 8px 16px;
     border-radius: 9999px;
     height: 40px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     white-space: nowrap;
     margin-bottom: 24px;

     font-size: 16px;
     line-height: 24px;
     letter-spacing: 0%;
     font-weight: 400;
     text-align: left;
 }

 /* Título */
 .section-title {
     font-size: 48px;
     line-height: 56px;
     letter-spacing: -2%;
     font-weight: 600;
     margin-bottom: 16px;
     text-align: left;
 }

 /* Primer párrafo */
 .section-text1 {
     font-size: 24px;
     line-height: 32px;
     letter-spacing: -2%;
     font-weight: 400;
     text-align: left;
     margin-bottom: 32px;
 }

 /* Segundo párrafo */
 .section-text2 {
     font-size: 20px;
     line-height: 28px;
     letter-spacing: 0%;
     font-weight: 400;
     text-align: left;
 }



 /* ====== Apartado my experiences ====== */
 .two-columns2 {
     display: grid;
     grid-template-columns: 5fr 7fr;
     gap: 32px;
     margin-bottom: 48px;
     align-items: start;
 }

 .column-left2,
 .column-right2 {
     width: 100%;
 }


 .left-title {
     font-size: 24px;
     line-height: 32px;
     letter-spacing: -2%;
     font-weight: 600;
     margin-bottom: 16px;
     text-align: left;
 }

 .left-text {
     font-size: 20px;
     line-height: 28px;
     letter-spacing: 0%;
     font-weight: 400;
     text-align: left;
     width: 100%;
 }

 .experience-card {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 24px;
     margin-bottom: 48px;
 }

 /* Logo + empresa */
 .company-info {
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .company-logo {
     width: 64px;
     height: 64px;
     object-fit: contain;
     border-radius: 9999px;
 }

 .company-text {
     display: flex;
     flex-direction: column;
 }

 .company-text h4 {
     font-size: 20px;
     line-height: 28px;
     letter-spacing: 0%;
     font-weight: 600;
     text-align: left;
     margin-bottom: 4px;
 }

 .company-text p {
     font-size: 16px;
     line-height: 24px;
     letter-spacing: 0%;
     font-weight: 400;
     text-align: left;
 }

 /* ====== Timeline ====== */
 .experience-details {
     position: relative;
     display: flex;
     flex-direction: column;
     gap: 24px;
     margin-left: 24px;
 }

 /* Línea vertical */
 .experience-details::before {
     content: "";
     position: absolute;
     left: 8px;
     top: 48px;
     bottom: 48px;
     width: 2px;
     height: 25%;
     background-color: #000;
 }

 /* Cada bloque */
 .experience-block {
     position: relative;
     display: flex;
     align-items: flex-start;
     gap: 16px;
 }

 /* Círculo */
 .timeline-dot {
     position: relative;
     width: 16px;
     height: 16px;
     background-color: #000;
     border-radius: 50%;
     flex-shrink: 0;
     margin-top: 4px;
 }

 /* Contenido */
 .experience-content {
     display: flex;
     flex-direction: column;
     margin-left: 48px;
 }

 .experience-title {
     font-size: 16px;
     line-height: 24px;
     font-weight: 600;
     margin-bottom: 4px;
 }

 .experience-subtitle {
     font-size: 16px;
     line-height: 24px;
     font-weight: 600;
     color: #5f5f5f;
     margin-bottom: 4px;
 }

 .experience-description {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
 }

 /* ====== Desplegables ====== */
 .accordions {
     display: flex;
     flex-direction: column;
 }

 .accordion {
     overflow: hidden;
 }

 /* Botón del desplegable */
 .accordion-header {
     background-color: transparent;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
     height: 56px;
     padding: 12px 24px;

     font-family: 'Raleway', sans-serif;
     color: #000000;
     font-size: 20px;
     line-height: 28px;
     letter-spacing: -2%;
     font-weight: 600;

     border: none;
     border-bottom: 1px solid black;

     /* Extra opcional para quitar blue highlight en iOS */
        -webkit-appearance: none;
        appearance: none;
        box-shadow: none;
        transition: color 0.2s;

     transition: background-color 0.3s ease, border-bottom-color 0.3s ease;
 }

 .accordion-header .arrow {
     width: 24px;
     height: 24px;
     transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
 }

 .accordion.active .arrow {
     transform: rotate(180deg);
 }

 /* Contenido desplegable */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 24px; /* 0 arriba/abajo, 24px izquierda/derecha */
    background-color: transparent;
    display: flex;
    flex-direction: column;
}

/* Estilos para los items de educación con imagen */
.accordion-grid .accordion-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-direction: row;
}

.accordion-grid{
    margin-bottom: 24px;
    margin-top: 24px;
}

.accordion-item .education-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 9999px;
    flex-shrink: 0; /* Evita que se comprima */
}

.accordion-item .education-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.education-title {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    margin-bottom: 0;
}

.education-institution {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #5f5f5f;
    margin-bottom: 0;
}

.education-dates {
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    margin-bottom: 0;
    color: #5f5f5f;
}

 /* ===== Knowledge & Skills ===== */

 .knowledge-skills-grid {
     display: flex;
     flex-direction: column;
     gap: 24px;
     /* separación entre Knowledge y Skills */
     margin-top: 24px;
 }

 .knowledge-section,
 .skills-section {
     display: flex;
     flex-direction: column;
     gap: 8px;
     /* separación entre título y lista */
 }

 .knowledge-section ul,
 .skills-section ul {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-wrap: wrap;
     gap: 8px 16px;
     /* separación entre elementos */
 }

 .knowledge-section li,
 .skills-section li {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     color: #000;
 }

 /* Opcional: formato de bullet visual */
 .knowledge-section li::before,
 .skills-section li::before {
     content: "•";
     margin-right: 8px;
     color: #000;
     font-weight: 600;
 }


 /* Contenedor general */
 /* Margen solo para educación */
 .accordion-grid:not(.languages-grid) .accordion-item {
     margin-bottom: 24px;
 }

 /* Idiomas sin margen extra */
 .languages-grid .accordion-item {
     margin-bottom: 0;
     gap: 4px;
 }

 .languages-grid {
     display: flex;
     flex-direction: column;
     gap: 4px;
     /* separación entre idiomas */
     margin-bottom: 0px;
 }

 /* Item general */
 .language-item {
     display: flex;
     flex-direction: column;
 }

 /* Texto base */
 .language {
     font-size: 16px;
     line-height: 24px;
     color: #000000;
     font-weight: 400;
 }

 .language strong {
     font-weight: 600;
     color: #000000;
 }




 /* Cuando está hover */
 /* Primer desplegable */
 .accordions .accordion:nth-child(1) .accordion-header:hover {
     background-color: #FBC3E7;
     border-bottom: 1px solid #DC38A3;
 }

 /* Segundo desplegable */
 .accordions .accordion:nth-child(2) .accordion-header:hover {
     background-color: #C3F5FB;
     border-bottom: 1px solid #2B9FAC;
 }

 /* Tercer desplegable */
 .accordions .accordion:nth-child(3) .accordion-header:hover {
     background-color: #FBFBC3;
     border-bottom: 1px solid #ACAB2B;
 }



 /* ===================== BANNER ============================== */
 /* Contenedor del banner con padding y ancho máximo */
 .banner-section {
     padding: 64px 123px;
     max-width: 1366px;
     margin: 0 auto;
 }

 /* Banner dentro del contenedor */
 .banner {
     position: relative;
     width: 100%;
     height: 400px;
     background-color: #ECFCFE;
     background-image: url('img/background_banner.png');
     background-size: cover;
     background-position: center;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     overflow: hidden;
     border-radius: 24px;
     padding: 48px;
     /* margen interno para todo el contenido */
     box-sizing: border-box;
 }

 /* Contenido centrado */
 .banner-content {
     color: #000;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 /* Título */
 .banner-title {
     color: #000;
     font-size: 56px;
     font-style: normal;
     font-weight: 600;
     line-height: 64px;
     letter-spacing: -1.12px;
     margin-bottom: 16px;
 }

 /* Subtítulo */
 .banner-subtitle {
     font-size: 28px;
     font-style: normal;
     font-weight: 400;
     line-height: 32px;
     letter-spacing: -2%;
     margin-bottom: 48px;
     margin-bottom: 24px;
 }

 /* Botón */
 .banner-btn {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 8px;
     padding: 12px 24px;
     height: 48px;
     border-radius: 9999px;
     font-family: "Raleway", sans-serif;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: 24px;
     text-decoration: none;
     cursor: pointer;
     transition: background 0.3s, color 0.3s, border 0.3s;
 }

 .banner-btn.primary {
     background: #000;
     color: #fff;
 }

 .banner-btn.primary:hover {
     background: rgba(0, 0, 0, 0.25);
     color: #fff;
 }

 .banner-btn.primary:active {
     background: transparent;
     color: #000;
     border: 1px solid transparent;
 }






























 /* ===== SECTION FOOTER ===== */
 footer {
     width: 100%;
     /* ancho total de la ventana */
     background: #000;
     /* todo negro */
     padding: 72px 123px;
     /* padding vertical */
     box-sizing: border-box;
     color: #fff;
     border-radius: 24px 24px 0 0;
 }

 /*--------------------Links-----------------------*/
 .footer-links {
     display: flex;
     justify-content: space-between;
     /* separar izquierda y derecha */
     align-items: center;
 }

 .footer-links-left,
 .footer-links-right {
     display: flex;
     align-items: center;
 }

 .footer-links-left {
     gap: 24px;
 }

 .footer-links-right {
     gap: 16px;
 }

 .footer-links-left a,
 .footer-links-right a {
     color: #FFF;
     font-family: 'Raleway', sans-serif;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 24px;
     /* 150% */
     text-decoration: none;
     transition: color 0.3s ease;
 }

 .footer-links-left a:hover,
 .footer-links-right a:hover {
     color: #ccc;
 }

 /* SVG dentro de footer-links-right */
 .footer-links-right svg {
     width: 24px;
     height: 24px;
     display: block;
     fill: currentColor !important;
     transition: fill 0.3s ease;
 }

 /* Si quieres que los iconos cambien color al hover */
 .footer-links-right a:hover svg {
     fill: #ccc;
 }


 /*--------------------cta-----------------------*/
 .footer-cta {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     /* centra el texto */
     margin: 48px 0;
     /* opcional, separa del resto del footer */
 }

 .footer-cta h6 {
     color: #FFF;
     font-family: 'Raleway', sans-serif;
     font-size: 32px;
     font-weight: 600;
     line-height: 40px;
     letter-spacing: -0.64px;
     text-align: center;
     margin-bottom: 16px;
 }

 .footer-cta p {
     color: #FFF;
     font-family: 'Raleway', sans-serif;
     font-size: 20px;
     font-weight: 400;
     line-height: 28px;
     text-align: center;
     max-width: 600px;
     margin-bottom: 24px;
 }

 .footer-cta .btn.footer-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 8px 16px;
     height: 40px;
     background: #fff;
     border: 1px solid transparent;
     border-radius: 9999px;
     text-decoration: none;
     color: #000;
     cursor: pointer;
     transition: background 0.3s, color 0.3s, border 0.3s;
 }

 .footer-cta .btn.footer-btn svg {
     width: 24px;
     height: 24px;
     transition: stroke 0.3s ease;
 }

 .footer-cta .btn.footer-btn span {
     font-family: "Raleway", sans-serif;
     font-size: 16px;
     font-weight: 400;
     line-height: 24px;
 }

 /* Hover */
 .footer-cta .btn.footer-btn:hover {
     background: rgba(255, 255, 255, 0.25);
     color: #fff;
 }

 .footer-cta .btn.footer-btn:hover svg path {
     stroke: #fff !important;
 }

 /* Estado al hacer clic */
 .footer-cta .btn.footer-btn:active {
     background: #000;
     color: #fff;
     border: 1px solid #000;
 }

 .footer-cta .btn.footer-btn:active svg path {
     stroke: #fff !important;
 }

 /*--------------------copy-----------------------*/

 .footer-copy {
     /*linia*/
     border-top: 1px solid #fff;
     padding-top: 48px;
     margin-top: 48px;

     /*contingut*/
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 16px;
     color: #FFF;
     font-family: 'Raleway', sans-serif;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 20px;
 }

 .footer-copy a {
     color: #FFF;
     text-decoration: u;
     transition: color 0.3s ease;
 }

 .footer-copy a:hover {
     color: #ccc;
 }

 /* ===== RESPONSIVE ===== */
 @media(max-width: 1265px) {

     /* Colores individuales */
     .tag1 {
         top: 550px;
         left: -70px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 495px;
         left: 65px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 570px;
         left: 300px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 440px;
         left: 0px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 445px;
         left: 300px;
         --rotate: 15deg;
     }

     .tag6 {
         top: 380px;
         left: -55px;
         --rotate: 0deg;
     }

     .tag7 {
         top: 365px;
         left: 330px;
         --rotate: 0deg;
     }

 }



 @media(max-width: 1175px) {

     /* Colores individuales */
     .tag1 {
         top: 550px;
         left: -90px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 495px;
         left: 0px;
         --rotate: 0deg;
     }

     .tag3 {
         top: 570px;
         left: 250px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 430px;
         left: -50px;
         --rotate: -5deg;
     }

     .tag5 {
         top: 465px;
         left: 250px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 350px;
         left: -30px;
         --rotate: 10deg;
     }

     .tag7 {
         top: 365px;
         left: 270px;
         --rotate: 0deg;
     }

 }

 /* ====================== Responsive: 2 columnas x 2 filas ====================== */
 @media (max-width: 1150px) {

     /* Ajuste del título */
     .work .title h6 {
         width: 100%;
         text-align: left;
         font-size: 28px;
         line-height: 36px;
         margin-bottom: 32px;
     }
 }

 @media (max-width: 1100px) {
     .cards {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media(max-width: 1050px) {

     /* Colores individuales */
     .tag1 {
         top: 550px;
         left: -50px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 490px;
         left: 0px;
         --rotate: 8deg;
     }

     .tag3 {
         top: 570px;
         left: 250px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 415px;
         left: -50px;
         --rotate: -5deg;
     }

     .tag5 {
         top: 430px;
         left: 200px;
         --rotate: 15deg;
     }

     .tag6 {
         top: 350px;
         left: -30px;
         --rotate: 10deg;
     }

     .tag7 {
         top: 365px;
         left: 245px;
         --rotate: 0deg;
     }

 }


 /* --------- 992px --------- */
 @media (max-width: 992px) {

     /* ========================================= NAVBAR ========================================================= */
     header.scrolled {
        padding: 16px 68px;
    }

    /* Ocultar links y botones desktop */
    .nav-links {
        display: none;
    }

    /* Botones de idioma y descarga se mantienen visibles */
    .nav-buttons {
        display: flex;
        gap: 16px;
    }

    /* Mobile menu button y logo a la izquierda */
    .navbar {
        justify-content: space-between;
    }

    /* Contenedor logo + menú móvil a la izquierda */
    .logo-menu-wrapper {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .mobile-menu-btn svg.menu-icon {
        width: 32px;
        height: 32px;
    }

    .mobile-menu-btn .menu-icon {
        color: #000;
    }

    header.scrolled .mobile-menu-btn .menu-icon {
        color: #fff;
    }

    /* Menú desplegable desde arriba */
    .mobile-menu {
        position: fixed;
        top: -100%;
        left: 0;
        width: 100%;
        background-color: #000;
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
        padding: 48px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        z-index: 200;
        transition: top 0.3s ease;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Mostrar menú cuando está activo */
    .mobile-menu.active {
        top: 0;
    }

    /* Header del menú móvil */
    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 24px;
    }

    .mobile-menu-header .close-icon {
        width: 32px;
        height: 32px;
        stroke: #fff;
        cursor: pointer;
        transition: opacity 0.3s ease;
    }

    .mobile-menu-header .close-icon:hover {
        opacity: 0.25;
    }

    .mobile-menu .close-icon path {
        stroke: #fff;
    }

    /* Lista de links móviles */
    .mobile-nav-links {
        display: flex;
        flex-direction: column;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* Links individuales */
    .mobile-nav-links li a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: #fff;
        font-size: 16px;
        font-weight: 400;
        font-family: "Raleway", sans-serif;
        text-decoration: none;
        padding: 12px 24px;
        height: 48px;
        border-radius: 8px;
        transition: background 0.3s;
    }

    /* Hover */
    .mobile-nav-links li a:hover {
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
    }

    /* Estado activo de links móviles (clase + click) */
    .mobile-nav-links li a.active,
    .mobile-nav-links li a:active {
        background: #fff;
        color: #000;
        border: 1px solid #fff;
    }

    /* Forzar active en menú móvil en cualquier página */
    .mobile-menu .mobile-nav-links li a.active {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #fff !important;
    }

    .mobile-menu-logo-text .circle.small {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
    }

    .mobile-menu-logo-text .circle.small img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        display: block;
    }

    .mobile-menu-logo-text {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .mobile-menu-logo-text p {
        margin: 0;
        color: #fff;
        font-size: 16px;
        font-family: "Raleway", sans-serif;
    }

    /* Colocar el selector de idioma al final del menú */
    .mobile-language {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
        display: flex;
        flex-direction: column;
        position: relative;
    }

    /* Botón principal del selector de idioma */
    .mobile-language > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
        font-size: 16px;
        text-decoration: none;
        padding: 12px 24px;
        height: 48px;
        border-radius: 8px;
        gap: 8px;
        transition: background 0.3s, color 0.3s;
    }

    /* Agrupador icono + texto */
    .mobile-language-label {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Icono del idioma (mundo) */
    .mobile-language-label svg {
        width: 20px;
        height: 20px;
        stroke: #fff;
        flex-shrink: 0;
    }

    /* Flecha de despliegue */
    .mobile-language .arrow {
        width: 24px;
        height: 24px;
        transition: transform 0.3s ease;
        flex-shrink: 0;
    }

    /* Dropdown del selector de idioma - cerrado por defecto */
    .mobile-language .dropdown-menu {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        background: #000;
        border-radius: 16px;
        padding: 0;
        margin-top: 4px;
        list-style: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    }

    /* Dropdown abierto */
    .mobile-language.open .dropdown-menu {
        max-height: 300px;
        opacity: 1;
        padding: 8px 0;
    }

    /* Flecha rotada cuando abierto */
    .mobile-language.open .arrow {
        transform: rotate(180deg);
    }

    /* Items del dropdown */
    .mobile-language .dropdown-menu li a {
        display: flex;
        align-items: center;
        padding: 12px 24px;
        font-size: 16px;
        color: #fff;
        text-decoration: none;
        transition: background 0.3s, color 0.3s;
        border-radius: 8px;
    }

    .mobile-language .dropdown-menu li a:hover {
        background: rgba(255, 255, 255, 0.25);
    }

    .mobile-language .dropdown-menu li a:active {
        background: #fff;
        color: #000;
    }

     /* ========================================= HERO ========================================================= */
     .hero {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 32px;
         padding: 64px 68px;
         align-items: stretch;
     }

     .hero-content {
         width: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
     }

     .hero-content h6,
     .hero-content h2,
     .hero-content p {
         width: 100%;
     }

     .hero-buttons {
         flex-wrap: wrap;
         gap: 16px;
     }

     .hero-image {
         width: 100%;
         height: 100%;
     }

     .hero-image img {
         width: 100%;
         height: 100%;
         object-fit: cover;
     }

     .tag {
         position: absolute;
         display: inline-flex;
         align-items: center;
         gap: 4px;
         padding: 12px 24px;
         height: 48px;
         border-radius: 9999px;
         cursor: pointer;
         opacity: 0;
         transform: translateY(-150px) rotate(0deg);
         overflow: visible;
         pointer-events: auto;
         white-space: nowrap;
     }

     .tag p {
         font-size: 16px;
         line-height: 24px;
         letter-spacing: -2%;
         font-weight: 600;
         text-align: center;
         white-space: nowrap;
     }

     .tag svg {
         width: 24px;
         height: 24px;
         flex-shrink: 0;
     }

     /* Colores individuales */
     .tag1 {
         top: 400px;
         left: -50px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 345px;
         left: 40px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 420px;
         left: 250px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 300px;
         left: -50px;
         --rotate: 5deg;
     }

     .tag5 {
         top: 310px;
         left: 250px;
         --rotate: 15deg;
     }

     .tag6 {
         top: 240px;
         left: -50px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 225px;
         left: 265px;
         --rotate: 0deg;
     }



     /* ========================================= WORK ========================================================= */
     .work {
         padding: 64px 68px;
     }

     .cards {
         grid-template-columns: repeat(2, 1fr);
     }

     /* ========================================= PROJECTS - CARDS STACKS ========================================================= */

     /* Padding general de la sección */
     .projects-stack {
         padding: 64px 68px;
     }

     /* Card principal */
     .stack-card {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         padding: 42px;
         gap: 32px;
         height: auto;
     }

     .stack-card .content-text,
     .stack-card .image {
         flex: 1 1 0;
         min-width: 0;
     }

     .stack-card .image img {
         width: 100%;
         height: auto;
         object-fit: cover;
         border-radius: 16px;
         display: block;
     }

     /* Topics: flex wrap para que bajen */
     .topics {
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
     }

     .topic {
         margin-bottom: 0px;
     }

     /* ========================================= TOOLS ========================================================= */
     .tools-section {
         padding: 64px 68px;
     }

     .carousel-inner {
         width: 480px;
         height: 110px;
     }


     #show-full-list {
         margin-top: 20px;
     }

     .carousel-wrapper::before,
     .carousel-wrapper::after {
         content: "";
         position: absolute;
         top: 0;
         width: 180px;
         /* antes 60px */
         height: 100%;
         z-index: 3;
         pointer-events: none;
     }

     /* ========================================= LINES ========================================================= */
     .lines-container {
         height: 64px;
     }

     .line1,
     .line2 {
         height: 44px;
     }

     .line1 {
         top: 45px;
     }

     .marquee {
         font-size: 28px;
         line-height: 36px;
     }

     .marquee-content {
         gap: 32px;
     }

     /* ========================================= ABOUT ========================================================= */
     /* Section general */
     .custom-section {
         padding: 64px 68px;
         max-width: 100%;
         gap: 32px;
     }

     /* ====== Dos columnas (presentación) ====== */
     .two-columns {
         display: grid;
         grid-template-columns: 5fr 7fr;
         gap: 32px;
         margin-bottom: 48px;
         align-items: stretch;
     }

     .column-left,
     .column-right {
         width: 100%;
         display: flex;
         flex-direction: column;
     }

     .column-left,
     .column-left img {
         height: 100%;
     }

     .column-left img {
         width: 100%;
         object-fit: cover;
         object-position: center;
         border-radius: 24px;
     }

     /* ====== Dos columnas (my experiences) ====== */
     .two-columns2 {
         display: grid;
         grid-template-columns: 5fr 7fr;
         align-items: flex-start;
     }

     .column-left2,
     .column-right2 {
         width: 100%;
         display: flex;
         flex-direction: column;
     }

     .left-text {
         width: 100%;
     }

     .experience-card {
         width: 100%;
         gap: 24px;
     }

     /* ====== Timeline y experiencia ====== */
     .experience-details {
         margin-left: 24px;
     }

     /* Línea vertical */
     .experience-details::before {
         content: "";
         position: absolute;
         left: 8px;
         top: 48px;
         bottom: 48px;
         width: 2px;
         height: 30%;
         background-color: #000;
     }

     /* ====== Desplegables ====== */
     .accordions {
         display: flex;
         flex-direction: column;
         width: 100%;
         gap: 0;
     }

     .accordion {
         width: 100%;
     }

     .accordion-header {
         width: 100%;
         padding: 12px 24px;
     }

     .accordion-content {
         width: 100%;
         padding: 0 24px;
     }

     /* ========================================= BANNER ========================================================= */
     .banner-section {
         padding: 64px 68px;
     }

     .banner {
         height: 400px;
         border-radius: 20px;
         padding: 32px;
         box-sizing: border-box;
     }


     /* ========================================= FOOTER ========================================================= */
     footer {
         padding: 72px 68px;
     }
 }


 @media screen and (min-width: 993px) {

     .mobile-menu,
     .mobile-menu-btn {
         display: none !important;
     }
 }

 @media(max-width:930px) {

     /* Colores individuales */
     .tag1 {
         top: 400px;
         left: -50px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 345px;
         left: 40px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 420px;
         left: 250px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 290px;
         left: -30px;
         --rotate: 5deg;
     }

     .tag5 {
         top: 310px;
         left: 230px;
         --rotate: 15deg;
     }

     .tag6 {
         top: 225px;
         left: -30px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 235px;
         left: 250px;
         --rotate: 0deg;
     }

 }

 @media(max-width:890px) {

     /* Colores individuales */
     .tag1 {
         top: 400px;
         left: -30px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 355px;
         left: 40px;
         --rotate: 0deg;
     }

     .tag3 {
         top: 420px;
         left: 230px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 295px;
         left: -30px;
         --rotate: 5deg;
     }

     .tag5 {
         top: 320px;
         left: 200px;
         --rotate: 15deg;
     }

     .tag6 {
         top: 225px;
         left: -30px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 235px;
         left: 225px;
         --rotate: 0deg;
     }

 }

 @media(max-width:868px) {

     /* Colores individuales */
     .tag1 {
         top: 440px;
         left: -30px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 390px;
         left: 40px;
         --rotate: 0deg;
     }

     .tag3 {
         top: 440px;
         left: 230px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 330px;
         left: -30px;
         --rotate: 5deg;
     }

     .tag5 {
         top: 340px;
         left: 200px;
         --rotate: 15deg;
     }

     .tag6 {
         top: 265px;
         left: -30px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 265px;
         left: 225px;
         --rotate: 0deg;
     }

 }

 @media (max-width: 844px) {
     .hero {
         display: grid;
         grid-template-columns: 1fr;
         gap: 48px;
         padding: 64px 68px;
         justify-items: center;
         text-align: center;
         align-items: start;
     }

     .hero-content {
         width: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
     }

     .tag1 {
         top: 420px;
         left: 100px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 375px;
         left: 230px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 420px;
         left: 450px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 335px;
         left: 135px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 345px;
         left: 420px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 295px;
         left: 80px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 275px;
         left: 470px;
         --rotate: 0deg;
     }

 }

 @media (max-width: 834px) {
     .tag1 {
         top: 420px;
         left: 80px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 375px;
         left: 210px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 420px;
         left: 430px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 335px;
         left: 115px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 345px;
         left: 400px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 290px;
         left: 60px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 275px;
         left: 450px;
         --rotate: 0deg;
     }
 }

 @media (max-width: 824px) {
     .tag1 {
         top: 410px;
         left: 70px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 365px;
         left: 200px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 410px;
         left: 420px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 325px;
         left: 105px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 335px;
         left: 390px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 280px;
         left: 50px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 265px;
         left: 440px;
         --rotate: 0deg;
     }
 }

 @media (max-width: 810px) {
     .tag1 {
         top: 400px;
         left: 85px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 355px;
         left: 215px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 400px;
         left: 435px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 315px;
         left: 120px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 325px;
         left: 405px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 270px;
         left: 65px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 255px;
         left: 445px;
         --rotate: 0deg;
     }
 }

 @media (max-width: 800px) {
     .tag1 {
         top: 395px;
         left: 75px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 350px;
         left: 205px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 395px;
         left: 435px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 310px;
         left: 110px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 320px;
         left: 395px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 265px;
         left: 55px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 250px;
         left: 435px;
         --rotate: 0deg;
     }
 }

 @media (max-width: 790px) {
     .tag1 {
         top: 385px;
         left: 65px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 340px;
         left: 195px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 385px;
         left: 425px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 300px;
         left: 100px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 310px;
         left: 385px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 255px;
         left: 45px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 240px;
         left: 425px;
         --rotate: 0deg;
     }
 }

 @media (max-width: 780px) {
     .tag1 {
         top: 380px;
         left: 55px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 335px;
         left: 185px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 380px;
         left: 415px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 295px;
         left: 90px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 305px;
         left: 375px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 250px;
         left: 35px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 235px;
         left: 415px;
         --rotate: 0deg;
     }
 }



 /* --------- 768px --------- */
 @media (max-width: 768px) {

     /* ========================================= NAVBAR ========================================================= */
     /* Ocultar botón de idioma en el navbar */
     .nav-buttons .dropdown {
         display: none !important;
     }

     /* Mostrar solo el botón secundario */
     .nav-buttons .btn.secondary {
         display: flex;
     }

     header.scrolled {
         padding: 16px 36px;
     }

     .mobile-language {
        display: none !important;
        /*Per a que surtin els idiomes*/
         /*display: flex !important;*/
         /* Sobrescribimos el display:none */
         flex-direction: column;
         margin-top: 16px;
         padding-top: 16px;
         border-top: 1px solid rgba(255, 255, 255, 0.25);
         position: relative;
     }




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

     .hero {
         display: grid;
         grid-template-columns: 1fr;
         gap: 48px;
         padding: 48px 36px;
         justify-items: center;
         text-align: center;
         align-items: start;
     }

     .hero-content {
         width: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
     }

     /* Título pequeño */
     .hero-content h6 {
         width: 100%;
         font-size: 24px;
         line-height: 32px;
         letter-spacing: -2%;
         margin-bottom: 16px;
         text-align: center;
     }

     /* Título principal */
     .hero-content h2 {
         width: 100%;
         font-size: 48px;
         line-height: 56px;
         letter-spacing: -2%;
         margin-bottom: 16px;
         text-align: center;
     }

     .hero-content h2 br {
         display: none;
     }

     /* Párrafo descriptivo */
     .hero-content p {
         width: 100%;
         font-size: 24px;
         line-height: 32px;
         letter-spacing: -2%;
         margin-bottom: 32px;
         text-align: center;
     }


     .hero-buttons {
         display: flex;
         gap: 16px;
         justify-content: center;
         flex-wrap: wrap;
         width: 100%;
     }

     .hero-buttons .hero-btn {
         max-width: 280px;
     }

     .hero-image {
         width: 100%;
         height: 400px;
     }

     .hero-image img {
         width: 100%;
         height: 100%;
         object-fit: cover;
     }

     .tag1 {
         top: 360px;
         left: 85px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 315px;
         left: 215px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 360px;
         left: 445px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 280px;
         left: 120px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 290px;
         left: 405px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 235px;
         left: 65px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 220px;
         left: 445px;
         --rotate: 0deg;
     }


     /* ========================================= WORK ========================================================= */
     .work {
         padding: 48px 36px;
     }

     /* Ajuste del título */
     .work .title h6 {
         width: 100%;
         text-align: left;
         font-size: 28px;
         line-height: 40px;
         letter-spacing: -2%;
     }

     /* Cards en dos columnas y dos filas */
     .cards {
         display: grid;
         grid-template-columns: 1fr;
         gap: 24px;
         width: 100%;
     }

     /* Card ajustes */
     .card {
         width: 100%;
         padding: 24px;
         border-radius: 24px;
         height: auto;
     }

     /*.card-title{
        font-size: 20px;
        line-height: 28px;
     }*/

     /* ========================================= PROJECTS - CARDS STACKS ========================================================= */
     /* Sección Projects Stack */
     .projects-stack {
         padding: 48px 36px;
     }

     /* Título de la sección Featured Projects */
     .title h3 {
         font-size: 40px;
         line-height: 48px;
         letter-spacing: -2%;
     }

     /* Descripción debajo del título */
     .title p {
         font-size: 20px;
         line-height: 28px;
         letter-spacing: 0;

     }

     /* Cards Stack */
     .cards-stack {
         display: flex;
         flex-direction: column;
         gap: 32px;
         height: auto;
     }

     /* Cada Card */
     .stack-card {
         flex-direction: column;
         align-items: center;
         text-align: center;
         padding: 32px;
         height: auto;
         gap: 32px;
     }

     /* Contenido de texto */
     .stack-card .content-text {
         width: 100%;
     }

     /* Imagen */
     .stack-card .image {
         width: 100%;
         height: 320px;
         /* altura fija */
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .stack-card .image img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         border-radius: 16px;
     }

     /* Topics: flex wrap para que bajen si no caben */
     .topics {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         gap: 8px;
     }

     .topic {
         margin-bottom: 0;
     }

     /* Card text */
     .card-text h6 {
         font-size: 32px;
         line-height: 40px;
         text-align: center;
     }

     .card-text p {
         font-size: 16px;
         line-height: 24px;
         text-align: center;
         margin-bottom: 32px;
     }


     /* ========================================= TOOLS ========================================================= */
     .tools-section {
         padding: 48px 36px;
     }

     .tools-text h6 {
         font-size: 28px;
         line-height: 40px;
     }

     .tools-text p {
         font-size: 20px;
         line-height: 28px;
     }

     .carousel-inner {
         width: 400px;
         height: 100px;
     }

     .track {
         gap: 16px;
     }

     .tool {
         width: 80px;
         height: 80px;
     }

     .tool img {
         width: 38px;
         height: 38px;
     }

     .floating-popup {
         width: 168px;
         font-size: 13px;
     }

     .full-list {
         position: fixed;
         top: 0;
         left: 0;
         width: 100vw;
         height: 100vh;

         background: rgba(255, 255, 255, 0.98);
         backdrop-filter: blur(8px);

         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: flex-start;

         padding: 24px 16px;
         overflow-y: auto;
         z-index: 9999;
     }

     .full-list .tool {
         width: 80px;
         height: 80px;
         margin: 8px;
     }

     .full-list h3,
     .full-list h4 {
         font-size: 18px;
         margin-bottom: 12px;
     }

     /* Si el botón de cierre existe */
     .full-list .close-btn {
         position: absolute;
         top: 16px;
         right: 16px;
         font-size: 20px;
         cursor: pointer;
     }

     /* ========================================= LINES ========================================================= */
     .lines-container {
         height: 56px;
     }

     .line1,
     .line2 {
         height: 40px;
     }

     .line1 {
         top: 40px;
     }

     .marquee {
         font-size: 20px;
         line-height: 30px;
     }

     .marquee-content {
         gap: 16px;
     }

     /* ========================================= ABOUT ========================================================= */
     .custom-section {
         padding: 48px 36px;
         /* padding más reducido en móviles */
         gap: 32px;
     }

     /* ====== Apilar columnas en una sola columna ====== */
     .two-columns,
     .two-columns2 {
         display: grid;
         grid-template-columns: 1fr;
         /* todo en una columna */
         gap: 32px;
     }

     .column-left,
     .column-right,
     .column-left2,
     .column-right2 {
         width: 100%;
         /* ocupar todo el ancho */
         display: flex;
         flex-direction: column;
     }

     /* Imagen ocupa todo el ancho */
     .column-left img {
         width: 100%;
         height: auto;
         /* mantiene proporción */
         object-fit: cover;
     }

     /* Textos y cards ocupan todo el ancho */
     .left-text,
     .experience-card {
         width: 100%;
     }

     /* Desplegables ocupan todo el ancho */
     .accordions {
         width: 100%;
     }

     .accordion,
     .accordion-header,
     .accordion-content {
         width: 100%;
     }


     .section-title {
         font-size: 36px;
         /* más pequeño pero sigue destacado */
         line-height: 44px;
         letter-spacing: -2%;
     }


     /* Línea vertical */
     .experience-details::before {
         content: "";
         position: absolute;
         left: 8px;
         top: 48px;
         bottom: 48px;
         width: 2px;
         height: 23%;
         background-color: #000;
     }

     /* ========================================= BANNER ========================================================= */
     .banner-section {
         padding: 48px 36px;
     }

     .banner {
         min-height: 400px;
         height: auto;
         padding: 24px;
         /* margen interno para todo el contenido */
         box-sizing: border-box;
     }

     .banner-title {
         font-size: 40px;
         line-height: 48px;
         letter-spacing: -2%;
     }

     .banner-subtitle {
         font-size: 20px;
         line-height: 28px;
     }

     /* ========================================= FOOTER ========================================================= */
     footer {
         padding: 72px 36px;
     }

     .footer-cta h6 {
         font-size: 24px;
         line-height: 32px;
         letter-spacing: -2%;
     }

     .footer-cta p {
         font-size: 18px;
         line-height: 24px;
     }
 }

 @media(max-width:750px) {
     .tag1 {
         top: 360px;
         left: 75px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 315px;
         left: 205px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 360px;
         left: 435px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 280px;
         left: 110px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 290px;
         left: 395px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 235px;
         left: 55px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 220px;
         left: 435px;
         --rotate: 0deg;
     }
     

 }


 @media(max-width:735px) {
     .tag1 {
         top: 360px;
         left: 70px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 315px;
         left: 200px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 360px;
         left: 430px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 280px;
         left: 105px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 290px;
         left: 390px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 235px;
         left: 50px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 220px;
         left: 430px;
         --rotate: 0deg;
     }
 }

 @media(max-width:725px) {
     .tag1 {
         top: 360px;
         left: 65px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 315px;
         left: 195px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 360px;
         left: 425px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 280px;
         left: 100px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 290px;
         left: 385px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 235px;
         left: 45px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 220px;
         left: 425px;
         --rotate: 0deg;
     }
 }

 @media(max-width:710px) {
     .tag1 {
         top: 360px;
         left: 60px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 315px;
         left: 190px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 360px;
         left: 420px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 280px;
         left: 95px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 290px;
         left: 380px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 235px;
         left: 40px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 220px;
         left: 420px;
         --rotate: 0deg;
     }
 }

 @media(max-width:700px) {
     .tag1 {
         top: 360px;
         left: 55px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 315px;
         left: 185px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 360px;
         left: 415px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 280px;
         left: 90px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 290px;
         left: 375px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 235px;
         left: 35px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 220px;
         left: 415px;
         --rotate: 0deg;
     }
 }

 @media(max-width:690px) {
     .tag1 {
         top: 360px;
         left: 45px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 315px;
         left: 175px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 360px;
         left: 405px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 280px;
         left: 80px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 290px;
         left: 365px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 235px;
         left: 25px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 220px;
         left: 405px;
         --rotate: 0deg;
     }
 }

 @media(max-width:680px) {
     .tag1 {
         top: 360px;
         left: 40px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 315px;
         left: 170px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 360px;
         left: 400px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 280px;
         left: 75px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 290px;
         left: 360px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 235px;
         left: 20px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 220px;
         left: 400px;
         --rotate: 0deg;
     }
 }

 @media(max-width:670px) {
     .tag1 {
         top: 360px;
         left: 35px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 315px;
         left: 165px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 360px;
         left: 395px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 280px;
         left: 70px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 290px;
         left: 355px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 235px;
         left: 15px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 220px;
         left: 395px;
         --rotate: 0deg;
     }
 }

 @media(max-width:660px) {
     .tag1 {
         top: 360px;
         left: 30px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 315px;
         left: 160px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 360px;
         left: 390px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 280px;
         left: 65px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 290px;
         left: 350px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 235px;
         left: 10px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 220px;
         left: 390px;
         --rotate: 0deg;
     }
 }

 @media(max-width:655px) {
     .tag1 {
         top: 360px;
         left: 25px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 315px;
         left: 155px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 360px;
         left: 385px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 280px;
         left: 60px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 290px;
         left: 345px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 235px;
         left: 5px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 220px;
         left: 385px;
         --rotate: 0deg;
     }
 }

 @media(max-width:645px) {
     .tag1 {
         top: 360px;
         left: 20px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 315px;
         left: 150px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 360px;
         left: 380px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 280px;
         left: 55px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 290px;
         left: 340px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 235px;
         left: 5px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 220px;
         left: 380px;
         --rotate: 0deg;
     }

 }

 @media(max-width:640px) {
     .tag1 {
         top: 350px;
         left: 50px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 305px;
         left: 140px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 350px;
         left: 360px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 270px;
         left: 80px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 280px;
         left: 320px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 225px;
         left: 30px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 210px;
         left: 360px;
         --rotate: 0deg;
     }
 }

 @media(max-width:630px) {
     .tag1 {
         top: 350px;
         left: 40px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 305px;
         left: 130px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 350px;
         left: 350px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 270px;
         left: 70px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 280px;
         left: 310px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 225px;
         left: 20px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 210px;
         left: 350px;
         --rotate: 0deg;
     }
 }

 @media(max-width:620px) {
     .tag1 {
         top: 350px;
         left: 35px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 305px;
         left: 125px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 350px;
         left: 345px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 270px;
         left: 65px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 280px;
         left: 305px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 225px;
         left: 15px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 210px;
         left: 345px;
         --rotate: 0deg;
     }
 }

 @media(max-width:610px) {
     .tag1 {
         top: 350px;
         left: 30px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 305px;
         left: 120px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 350px;
         left: 340px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 270px;
         left: 60px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 280px;
         left: 300px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 225px;
         left: 10px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 210px;
         left: 340px;
         --rotate: 0deg;
     }
 }

 @media(max-width:600px) {
     .tag1 {
         top: 350px;
         left: 25px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 305px;
         left: 115px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 350px;
         left: 335px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 270px;
         left: 55px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 280px;
         left: 295px;
         --rotate: 23deg;
     }

     .tag6 {
         top: 225px;
         left: 5px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 210px;
         left: 335px;
         --rotate: 0deg;
     }
 }

 @media(max-width:590px) {
     .tag1 {
         top: 330px;
         left: 40px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 290px;
         left: 130px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 330px;
         left: 300px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 250px;
         left: 75px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 245px;
         left: 285px;
         --rotate: 10deg;
     }

     .tag6 {
         top: 215px;
         left: 25px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 190px;
         left: 310px;
         --rotate: 0deg;
     }
 }

 @media(max-width:580px) {
     .tag1 {
         top: 330px;
         left: 35px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 290px;
         left: 125px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 330px;
         left: 295px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 250px;
         left: 70px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 245px;
         left: 280px;
         --rotate: 10deg;
     }

     .tag6 {
         top: 215px;
         left: 20px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 190px;
         left: 305px;
         --rotate: 0deg;
     }
 }

 @media(max-width:570px) {
     .tag1 {
         top: 330px;
         left: 30px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 290px;
         left: 120px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 330px;
         left: 290px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 250px;
         left: 65px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 245px;
         left: 275px;
         --rotate: 10deg;
     }

     .tag6 {
         top: 215px;
         left: 15px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 190px;
         left: 300px;
         --rotate: 0deg;
     }
 }

 @media(max-width:560px) {
     .tag1 {
         top: 330px;
         left: 20px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 290px;
         left: 110px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 330px;
         left: 280px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 250px;
         left: 55px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 245px;
         left: 265px;
         --rotate: 10deg;
     }

     .tag6 {
         top: 215px;
         left: 5px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 190px;
         left: 290px;
         --rotate: 0deg;
     }
 }


 @media (max-width: 550px) {
     .tag {
         position: absolute;
         display: inline-flex;
         align-items: center;
         gap: 4px;

         /* Padding ajustado */
         padding: 8px 16px;
         height: 40px;
         border-radius: 9999px;
         cursor: pointer;

         /* Estado inicial */
         opacity: 0;
         transform: translateY(-150px) rotate(0deg);
         overflow: visible;
         pointer-events: auto;
         white-space: nowrap;
     }

     .tag p {
         font-size: 16px;
         /* Igual que antes */
         line-height: 24px;
         letter-spacing: -2%;
         font-weight: 600;
         text-align: center;
         white-space: nowrap;
     }

     .tag svg {
         width: 24px;
         /* SVG 24px */
         height: 24px;
         flex-shrink: 0;
     }

     .tag1 {
         top: 360px;
         left: 25px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 325px;
         left: 100px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 360px;
         left: 260px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 285px;
         left: 50px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 280px;
         left: 250px;
         --rotate: 10deg;
     }

     .tag6 {
         top: 240px;
         left: 25px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 230px;
         left: 275px;
         --rotate: 0deg;
     }

     .carousel-inner {
         width: 300px;
         height: 100px;
     }

     .carousel-wrapper::before,
     .carousel-wrapper::after {
         content: "";
         position: absolute;
         top: 0;
         width: 90px;
         /* más ancho para mejor difuminado */
         height: 100%;
         z-index: 5;
         pointer-events: none;
     }

     .footer-links {
         flex-direction: column;
         align-items: center;
         gap: 16px;
     }

     .footer-copy {
         flex-direction: column;
         align-items: center;
         gap: 16px;
     }
 }

 @media(max-width:530px) {
     .tag1 {
         top: 360px;
         left: 20px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 325px;
         left: 95px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 360px;
         left: 255px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 285px;
         left: 45px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 280px;
         left: 245px;
         --rotate: 10deg;
     }

     .tag6 {
         top: 240px;
         left: 20px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 230px;
         left: 270px;
         --rotate: 0deg;
     }
 }

 @media screen and (max-width: 520px) {
     header.scrolled {
         padding: 16px 36px;
     }

     .btn.secondary span {
         font-size: 0;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         height: 100%;
     }

     .btn.secondary span::before {
         content: "CV";
         font-size: 16px;
         font-family: "Raleway", sans-serif;
         font-weight: 400;
         color: inherit;
         line-height: 1;
         /* Ajusta línea para centrar */
     }

     .btn.secondary span {
         font-size: 0;
         /* Oculta el texto original "Download CV" */
     }

     .btn.secondary span::before {
         font-size: 16px;
         font-family: "Raleway", sans-serif;
         font-weight: 400;
         color: inherit;
     }

     .tag1 {
         top: 360px;
         left: 15px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 325px;
         left: 90px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 360px;
         left: 250px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 285px;
         left: 40px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 280px;
         left: 240px;
         --rotate: 10deg;
     }

     .tag6 {
         top: 240px;
         left: 15px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 230px;
         left: 265px;
         --rotate: 0deg;
     }

 }

 @media(max-width: 510px) {
     .tag1 {
         top: 360px;
         left: 10px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 325px;
         left: 85px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 360px;
         left: 245px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 285px;
         left: 35px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 280px;
         left: 235px;
         --rotate: 10deg;
     }

     .tag6 {
         top: 240px;
         left: 10px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 230px;
         left: 260px;
         --rotate: 0deg;
     }

 }

 @media(max-width: 500px) {
     .tag1 {
         top: 360px;
         left: 40px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 310px;
         left: 90px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 360px;
         left: 240px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 270px;
         left: 30px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 260px;
         left: 200px;
         --rotate: 10deg;
     }

     .tag6 {
         top: 225px;
         left: 25px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 210px;
         left: 230px;
         --rotate: 0deg;
     }
 }

 @media(max-width: 490px) {
     .tag1 {
         top: 360px;
         left: 35px;
         /* 40 - 5 */
         --rotate: 15deg;
     }

     .tag2 {
         top: 310px;
         left: 85px;
         /* 90 - 5 */
         --rotate: -5deg;
     }

     .tag3 {
         top: 360px;
         left: 235px;
         /* 240 - 5 */
         --rotate: 10deg;
     }

     .tag4 {
         top: 270px;
         left: 25px;
         /* 30 - 5 */
         --rotate: -15deg;
     }

     .tag5 {
         top: 260px;
         left: 195px;
         /* 200 - 5 */
         --rotate: 10deg;
     }

     .tag6 {
         top: 225px;
         left: 20px;
         /* 25 - 5 */
         --rotate: -2deg;
     }

     .tag7 {
         top: 210px;
         left: 225px;
         /* 230 - 5 */
         --rotate: 0deg;
     }
 }

 @media(max-width: 480px) {
     .tag1 {
         top: 360px;
         left: 30px;
         /* 35 - 5 */
         --rotate: 15deg;
     }

     .tag2 {
         top: 310px;
         left: 80px;
         /* 85 - 5 */
         --rotate: -5deg;
     }

     .tag3 {
         top: 360px;
         left: 230px;
         /* 235 - 5 */
         --rotate: 10deg;
     }

     .tag4 {
         top: 270px;
         left: 20px;
         /* 25 - 5 */
         --rotate: -15deg;
     }

     .tag5 {
         top: 260px;
         left: 190px;
         /* 195 - 5 */
         --rotate: 10deg;
     }

     .tag6 {
         top: 225px;
         left: 15px;
         /* 20 - 5 */
         --rotate: -2deg;
     }

     .tag7 {
         top: 210px;
         left: 220px;
         /* 225 - 5 */
         --rotate: 0deg;
     }

     .topics {
    display: none !important;
  }

     
 }

 @media(max-width: 470px) {
     .tag1 {
         top: 360px;
         left: 25px;
         /* 30 - 5 */
         --rotate: 15deg;
     }

     .tag2 {
         top: 310px;
         left: 75px;
         /* 80 - 5 */
         --rotate: -5deg;
     }

     .tag3 {
         top: 360px;
         left: 225px;
         /* 230 - 5 */
         --rotate: 10deg;
     }

     .tag4 {
         top: 270px;
         left: 15px;
         /* 20 - 5 */
         --rotate: -15deg;
     }

     .tag5 {
         top: 260px;
         left: 185px;
         /* 190 - 5 */
         --rotate: 10deg;
     }

     .tag6 {
         top: 225px;
         left: 10px;
         /* 15 - 5 */
         --rotate: -2deg;
     }

     .tag7 {
         top: 210px;
         left: 215px;
         /* 220 - 5 */
         --rotate: 0deg;
     }
 }

 @media(max-width: 460px) {
     .tag1 {
         top: 360px;
         left: 20px;
         /* 25 - 5 */
         --rotate: 15deg;
     }

     .tag2 {
         top: 310px;
         left: 70px;
         /* 75 - 5 */
         --rotate: -5deg;
     }

     .tag3 {
         top: 360px;
         left: 220px;
         /* 225 - 5 */
         --rotate: 10deg;
     }

     .tag4 {
         top: 270px;
         left: 10px;
         /* 15 - 5 */
         --rotate: -15deg;
     }

     .tag5 {
         top: 260px;
         left: 180px;
         /* 185 - 5 */
         --rotate: 10deg;
     }

     .tag6 {
         top: 225px;
         left: 5px;
         /* 10 - 5 */
         --rotate: -2deg;
     }

     .tag7 {
         top: 210px;
         left: 210px;
         /* 215 - 5 */
         --rotate: 0deg;
     }
 }

 @media(max-width: 450px) {
     .tag1 {
         top: 355px;
         left: 30px;
         --rotate: 15deg;
     }

     .tag2 {
         top: 310px;
         left: 75px;
         --rotate: -5deg;
     }

     .tag3 {
         top: 355px;
         left: 200px;
         --rotate: 10deg;
     }

     .tag4 {
         top: 275px;
         left: 20px;
         --rotate: -15deg;
     }

     .tag5 {
         top: 250px;
         left: 150px;
         --rotate: 18deg;
     }

     .tag6 {
         top: 225px;
         left: 35px;
         --rotate: -2deg;
     }

     .tag7 {
         top: 200px;
         left: 190px;
         --rotate: 0deg;
     }
 }

 @media(max-width: 440px) {
     .tag1 {
         top: 355px;
         left: 23px;
         /* 25 - 2 */
         --rotate: 15deg;
     }

     .tag2 {
         top: 310px;
         left: 68px;
         /* 70 - 2 */
         --rotate: -5deg;
     }

     .tag3 {
         top: 355px;
         left: 193px;
         /* 195 - 2 */
         --rotate: 10deg;
     }

     .tag4 {
         top: 275px;
         left: 13px;
         /* 15 - 2 */
         --rotate: -15deg;
     }

     .tag5 {
         top: 250px;
         left: 143px;
         /* 145 - 2 */
         --rotate: 18deg;
     }

     .tag6 {
         top: 225px;
         left: 28px;
         /* 30 - 2 */
         --rotate: -2deg;
     }

     .tag7 {
         top: 200px;
         left: 183px;
         /* 185 - 2 */
         --rotate: 0deg;
     }
 }

 @media(max-width: 430px) {
     .tag1 {
         top: 355px;
         left: 18px;
         /* 23 - 5 */
         --rotate: 15deg;
     }

     .tag2 {
         top: 310px;
         left: 63px;
         /* 68 - 5 */
         --rotate: -5deg;
     }

     .tag3 {
         top: 355px;
         left: 188px;
         /* 193 - 5 */
         --rotate: 10deg;
     }

     .tag4 {
         top: 275px;
         left: 8px;
         /* 13 - 5 */
         --rotate: -15deg;
     }

     .tag5 {
         top: 250px;
         left: 138px;
         /* 143 - 5 */
         --rotate: 18deg;
     }

     .tag6 {
         top: 225px;
         left: 23px;
         /* 28 - 5 */
         --rotate: -2deg;
     }

     .tag7 {
         top: 200px;
         left: 178px;
         /* 183 - 5 */
         --rotate: 0deg;
     }
 }

 @media(max-width: 420px) {
     .tag1 {
         top: 355px;
         left: 11px;
         /* 18 - 7 */
         --rotate: 15deg;
     }

     .tag2 {
         top: 310px;
         left: 56px;
         /* 63 - 7 */
         --rotate: -5deg;
     }

     .tag3 {
         top: 355px;
         left: 181px;
         /* 188 - 7 */
         --rotate: 10deg;
     }

     .tag4 {
         top: 275px;
         left: 1px;
         /* 8 - 7 */
         --rotate: -15deg;
     }

     .tag5 {
         top: 250px;
         left: 131px;
         /* 138 - 7 */
         --rotate: 18deg;
     }

     .tag6 {
         top: 225px;
         left: 16px;
         /* 23 - 7 */
         --rotate: -2deg;
     }

     .tag7 {
         top: 200px;
         left: 171px;
         /* 178 - 7 */
         --rotate: 0deg;
     }
 }


 @media(max-width: 416px) {
     .hero-buttons {
         display: flex;
         gap: 16px;
         justify-content: center;
         width: 100%;
     }

     .hero-buttons .hero-btn {
         flex: 1;
         max-width: none;
         text-align: center;
     }
 }

 @media(max-width: 410px) {

     .tag svg {
         display: none;
     }

     .tag1 {
         top: 365px;
         left: 28px;
         /* 18 + 10 */
         --rotate: 15deg;
     }

     .tag2 {
         top: 325px;
         left: 55px;
         /* 45 + 10 */
         --rotate: 0deg;
     }

     .tag3 {
         top: 365px;
         left: 170px;
         /* 160 + 10 */
         --rotate: 10deg;
     }

     .tag4 {
         top: 275px;
         left: 11px;
         /* 1 + 10 */
         --rotate: -15deg;
     }

     .tag5 {
         top: 280px;
         left: 141px;
         /* 131 + 10 */
         --rotate: 18deg;
     }

     .tag6 {
         top: 235px;
         left: 26px;
         /* 16 + 10 */
         --rotate: -2deg;
     }

     .tag7 {
         top: 235px;
         left: 181px;
         /* 171 + 10 */
         --rotate: 0deg;
     }

 }

 @media(max-width: 400px) {

     .tag svg {
         display: none;
     }

     .tag1 {
         top: 365px;
         left: 18px;
         /* 18 - 7 */
         --rotate: 15deg;
     }

     .tag2 {
         top: 325px;
         left: 45px;
         /* 63 - 7 */
         --rotate: 0deg;
     }

     .tag3 {
         top: 365px;
         left: 160px;
         /* 188 - 7 */
         --rotate: 10deg;
     }

     .tag4 {
         top: 275px;
         left: 1px;
         /* 8 - 7 */
         --rotate: -15deg;
     }

     .tag5 {
         top: 280px;
         left: 131px;
         /* 138 - 7 */
         --rotate: 18deg;
     }

     .tag6 {
         top: 235px;
         left: 16px;
         /* 23 - 7 */
         --rotate: -2deg;
     }

     .tag7 {
         top: 235px;
         left: 171px;
         /* 178 - 7 */
         --rotate: 0deg;
     }
 }

 @media(max-width: 390px) {

     .tag svg {
         display: none;
     }

     .tag1 {
         top: 365px;
         left: 15px;
         /* 13 + 2 */
         --rotate: 15deg;
     }

     .tag2 {
         top: 325px;
         left: 42px;
         /* 40 + 2 */
         --rotate: 0deg;
     }

     .tag3 {
         top: 365px;
         left: 157px;
         /* 155 + 2 */
         --rotate: 10deg;
     }

     .tag4 {
         top: 270px;
         left: 15px;
         /* -4 + 2 */
         --rotate: -15deg;
     }

     .tag5 {
         top: 285px;
         left: 135px;
         /* 126 + 2 */
         --rotate: 5deg;
     }

     .tag6 {
         top: 230px;
         left: 13px;
         /* 11 + 2 */
         --rotate: -2deg;
     }

     .tag7 {
         top: 235px;
         left: 168px;
         /* 166 + 2 */
         --rotate: 0deg;
     }

 }

 @media(max-width: 380px) {

     .tag svg {
         display: none;
     }

     .tag1 {
         top: 365px;
         left: 12px;
         /* 15 - 3 */
         --rotate: 15deg;
     }

     .tag2 {
         top: 325px;
         left: 39px;
         /* 42 - 3 */
         --rotate: 0deg;
     }

     .tag3 {
         top: 365px;
         left: 154px;
         /* 157 - 3 */
         --rotate: 10deg;
     }

     .tag4 {
         top: 270px;
         left: 12px;
         /* 15 - 3 */
         --rotate: -15deg;
     }

     .tag5 {
         top: 285px;
         left: 132px;
         /* 135 - 3 */
         --rotate: 5deg;
     }

     .tag6 {
         top: 230px;
         left: 10px;
         /* 13 - 3 */
         --rotate: -2deg;
     }

     .tag7 {
         top: 235px;
         left: 165px;
         /* 168 - 3 */
         --rotate: 0deg;
     }

     /*Stack*/
     .topics {
         display: none !important;
     }
 }


 @media(max-width: 370px) {

     .tag svg {
         display: none;
     }

     .tag1 {
         top: 365px;
         left: 7px;
         /* 12 - 5 */
         --rotate: 15deg;
     }

     .tag2 {
         top: 325px;
         left: 34px;
         /* 39 - 5 */
         --rotate: 0deg;
     }

     .tag3 {
         top: 365px;
         left: 149px;
         /* 154 - 5 */
         --rotate: 10deg;
     }

     .tag4 {
         top: 270px;
         left: 7px;
         /* 12 - 5 */
         --rotate: -15deg;
     }

     .tag5 {
         top: 285px;
         left: 127px;
         /* 132 - 5 */
         --rotate: 5deg;
     }

     .tag6 {
         top: 230px;
         left: 5px;
         /* 10 - 5 */
         --rotate: -2deg;
     }

     .tag7 {
         top: 235px;
         left: 160px;
         /* 165 - 5 */
         --rotate: 0deg;
     }
 }

 /* --------- 360px (móvil) --------- */
 @media (max-width: 360px) {
     header.scrolled {
         padding: 16px 14px;
     }

     /* ========================================= HERO ========================================================= */
     .hero {
         padding: 48px 14px;
     }



     /* Título pequeño */
     .hero-content h6 {
         font-size: 20px;
         line-height: 28px;
         letter-spacing: 0%;
     }

     /* Título principal */
     .hero-content h2 {
         font-size: 40px;
         line-height: 48px;
         letter-spacing: -2%;
     }

     .hero-content h2 br {
         display: none;
     }

     /* Párrafo descriptivo */
     .hero-content p {
         font-size: 20px;
         line-height: 28px;
         letter-spacing: 0%;
     }


     .hero-buttons {
         display: flex;
         gap: 16px;
         justify-content: center;
         width: 100%;
     }

     .hero-buttons .hero-btn {
         flex: 1;
         max-width: none;
         text-align: center;
     }


     .hero-image {
         width: 100%;
         height: 400px;
     }

     .hero-image img {
         width: 100%;
         height: 100%;
         object-fit: cover;
     }

     .tag1 {
         top: 375px;
         left: 28px;
         /* 12 - 5 */
         --rotate: 15deg;
     }

     .tag2 {
         top: 325px;
         left: 34px;
         /* 39 - 5 */
         --rotate: 0deg;
     }

     .tag3 {
         top: 365px;
         left: 180px;
         /* 154 - 5 */
         --rotate: 10deg;
     }

     .tag4 {
         top: 275px;
         left: 18px;
         /* 12 - 5 */
         --rotate: -15deg;
     }

     .tag5 {
         top: 285px;
         left: 155px;
         /* 132 - 5 */
         --rotate: 5deg;
     }

     .tag6 {
         top: 230px;
         left: 5px;
         /* 10 - 5 */
         --rotate: -2deg;
     }

     .tag7 {
         top: 235px;
         left: 180px;
         /* 165 - 5 */
         --rotate: 0deg;
     }

     /* ========================================= WORK ========================================================= */


     /* ========================================= PROJECTS - CARDS STACKS ========================================================= */
     /* Sección Projects Stack */
     .projects-stack {
         padding: 48px 14px;
     }

     /* Título de la sección Featured Projects */
     .title h3 {
         font-size: 36px;
         line-height: 44px;
         letter-spacing: -2%;
         text-align: center;
         width: 100%;
     }

     .title p {
         font-size: 20px;
         line-height: 28px;
         letter-spacing: 0%;
         text-align: center;
     }

     /* Cards Stack */
     .cards-stack {
         gap: 24px;
     }

     /* Cada Card */
     .stack-card {
         padding: 13px;
         gap: 24px;
     }

     /* Imagen */
     .stack-card .image {
         height: 320px;
     }

     /* Card text */
     .card-text h6 {
         font-size: 24px;
         line-height: 32px;
         letter-spacing: -2%;
     }

     .card-text p {
         margin-bottom: 24px;
     }

     /* ========================================= TOOLS ========================================================= */
     .tools-section {
         padding: 48px 14px;
         /* antes 48px 36px — más compacto */
     }

     .carousel-inner {
         width: 100%;
         max-width: 320px;
         height: 88px;
     }

     .track {
         gap: 16px;
     }

     .tool {
         width: 64px;
         height: 64px;
         border-radius: 10px;
     }

     .tool img {
         width: 32px;
         height: 32px;
     }

     .floating-popup {
         width: 140px;
         font-size: 12px;
     }

     /* ✅ La lista de herramientas en 2 columnas */
     .full-list-content .tool-list {
         display: grid !important;
         grid-template-columns: repeat(2, 1fr);
         gap: 14px;
         justify-items: center;
         width: 100%;
         margin: 0 auto;
     }

     .full-list-content .tool {
         width: 88px;
         height: 88px;
         margin: 0;
     }

     .full-list-content .tool img {
         width: 40px;
         height: auto;
         margin-bottom: 8px;
     }

     /* Botón de cierre */
     .full-list .close-btn {
         font-size: 16px;
         cursor: pointer;
     }

     .full-list-content .close {
         top: 8px;
         right: 24px;
     }

     /* ========================================= LINES ========================================================= */
     .lines-container {
         height: 48px;
     }

     .line1,
     .line2 {
         height: 32px;
     }

     .line1 {
         top: 32px;
     }

     .marquee {
         font-size: 16px;
         line-height: 22px;
     }

     .marquee-content {
         gap: 16px;
     }

     .marquee img {
         width: 16px;
         height: 16px;
     }

     /* ========================================= ABOUT ========================================================= */
     .custom-section {
         padding: 48px 14px;
     }

     /* ====== Títulos ====== */
     .section-title {
         font-size: 36px;
         line-height: 44px;
     }

     /* Primer párrafo */
     .section-text1 {
         font-size: 16px;
         line-height: 24px;
     }

     /* Segundo párrafo */
     .section-text2 {
         font-size: 16px;
         line-height: 24px;
     }

     /* ====== Apartado My Experiences ====== */
     .left-title {
         font-size: 24px;
         line-height: 32px;
     }

     .left-text {
         font-size: 16px;
         line-height: 24px;
     }


     /* ====== Desplegables ====== */
     .accordion-header {
         font-size: 16px;
         line-height: 22px;
         height: 48px;
         padding: 10px 16px;
     }

     .experience-details::before {
         content: "";
         position: absolute;
         left: 8px;
         top: 48px;
         bottom: 48px;
         width: 2px;
         height: 35%;
         background-color: #000;
     }

     /* ========================================= BANNER ========================================================= */
     .banner-section {
         padding: 48px 14px;
     }

     .banner {
         min-height: 400px;
         height: auto;
     }

     .banner-title {
         font-size: 36px;
         line-height: 44px;
         letter-spacing: -2%;
     }

     .banner-subtitle {
         font-size: 18px;
         line-height: 24px;
     }

     /* ========================================= FOOTER ========================================================= */
     footer {
         padding: 72px 14px;
     }
 }