:root {
            /* Tema normal por defecto - con nubes */
            --color-fondo: #1a0b2e;
            --color-fondo-oscuro: #0f051f;
            --color-fondo-claro: #2d1b4e;
            --color-primario: #00ff88;
            --color-primario-oscuro: #00cc6a;
            --color-primario-claro: #33ff9c;
            --color-texto: #ffffff;
            --color-texto-secundario: #b8b5c3;
            --color-bordes: rgba(255, 255, 255, 0.2);
            --color-sombra: rgba(0, 0, 0, 0.3);
            --color-nav: rgba(26, 11, 46, 0.9);
            --color-destacado: #ff6bcb;
            --color-acento: #ffa500;
            
            /* Variables para partículas */
            --color-particulas: #00ff88;
            --tipo-particulas: 'nubes';
            
            /* Variables para planta */
            --color-planta: #00ff88;
            --estado-planta: 'normal';
        }
        
        /* Estilos para Verano */
        .tema-verano {
            --color-fondo: #B02700;
            --color-fondo-oscuro: #8a1f00;
            --color-fondo-claro: #d13000;
            --color-primario: #F59F27;
            --color-primario-oscuro: #d4881a;
            --color-primario-claro: #f7b756;
            --color-texto: #FFFFFF;
            --color-texto-secundario: rgba(255, 255, 255, 0.8);
            --color-nav: rgba(120, 20, 0, 0.9);
            --color-destacado: #F075C1;
            --color-acento: #F59F27;
            --color-particulas: #F59F27;
            --tipo-particulas: 'barcos';
            --color-planta: #4CAF50;
            --estado-planta: 'verano';
        }

        /* Estilos para Primavera */
        .tema-primavera {
            --color-fondo: #2e7d32;
            --color-fondo-oscuro: #1b5e20;
            --color-fondo-claro: #4caf50;
            --color-primario: #81c784;
            --color-primario-oscuro: #66bb6a;
            --color-primario-claro: #a5d6a7;
            --color-texto: #FFFFFF;
            --color-texto-secundario: rgba(255, 255, 255, 0.8);
            --color-nav: rgba(46, 125, 50, 0.9);
            --color-destacado: #ffeb3b;
            --color-acento: #4caf50;
            --color-particulas: #ffeb3b;
            --tipo-particulas: 'pajaros';
            --color-planta: #81C784;
            --estado-planta: 'primavera';
        }

        /* Estilos para Otoño */
        .tema-otono {
            --color-fondo: #5d4037;
            --color-fondo-oscuro: #4e342e;
            --color-fondo-claro: #8d6e63;
            --color-primario: #ff9800;
            --color-primario-oscuro: #f57c00;
            --color-primario-claro: #ffb74d;
            --color-texto: #FFFFFF;
            --color-texto-secundario: rgba(255, 255, 255, 0.8);
            --color-nav: rgba(93, 64, 55, 0.9);
            --color-destacado: #e65100;
            --color-acento: #ff9800;
            --color-particulas: #e65100;
            --tipo-particulas: 'hojas';
            --color-planta: #FF9800;
            --estado-planta: 'otono';
        }

        /* Estilos para Invierno - Actualizados */
        .tema-invierno {
            --color-fondo: #0d1b47;
            --color-fondo-oscuro: #050a23;
            --color-fondo-claro: #152a6b;
            --color-primario: #272EF5;
            --color-primario-oscuro: #1a20cc;
            --color-primario-claro: #4a50f7;
            --color-texto: #FFFFFF;
            --color-texto-secundario: rgba(255, 255, 255, 0.8);
            --color-nav: rgba(13, 27, 71, 0.9);
            --color-destacado: #7C1CA6;
            --color-acento: #272EF5;
            --color-particulas: #7C1CA6;
            --tipo-particulas: 'nieve';
            --color-planta: #E1F5FE;
            --estado-planta: 'invierno';
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--color-fondo);
            color: var(--color-texto);
            overflow-x: hidden;
            line-height: 1.6;
            font-weight: 400;
            transition: background-color 0.5s ease, color 0.5s ease;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Playfair Display', serif;
            font-weight: 600;
            line-height: 1.2;
        }

        /* Navegación */
        .nav-elegante {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            padding: 1.5rem 2rem;
            background: var(--color-nav);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--color-bordes);
            transition: background-color 0.5s ease;
        }

        .nav-contenido {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .marca {
            display: flex;
            align-items: center;
        }

        .marca-texto {
            font-family: 'Playfair Display', serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-texto);
        }

        .controles-navegacion {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .selector-estaciones {
            position: relative;
        }

        .btn-estaciones {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid var(--color-bordes);
            color: var(--color-texto);
            padding: 0.5rem 1rem;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-estaciones:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .panel-estaciones {
            position: absolute;
            top: 100%;
            right: 0;
            background: var(--color-fondo-oscuro);
            border: 1px solid var(--color-bordes);
            border-radius: 10px;
            padding: 0.5rem;
            margin-top: 0.5rem;
            display: none;
            flex-direction: column;
            gap: 0.5rem;
            min-width: 150px;
            z-index: 1001;
        }

        .panel-estaciones.mostrar {
            display: flex;
        }

        .btn-estacion {
            background: transparent;
            border: 1px solid var(--color-bordes);
            color: var(--color-texto);
            padding: 0.5rem 1rem;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: left;
            font-weight: bolder;
            font-family: 'Inter', Monospace;
        }

        .btn-estacion:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .btn-estacion.activa {
            background: var(--color-primario);
            color: var(--color-fondo);
        }

        .btn-admin {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid var(--color-bordes);
            color: var(--color-texto);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-admin:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.05);
        }

        /* Hero Section */
        .hero {
            min-height: 100vh;
            background: var(--color-fondo);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            margin-top: -100px;
        }

        .hero-contenido {
            max-width: 1400px;
            width: 100%;
            padding: 0 2rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

        .hero-texto {
            z-index: 2;
        }

        .titulo-hero {
            font-size: 4rem;
            margin-bottom: 1.5rem;
            line-height: 1.1;
        }

        .titulo-hero .linea-1 {
            display: block;
            color: var(--color-texto);
            font-weight: 500;
        }

        .titulo-hero .linea-2 {
            display: block;
            color: var(--color-texto);
            font-weight: 600;
        }

        .resaltado {
            color: var(--color-destacado);
            font-style: italic;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .subtitulo-hero {
            font-size: 1.25rem;
            color: var(--color-texto);
            margin-bottom: 3rem;
            line-height: 1.6;
            max-width: 500px;
        }

        .hero-acciones {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .btn-primario, .btn-secundario {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1rem 2rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 1rem;
        }

        .btn-primario {
            background: var(--color-primario);
            color: var(--color-fondo);
        }

        .btn-primario:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            background: var(--color-primario-oscuro);
        }

        .btn-secundario {
            background: rgba(255, 255, 255, 0.1);
            color: var(--color-texto);
            border: 1px solid var(--color-bordes);
        }

        .btn-secundario:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }

        /* Sistema de partículas */
        .particles-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
        }

        .particle {
            position: absolute;
            user-select: none;
            cursor: grab;
        }

        .particle:active {
            cursor: grabbing;
        }

        /* Nubes */
        .cloud {
            background: var(--color-particulas);
            border-radius: 100px;
            opacity: 0.8;
        }

        .cloud:before, .cloud:after {
            content: '';
            position: absolute;
            background: var(--color-particulas);
            border-radius: 50%;
        }

        .cloud:before {
            width: 60px;
            height: 60px;
            top: -30px;
            left: 20px;
        }

        .cloud:after {
            width: 80px;
            height: 80px;
            top: -40px;
            right: 20px;
        }

        /* Barcos con imágenes */
        .boat {
            width: 80px;
            height: 40px;
            opacity: 0.8;
            position: relative;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        /* Copos de nieve */
        .snowflake {
            width: 8px;
            height: 8px;
            background: var(--color-particulas);
            border-radius: 50%;
            opacity: 0.8;
        }

        .snowflake:before, .snowflake:after {
            content: '';
            position: absolute;
            background: var(--color-particulas);
        }

        .snowflake:before {
            width: 12px;
            height: 2px;
            top: 3px;
            left: -2px;
        }

        .snowflake:after {
            width: 2px;
            height: 12px;
            top: -2px;
            left: 3px;
        }

        /* Hojas */
        .leaf {
            width: 20px;
            height: 20px;
            background: var(--color-particulas);
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            opacity: 0.8;
        }

        /* Pájaros */
        .bird {
            width: 24px;
            height: 12px;
            background: var(--color-particulas);
            clip-path: path('M12 4C8 4 4 8 4 12C4 16 8 20 12 20C16 20 20 16 20 12C20 8 16 4 12 4Z');
            opacity: 0.8;
        }

        /* Siluetas de pájaros */
        .bird-silhouette {
            width: 40px;
            height: 20px;
            background: var(--color-particulas);
            clip-path: path('M5 10 Q15 0 25 10 Q35 20 25 15 Q15 20 5 10');
            opacity: 0.6;
        }
        
        /* Añade esto al final de tu CSS */
        .bird-independent {
            opacity: 0.8;
            transition: all 0.3s ease;
            cursor: grab;
        }
        
        .bird-independent:active {
            cursor: grabbing;
        }
        
        /* Añade esto al final de tu CSS existente */
        
        /* Pájaros independientes más visibles */
        .bird-independent {
            opacity: 0.9;
            transition: all 0.3s ease;
            cursor: grab;
            filter: brightness(1.2) saturate(1.3); /* Hace los pájaros más brillantes y saturados */
        }
        
        .bird-independent:active {
            cursor: grabbing;
            transform: scale(1.1);
        }

        /* Favicon animado */
        @keyframes favicon-float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-3px); }
            100% { transform: translateY(0px); }
        }
        
        .favicon-cloud {
            animation: favicon-float 3s ease-in-out infinite;
        }

        /* Animaciones para partículas */
        @keyframes float {
            0% { transform: translateX(100vw) translateY(0); }
            100% { transform: translateX(-100px) translateY(0); }
        }

        @keyframes float-snow {
            0% { transform: translateY(-10px) translateX(0); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(100vh) translateX(20px); opacity: 0; }
        }

        @keyframes float-leaves {
            0% { transform: translateY(-10px) translateX(0) rotate(0deg); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(100vh) translateX(100px) rotate(360deg); opacity: 0; }
        }

        @keyframes float-birds {
            0% { transform: translateX(100vw) translateY(0); }
            100% { transform: translateX(-100px) translateY(20px); }
        }

        @keyframes float-boats {
            0% { transform: translateX(100vw) translateY(0) rotate(2deg); }
            50% { transform: translateX(50vw) translateY(5px) rotate(-1deg); }
            100% { transform: translateX(-100px) translateY(0) rotate(2deg); }
        }

        /* Planta Evolutiva */
        .planta-evolutiva {
            position: fixed;
            right: 8%;
            top: 0;
            bottom: 0;
            width: 200px;
            pointer-events: none;
            z-index: 100;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .planta-evolutiva.activa {
            opacity: 1;
        }

        .sistema-ramas {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
        }

        .tallo-unico {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 12px;
            height: 0;
            background: linear-gradient(to top, var(--color-planta), rgba(0, 255, 136, 0.7));
            border-radius: 6px;
            transition: height 0.1s ease-out;
            box-shadow: 
                inset 0 0 8px rgba(255, 255, 255, 0.2),
                0 2px 6px rgba(0, 0, 0, 0.3);
        }

        .sistema-hojas {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .hoja-organica {
            position: absolute;
            left: 50%;
            transform: translateX(-50%) rotate(var(--rotacion, 0deg)) scale(var(--scale, 1));
            opacity: 0;
            transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
            filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
        }

        .hoja-contenido {
            width: 40px;
            height: 30px;
            background: linear-gradient(135deg, var(--color-planta), rgba(0, 255, 136, 0.7), rgba(0, 255, 136, 0.5));
            border-radius: 50% 0 50% 50%;
            position: relative;
            border: 1px solid rgba(0, 255, 136, 0.5);
            overflow: hidden;
        }

        .vena {
            position: absolute;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 1px;
        }

        .vena-principal {
            top: 50%;
            left: 20%;
            right: 10%;
            height: 1px;
            transform: translateY(-50%);
        }

        .vena-secundaria:nth-child(2) {
            top: 30%;
            left: 25%;
            width: 10px;
            height: 1px;
            transform: rotate(-25deg);
        }

        .vena-secundaria:nth-child(3) {
            top: 70%;
            left: 25%;
            width: 10px;
            height: 1px;
            transform: rotate(25deg);
        }

        .textura-hoja {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 2%, transparent 5%),
                radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.1) 2%, transparent 5%);
            opacity: 0.3;
        }

        /* Estados de la planta según estación */
        .planta-invierno .tallo-unico {
            background: linear-gradient(to top, var(--color-planta), rgba(225, 245, 254, 0.3));
        }

        .planta-primavera .tallo-unico {
            background: linear-gradient(to top, var(--color-planta), rgba(129, 199, 132, 0.7));
        }

        .planta-verano .tallo-unico {
            background: linear-gradient(to top, var(--color-planta), rgba(76, 175, 80, 0.7));
        }

        .planta-otono .tallo-unico {
            background: linear-gradient(to top, var(--color-planta), rgba(255, 152, 0, 0.5));
        }
        
        .img-card{
            width: 75%;
        }

        /* Sección de imágenes que rebotan */
        .seccion-rebote {
            min-height: 100vh;
            background: var(--color-fondo);
            position: relative;
            overflow: hidden;
        }

        .contenedor-rebote {
            position: relative;
            width: 100%;
            height: 100%;
        }

        /* Mejoras para las imágenes de rebote */
        .imagen-rebote {
            position: absolute;
            width: 350px;
            height: 140px;
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.1);
            border: 3px solid black;
        }

        .imagen-rebote:hover {
            transform: scale(1.15);
            z-index: 10;
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
        }

        .imagen-rebote img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
            border-radius: 12px;
        }

        .imagen-rebote:hover img {
            transform: scale(1.1);
        }

        /* Nube de transición */
        .nube-transicion {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--color-fondo);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }

        .nube-transicion.activa {
            opacity: 1;
            pointer-events: all;
        }

        /* Enlaces arrastrables */
        .enlace-arrastrable {
            position: relative;
            cursor: grab;
            transition: transform 0.2s ease;
        }

        .enlace-arrastrable:active {
            cursor: grabbing;
            transform: scale(1.05);
        }

        /* Secciones de contenido */
        .seccion-contenido {
            padding: 80px 0;
            background: var(--color-fondo);
            position: relative;
        }

        .contenedor {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Sección Filosofía */
        .seccion-filosofia {
            background: var(--color-fondo);
            padding: 80px 0;
            position: relative;
            z-index: 10;
        }

        .filosofia-contenido {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        .filosofia-texto {
            text-align: center;
        }

        .filosofia-texto h2 {
            font-size: 2.5rem;
            margin-bottom: 2rem;
            color: var(--color-texto);
            font-family: 'Playfair Display', serif;
        }

        .filosofia-texto p {
            font-size: 1.25rem;
            color: var(--color-texto-secundario);
            line-height: 1.7;
            margin-bottom: 3rem;
        }

        .filosofia-stats {
            display: flex;
            justify-content: center;
            gap: 4rem;
            flex-wrap: wrap;
        }

        .stat {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .stat-numero {
            font-size: 3rem;
            font-weight: 700;
            color: var(--color-destacado);
            line-height: 1;
            font-family: 'Playfair Display', serif;
        }

        .stat-texto {
            color: var(--color-texto-secundario);
            font-size: 0.875rem;
            margin-top: 0.5rem;
        }

        /* Sección Servicios */
        .seccion-servicios {
            background: var(--color-fondo);
            position: relative;
            z-index: 2;
            padding: 80px 0;
        }

        .grid-servicios {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .tarjeta-servicio {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--color-bordes);
            border-radius: 20px;
            padding: 3rem 2rem;
            text-align: center;
            transition: all 0.3s ease;
        }

        .tarjeta-servicio:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .servicio-icono {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            background: var(--color-destacado);
            color: var(--color-fondo);
            font-size: 2rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .servicio-titulo {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: var(--color-texto);
            font-family: 'Playfair Display', serif;
        }

        .servicio-descripcion {
            color: var(--color-texto-secundario);
            line-height: 1.7;
        }

        /* Sección Trayectoria */
        .seccion-trayectoria {
            background: var(--color-fondo);
            position: relative;
            z-index: 2;
            padding: 80px 0;
            overflow: hidden;
        }

        .trayectoria-contenedor {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .trayectoria-encabezado {
            text-align: center;
            margin-bottom: 4rem;
        }

        .trayectoria-titulo {
            font-size: 3rem;
            margin-bottom: 1rem;
            color: var(--color-texto);
            font-family: 'Playfair Display', serif;
        }

        .trayectoria-descripcion {
            font-size: 1.25rem;
            color: var(--color-texto-secundario);
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        /* Línea de tiempo vertical */
        .linea-tiempo {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
        }

        .linea-central {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 100%;
            background: linear-gradient(to bottom, var(--color-primario), var(--color-destacado));
            border-radius: 2px;
            z-index: 1;
        }

        .etapas-trayectoria {
            position: relative;
            z-index: 2;
        }

        /* Etapas individuales */
        .etapa {
            display: flex;
            margin-bottom: 6rem;
        }

        .etapa:nth-child(even) {
            flex-direction: row-reverse;
        }

        .etapa-contenido {
            flex: 1;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--color-bordes);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            z-index: 2;
            position: relative;
        }

        .etapa-contenido:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
            border-color: var(--color-destacado);
        }

        .etapa-icono {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            background: var(--color-destacado);
            color: var(--color-fondo);
            font-size: 2rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .etapa-titulo {
            font-size: 1.75rem;
            margin-bottom: 1rem;
            color: var(--color-texto);
            text-align: center;
            font-family: 'Playfair Display', serif;
        }

        .etapa-descripcion {
            color: var(--color-texto-secundario);
            line-height: 1.7;
            font-size: 1.1rem;
            text-align: center;
        }

        .etapa-marcador {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--color-destacado);
            border: 4px solid var(--color-fondo);
            box-shadow: 0 0 0 3px var(--color-destacado);
            z-index: 3;
        }

        /* Sección Proyectos */
        .seccion-proyectos {
            background: var(--color-fondo);
            position: relative;
            z-index: 2;
            padding: 80px 0;
        }

        .encabezado-seccion {
            text-align: center;
            margin-bottom: 4rem;
        }

        .titulo-seccion {
            font-size: 3rem;
            margin-bottom: 1rem;
            color: var(--color-texto);
            font-family: 'Playfair Display', serif;
        }

        .descripcion-seccion {
            font-size: 1.25rem;
            color: var(--color-texto-secundario);
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .grid-proyectos {
            display: grid;
            gap: 3rem;
        }

        .tarjeta-proyecto {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--color-bordes);
            border-radius: 20px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .tarjeta-proyecto:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .tarjeta-cuerpo {
            padding: 3rem;
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 3rem;
            align-items: start;
        }

        
        /* Filtros para el tema normal */
        .logo-cara.frontal .img-card {
            filter: brightness(1.1) saturate(1.2) hue-rotate(0deg);
        }

        /* Filtros para el tema verano */
        .tema-verano .logo-cara.frontal .img-card {
            filter: brightness(1.2) saturate(1.3) hue-rotate(-20deg) sepia(0.2);
        }

        /* Filtros para el tema primavera */
        .tema-primavera .logo-cara.frontal .img-card {
            filter: brightness(1.1) saturate(1.4) hue-rotate(80deg) contrast(1.1);
        }

        /* Filtros para el tema otoño */
        .tema-otono .logo-cara.frontal .img-card {
            filter: brightness(1.1) saturate(1.3) hue-rotate(30deg) sepia(0.3);
        }

        /* Filtros para el tema invierno */
        .tema-invierno .logo-cara.frontal .img-card {
            filter: brightness(1.1) saturate(0.9) hue-rotate(200deg) contrast(1.2);
        }

        /* Efecto hover adicional para las imágenes */
        .logo-3d:hover .img-card {
            transform: scale(1.05);
            filter: brightness(1.3) saturate(1.5);
        }

        /* Ajustes para mejorar la visualización de las imágenes */
        .logo-cara.frontal {
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
        }
        

        /* Información del Proyecto */
        .proyecto-info {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .proyecto-header {
            display: flex;
            justify-content: space-between;
            align-items: start;
            gap: 1rem;
        }

        .proyecto-titulo {
            font-size: 2rem;
            color: var(--color-texto);
            margin: 0;
            font-family: 'Playfair Display', serif;
        }

        .proyecto-categoria {
            background: rgba(255, 255, 255, 0.1);
            color: var(--color-texto-secundario);
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.875rem;
            white-space: nowrap;
        }

        .proyecto-descripcion {
            color: var(--color-texto-secundario);
            line-height: 1.7;
            font-size: 1.1rem;
        }

        .proyecto-tecnologias {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }

        .tecnologia-tag {
            background: rgba(255, 255, 255, 0.1);
            color: var(--color-texto);
            padding: 0.5rem 1rem;
            border-radius: 15px;
            font-size: 0.875rem;
            border: 1px solid var(--color-bordes);
            transition: all 0.3s ease;
        }

        .tecnologia-tag:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-2px);
        }

        .proyecto-acciones {
            margin-top: auto;
        }

        .btn-visitar {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            background: rgba(255, 255, 255, 0.1);
            color: var(--color-texto);
            text-decoration: none;
            padding: 1rem 2rem;
            border-radius: 50px;
            font-weight: 500;
            transition: all 0.3s ease;
            border: 1px solid var(--color-bordes);
        }

        .btn-visitar:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }

        /* Sección Contacto */
        .seccion-contacto {
            background: var(--color-fondo);
            position: relative;
            z-index: 2;
            padding: 80px 0;
        }

        .contacto-contenido {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        .contacto-texto h2 {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
            color: var(--color-texto);
            font-family: 'Playfair Display', serif;
        }

        .contacto-texto p {
            font-size: 1.25rem;
            color: var(--color-texto-secundario);
            margin-bottom: 3rem;
            line-height: 1.7;
        }

        .formulario-contacto {
            display: grid;
            gap: 1.5rem;
            max-width: 600px;
            margin: 0 auto;
        }

        .campo-formulario {
            display: flex;
            flex-direction: column;
            text-align: left;
        }

        .campo-formulario label {
            margin-bottom: 0.5rem;
            color: var(--color-texto);
            font-weight: 500;
        }

        .campo-formulario input,
        .campo-formulario textarea {
            padding: 1rem;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid var(--color-bordes);
            border-radius: 10px;
            color: var(--color-texto);
            font-family: 'Inter', sans-serif;
            transition: all 0.3s ease;
        }

        .campo-formulario input:focus,
        .campo-formulario textarea:focus {
            outline: none;
            border-color: var(--color-destacado);
            background: rgba(255, 255, 255, 0.15);
        }

        .campo-formulario textarea {
            min-height: 150px;
            resize: vertical;
        }

        .btn-enviar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            background: var(--color-primario);
            color: var(--color-fondo);
            border: none;
            padding: 1rem 2rem;
            border-radius: 50px;
            font-weight: 500;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 1rem;
        }

        .btn-enviar:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            background: var(--color-primario-oscuro);
        }

        .contacto-enlaces {
            display: flex;
            justify-content: center;
            gap: 2rem;
            flex-wrap: wrap;
            margin-top: 3rem;
        }

        .enlace-contacto {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            color: var(--color-texto);
            text-decoration: none;
            padding: 1rem 2rem;
            border: 1px solid var(--color-bordes);
            border-radius: 50px;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.05);
        }

        .enlace-contacto:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
            border-color: var(--color-destacado);
        }

        /* Footer */
        footer {
            background-color: rgba(0, 0, 0, 0.2);
            color: var(--color-texto);
            padding: 50px 0 20px;
        }

        .footer-content {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 30px;
        }

        .footer-column {
            flex: 1;
            min-width: 250px;
            margin-bottom: 30px;
        }

        .footer-column h3 {
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
            color: var(--color-texto);
        }

        .footer-column h3::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 2px;
            background-color: var(--color-destacado);
        }

        .social-links {
            display: flex;
            gap: 15px;
        }

        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            color: var(--color-texto);
            transition: all 0.3s;
        }

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

        .footer-bottom {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* ===== ESTILOS PARA EL REGISTRO ===== */

/* Indicador de fortaleza de contraseña */
.password-strength {
    height: 4px;
    margin-top: 5px;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.password-strength.weak {
    background: #ff6b6b;
    width: 25%;
}

.password-strength.medium {
    background: #ffd93d;
    width: 50%;
}

.password-strength.strong {
    background: #6bcf7f;
    width: 75%;
}

.password-strength.very-strong {
    background: #4ecdc4;
    width: 100%;
}

/* Campo de términos y condiciones */
.campo-terminos {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

.campo-terminos input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.campo-terminos label {
    font-size: 0.875rem;
    color: var(--color-texto-secundario);
    margin: 0;
}

.enlace-terminos {
    color: var(--color-primario);
    text-decoration: none;
}

.enlace-terminos:hover {
    text-decoration: underline;
}

/* Mensajes de validación */
.mensaje-validacion {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: none;
}

.mensaje-validacion.mostrar {
    display: block;
}

.mensaje-validacion.valido {
    color: #6bcf7f;
}

.mensaje-validacion.invalido {
    color: #ff6b6b;
}

/* Estados de los campos */
.campo-login.valido input {
    border-color: #6bcf7f;
}

.campo-login.invalido input {
    border-color: #ff6b6b;
}

/* Para dispositivos móviles, ajusta según el navbar móvil */
@media (max-width: 768px) {
    #home,
    #filosofia,
    #servicios,
    #trayectoria,
    #proyectos,
    #contacto,
    #navegacion {
        scroll-margin-top: 100px;
    }
    
    #home {
        scroll-margin-top: 60px;
    }
}

        /* Responsive */
        @media (max-width: 768px) {
            .hero-contenido {
                grid-template-columns: 1fr;
                text-align: center;
                gap: 3rem;
            }
            
            .titulo-hero {
                font-size: 2.5rem;
            }
            
            .tarjeta-cuerpo {
                grid-template-columns: 1fr;
                text-align: center;
                gap: 2rem;
            }
            
            .proyecto-header {
                flex-direction: column;
                align-items: center;
            }
            
            .etapa {
                flex-direction: column !important;
                margin-bottom: 4rem;
            }
            
            .etapa-contenido {
                margin: 0 1rem;
            }
            
            .linea-central {
                left: 30px;
            }
            
            .etapa-marcador {
                left: 30px;
            }
            
            .controles-navegacion {
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .panel-estaciones {
                right: auto;
                left: 0;
            }
            
            .planta-evolutiva {
                display: none;
            }
        }