/* Reset and Base Styles */

        :root {
            /* Modern Professional Color Palette */
            --primary-color: white;        /* Deep Blue */
            --primary-light: #3b82f6;       /* Bright Blue */
            --primary-dark: #051c4b;        /* Darker Blue */
            --secondary-color: #ffbd59;     /* Amber/Gold */
            --secondary-light: #fbbf24;     /* Light Amber */
            --accent-color: #10b981;        /* Emerald Green */
            --accent-light: #34d399;        /* Light Emerald */
            --text-primary: #1f2937;        /* Dark Gray */
            --text-secondary: #6b7280;      /* Medium Gray */
            --text-light: #9ca3af;          /* Light Gray */
            --background: #ffffff;          /* White */
            --background-light: #f9fafb;    /* Very Light Gray */
            --background-dark: #f3f4f6;     /* Light Gray */
            --border-color: #e5e7eb;        /* Border Gray */
            --shadow-light: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
            --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            
            /* Typography */
            --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            --font-body: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }

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

        body {
            font-family: var(--font-body);
            line-height: 1.6;
            color: var(--text-primary);
            background-color: var(--background);
            overflow-x: hidden;
        }

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

        /* Header Styles */
        .header {
            background: #051c4b;
            color: #ffbd59;
            padding: 1rem 0;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            box-shadow: var(--shadow-medium);
        }

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

        .logo-section {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .logo {
            height: 20px;
            width: auto;
        }

        .company-name {
            font-family: var(--font-heading);
            font-size: 1.5rem;
            font-weight: 800;
            margin: 0;
            letter-spacing: -0.025em;
        }

        .company-subtitle {
            font-size: 0.875rem;
            opacity: 0.9;
            margin: 0;
            font-weight: 500;
        }

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

        .nav-link {
            background: none;
            border: none;
            color: white;
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            transition: all 0.3s ease;
            font-family: var(--font-body);
        }

        .nav-link:hover {
            background: #ffbd59;
            transform: translateY(-1px);
        }

        .header-cta .btn {
            background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-light) 100%);
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 12px;
            font-weight: 600;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: var(--shadow-medium);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .header-cta .btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-large);
        }

        .desktop-contact {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 500;
        }

        .contact-icon {
            font-size: 1.1rem;
        }

	/* Mobile Menu - Solo visible en móviles */
	.mobile-menu-btn {
		display: none;
		background: none;
		border: none;
		color: white;
		font-size: 1.5rem;
		cursor: pointer;
		padding: 0.5rem;
	}

	/* Menú móvil oculto por defecto */
	.mobile-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #051c4b; /* Azul oscuro del header */
		color: white;
		padding: 1.5rem;
		box-shadow: var(--shadow-large);
		z-index: 999;
	}

	.mobile-menu.active {
		display: block;
	}

	/* Contenido centrado */
	.mobile-nav,
	.mobile-language-switch,
	.mobile-contact {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		width: 100%;
	}

	/* Items del menú centrados y con estilo de texto (no botón) */
	.mobile-nav .mobile-nav-link {
		display: block;
		width: 100%;
		max-width: 300px;
		padding: 0.75rem 1rem;
		background: none;
		border: none;
		color: white;
		font-size: 1.1rem;
		font-weight: 500;
		text-align: center;
		cursor: pointer;
		border-radius: 0;
		box-shadow: none;
		transition: background-color 0.2s ease, color 0.2s ease;
		font-family: var(--font-body);
		margin: 0.25rem 0;
		text-decoration: none;
	}

	.mobile-nav .mobile-nav-link:hover,
	.mobile-nav .mobile-nav-link:focus {
		background-color: rgba(255, 255, 255, 0.1);
		color: #ffbd59;
	}

	/* --- EXCEPCIÓN: Botones de idioma en fila y centrados --- */
	.mobile-language-switch {
		flex-direction: row !important;
		justify-content: center;
		gap: 0.75rem;
		margin: 1.5rem 0;
	}

	.mobile-lang-btn {
		background: rgba(255, 255, 255, 0.1);
		color: white;
		border: 1px solid rgba(255, 255, 255, 0.3);
		padding: 0.25rem 0.75rem;
		border-radius: 4px;
		font-size: 0.875rem;
		cursor: pointer;
		transition: all 0.3s ease;
		min-width: 50px;
	}

	.mobile-lang-btn.active {
		background: #ffbd59;
		color: #051c4b;
		border-color: #ffbd59;
	}

	/* Contacto centrado */
	.mobile-contact {
		gap: 0.75rem;
		padding-top: 1rem;
		border-top: 1px solid rgba(255, 255, 255, 0.2);
		margin-top: 1rem;
	}

	.mobile-contact-item {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.75rem;
		color: rgba(255, 255, 255, 0.9);
		font-size: 0.95rem;
	}

	.mobile-contact-item .contact-icon {
		font-size: 1.2rem;
	}

	/* --- Responsive: Header móvil simplificado --- */
	@media (max-width: 768px) {
		/* Mostrar botón hamburguesa solo en móvil */
		.mobile-menu-btn {
			display: block;
		}

		/* Ocultar navegación de escritorio */
		.desktop-nav,
		.desktop-contact {
			display: none;
		}

		/* Header en una sola línea */
		.header-content {
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
		}

		/* Alinear logo + nombre a la izquierda, hamburguesa a la derecha */
		.logo-section {
			display: flex;
			align-items: center;
			gap: 8px;
			flex: 1;
			min-width: 0;
		}

		.company-name {
			font-size: 1.25rem;
			margin: 0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		.company-subtitle {
			display: none;
		}

		.logo-section img {
			width: 80px;
			height: auto;
		}

		/* Empujar el botón de menú a la derecha */
		.mobile-menu-btn {
			margin-left: auto;
			padding: 0.5rem;
		}

		/* Ajuste fino del padding del header */
		.header {
			padding: 0.75rem 0;
		}
		
		    /* Asegurar que el header-content no se desborde */
		.header-content {
			flex-wrap: nowrap;
			align-items: center;
			min-height: auto;
		}

		/* Asegurar que el logo-section no crezca demasiado */
		.logo-section {
			flex: 1;
			min-width: 0; /* clave para que no fuerce el salto */
			display: flex;
			align-items: center;
			gap: 8px;
		}

		/* Asegurar que el nombre no ocupe más de lo necesario */
		.company-name {
			margin: 0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			line-height: 1.2; /* reduce el alto de línea */
		}

		/* Botón de menú: alineado en la misma línea */
		.mobile-menu-btn {
			flex-shrink: 0; /* evita que se comprima */
			margin-left: auto; /* empuja a la derecha */
			padding: 0.5rem;
		}
			
	}

	@media (max-width: 480px) {
       .company-name {
        	font-size: 1.1rem;
    		}
    }

        /* Hero Section */
        .hero {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/background.jpg);
            color: white;
            padding: 8rem 0 4rem;
            margin-top: 80px;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('/placeholder.svg?height=800&width=1200') center/cover;
            opacity: 0.1;
            z-index: 0;
        }

        .hero-content {
            position: relative;
            z-index: 1;
            text-align: center;
            max-width: 900px;
            margin: 0 auto;
        }

        .hero-title {
            font-family: var(--font-heading);
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
            line-height: 1.2;
            letter-spacing: -0.025em;
        }

        .hero-subtitle {
            font-size: 1.25rem;
            margin-bottom: 2.5rem;
            opacity: 0.95;
            line-height: 1.6;
            font-weight: 400;
        }

        .hero-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin-bottom: 3rem;
            flex-wrap: wrap;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 1rem 2rem;
            border-radius: 12px;
            font-weight: 600;
            font-size: 1rem;
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: var(--font-body);
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-light) 100%);
            /*color: white;*/
            box-shadow: var(--shadow-medium);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-large);
        }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.15);
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(10px);
        }

        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-1px);
        }

        .btn-large {
            padding: 1.25rem 2.5rem;
            font-size: 1.1rem;
        }

        .hero-features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
            max-width: 800px;
            margin: 0 auto;
        }

        .feature-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            background: rgba(255, 255, 255, 0.1);
            padding: 1rem;
            border-radius: 12px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .feature-icon {
            font-size: 1.5rem;
        }

        /* Section Styles */
        .section-header {
            text-align: center;
            margin-bottom: 4rem;
        }

        .section-title {
            font-family: var(--font-heading);
            font-size: 2.5rem;
            font-weight: 700;
            /*color: var(--text-primary);*/
            margin-bottom: 1rem;
            letter-spacing: -0.025em;
        }

        .section-subtitle {
            font-size: 1.125rem;
            /*color: var(--text-secondary);*/
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        /* How It Works Section */
        .how-it-works {
            padding: 5rem 0;
            background: var(--background-light);
        }

        .steps-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .step-item {
            background: white;
            padding: 2.5rem;
            border-radius: 16px;
            text-align: center;
            box-shadow: var(--shadow-light);
            border: 1px solid var(--border-color);
            transition: all 0.3s ease;
        }

        .step-item:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-large);
        }

        .step-icon {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            display: block;
        }

        .step-title {
            font-family: var(--font-heading);
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 1rem;
        }

        .step-description {
            color: var(--text-secondary);
            line-height: 1.6;
        }

        /* Advantages Section */
        .advantages {
            padding: 5rem 0;
            background: white;
        }

        .advantages-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
        }

        .advantage-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            padding: 1.5rem;
            background: #c1d2e3;
            border-radius: 12px;
            border-left: 4px solid var(--primary-color);
            transition: all 0.3s ease;
        }

        .advantage-item:hover {
            transform: translateX(4px);
            box-shadow: var(--shadow-medium);
        }

        .advantage-icon {
            font-size: 1.5rem;
            color: var(--accent-color);
            margin-top: 0.25rem;
        }

        .advantage-title {
            font-family: var(--font-heading);
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .advantage-description {
            color: var(--text-secondary);
            line-height: 1.6;
        }

        /* Contact Section */
        .contact {
            padding: 5rem 0;
            background: var(--background-dark);
        }

        .contact-content {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 3rem;
            align-items: start;
        }

        .contact-form-container {
            background: white;
            padding: 2.5rem;
            border-radius: 16px;
            box-shadow: var(--shadow-medium);
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            display: block;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
        }

        .form-input,
        .form-select,
        .form-textarea {
            width: 100%;
            padding: 0.875rem;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            font-size: 1rem;
            font-family: var(--font-body);
            transition: all 0.3s ease;
        }

        .form-input:focus,
        .form-select:focus,
        .form-textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
        }

        .btn-submit {
            width: 100%;
            background: #3b82f6;
            color: white;
            padding: 1.25rem;
            font-size: 1.1rem;
            font-weight: 700;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: var(--shadow-medium);
        }

        .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-large);
        }

        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .info-card {
            background: white;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: var(--shadow-light);
            border: 1px solid var(--border-color);
        }

        .info-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }

        .info-icon {
            font-size: 1.5rem;
        }

        .info-title {
            font-family: var(--font-heading);
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .info-phone {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }

        .info-description {
            color: var(--text-secondary);
            margin-bottom: 1rem;
            line-height: 1.6;
        }

        .btn-phone {
            background: var(--accent-color);
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s ease;
        }

        .btn-phone:hover {
            background: var(--accent-light);
            transform: translateY(-1px);
        }

        /* Testimonials Section */
        .testimonials {
            padding: 5rem 0;
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/bgtest.jpg);
        }
        .testimonials-text2 {
            font-family: var(--font-heading);
            font-size: 2.5rem;
            font-weight: 700;
            color: #ffbd59;
            margin-bottom: 1rem;
            letter-spacing: -0.025em;
        }
        .testimonials-text3 {
        font-size: 1.125rem;
            color: #ffbd59;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
        }

        .testimonial-card {
            background: var(--background-light);
            padding: 2rem;
            border-radius: 16px;
            box-shadow: var(--shadow-light);
            border: 1px solid var(--border-color);
            transition: all 0.3s ease;
        }

        .testimonial-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-medium);
        }

        .testimonial-rating {
            margin-bottom: 1rem;
        }

        .star {
            color: var(--secondary-color);
            font-size: 1.25rem;
        }

        .testimonial-text {
            font-style: italic;
            color: var(--text-primary);
            margin-bottom: 1.5rem;
            line-height: 1.6;
            font-size: 1.05rem;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .author-avatar {
            width: 50px;
            height: 50px;
            background: var(--primary-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
        }

        .author-name {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .author-project {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        /* Additional Services Section */
        .additional-services {
            padding: 5rem 0;
            background: var(--background-light);
        }

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

        .service-item {
            background: white;
            padding: 2rem;
            border-radius: 12px;
            text-align: center;
            box-shadow: var(--shadow-light);
            border: 1px solid var(--border-color);
            transition: all 0.3s ease;
        }

        .service-item:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-medium);
        }

        .service-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            display: block;
        }

        .service-title {
            font-family: var(--font-heading);
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 1rem;
        }

        .service-description {
            color: var(--text-secondary);
            line-height: 1.6;
        }

        .section-cta {
            text-align: center;
            padding: 2rem;
            background: white;
            border-radius: 12px;
            box-shadow: var(--shadow-light);
        }

        .cta-text {
            font-size: 1.125rem;
            color: var(--text-primary);
            margin-bottom: 1.5rem;
            font-weight: 500;
        }

        /* FAQ Section */
        .faq {
            padding: 5rem 0;
            background: white;
        }

        .faq-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .faq-item {
            border: 1px solid var(--border-color);
            border-radius: 8px;
            margin-bottom: 1rem;
            overflow: hidden;
        }

        .faq-question {
            width: 100%;
            background: var(--background-light);
            border: none;
            padding: 1.5rem;
            text-align: left;
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--text-primary);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
        }

        .faq-question:hover {
            background: var(--background-dark);
        }

        .faq-icon {
            transition: transform 0.3s ease;
        }

        .faq-item.active .faq-icon {
            transform: rotate(180deg);
        }

        .faq-answer {
            padding: 0 1.5rem;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .faq-item.active .faq-answer {
            padding: 1.5rem;
            max-height: 200px;
        }

        .faq-answer p {
            color: var(--text-secondary);
            line-height: 1.6;
        }

        /* Footer */
        .footer {
            background: black;
            color: white;
            padding: 3rem 0 1rem;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }
        .footer-logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .footer-logo-icon {
            height: 20px;
            width: auto;
        }

        .footer-company-name {
            font-family: var(--font-heading);
            font-size: 1.25rem;
            font-weight: 700;
            margin: 0;
        }

        .footer-company-tagline {
            font-size: 0.875rem;
            opacity: 0.8;
            margin: 0;
        }

        .footer-description {
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }

        .footer-title {
            font-family: var(--font-heading);
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--secondary-color);
        }

        .footer-list {
            list-style: none;
        }

        .footer-list li {
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 0.5rem;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .footer-list li:hover {
            color: var(--secondary-color);
        }

        .footer-contact-info {
            margin-top: 1rem;
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
            color: rgba(255, 255, 255, 0.9);
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .footer-copyright {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
        }

        .footer-links {
            display: flex;
            gap: 2rem;
        }

        .footer-links a {
            color: rgba(255, 0, 0, 0.8);
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.3s ease;
        }

        .footer-links a:hover {
            color: var(--secondary-color);
        }

        .btn-footer {
            background: var(--secondary-color);
            color: rgb(0, 0, 0);
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            display: inline-block;
            margin-top: 1rem;
            transition: all 0.3s ease;
        }

        .btn-footer:hover {
            background: var(--secondary-light);
            transform: translateY(-1px);
        }

        /* Utility Classes */
        .pulse {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .back-to-top {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            background: var(--secondary-color);
            color: white;
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            font-size: 1.25rem;
            cursor: pointer;
            box-shadow: var(--shadow-mediu);
            transition: all 0.3s ease;
            z-index: 1000;
        }

        .back-to-top:hover {
            background: var(--primary-light);
            transform: translateY(-2px);
        }

        .floating-contact {
            position: fixed;
            bottom: 2rem;
            left: 2rem;
            z-index: 1000;
        }

        .btn-floating {
            background: var(--accent-color);
            color: white;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            text-decoration: none;
            box-shadow: var(--shadow-large);
            transition: all 0.3s ease;
            animation: pulse 2s infinite;
        }

        .btn-floating:hover {
            background: var(--accent-light);
            transform: scale(1.1);
        }

        /* Cookie Consent */
        .cookie-consent {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #babcc0;
            padding: 1rem;
            box-shadow: var(--shadow-large);
            border-top: 1px solid var(--border-color);
            z-index: 1001;
        }

        .cookie-content {
            display: flex;
            align-items: center;
            gap: 1rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .cookie-icon {
            font-size: 2rem;
        }

        .cookie-text {
            flex: 1;
        }

        .cookie-text p {
            margin: 0;
            color: #1e40af;
            font-size: 11 px;
        }

        .cookie-link {
            color: var(--secondary-color);
            text-decoration: none;
            font-size: 11 px;
        }

        .cookie-actions {
            display: flex;
            gap: 1rem;
        }

        .btn-cookie-primary {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
        }

        .btn-cookie-secondary {
            background: transparent;
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
            padding: 0.5rem 1rem;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
        }
        /* Responsive Design */
        @media (max-width: 768px) {
            .container {
                padding: 0 15px;
            }

            .desktop-nav,
            .desktop-contact {
                display: none;
            }

            .hero-title {
                font-size: 2rem;
            }

            .hero-subtitle {
                font-size: 1.1rem;
            }

            .hero-buttons {
                flex-direction: column;
                align-items: center;
            }

            .hero-features {
                grid-template-columns: 1fr;
            }

            .section-title {
                font-size: 2rem;
            }

            .contact-content {
                grid-template-columns: 1fr;
            }

            .form-row {
                grid-template-columns: 1fr;
            }

            .advantages-grid {
                grid-template-columns: 1fr;
            }

            .steps-container {
                grid-template-columns: 1fr;
            }

            .testimonials-grid {
                grid-template-columns: 1fr;
            }

            .services-grid {
                grid-template-columns: 1fr;
            }

            .footer-content {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }

            .cookie-content {
                flex-direction: column;
                text-align: center;
            }

            .cookie-actions {
                justify-content: center;
            }
        }

        @media (max-width: 480px) {
            .hero {
                padding: 6rem 0 3rem;
            }

            .hero-title {
                font-size: 1.75rem;
            }

            .btn-large {
                padding: 1rem 1.5rem;
                font-size: 1rem;
            }

            .floating-contact {
                bottom: 1rem;
                left: 1rem;
            }

            .back-to-top {
                bottom: 1rem;
                right: 1rem;
                width: 45px;
                height: 45px;
            }
        }

        /* Message Container */
        .message-container {
            position: fixed;
            top: 100px;
            right: 20px;
            z-index: 1002;
            max-width: 400px;
        }

        .message {
            background: white;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 0.5rem;
            box-shadow: var(--shadow-medium);
            animation: slideIn 0.3s ease;
        }

        .message.success {
            border-left: 4px solid var(--accent-color);
        }

        .message.error {
            border-left: 4px solid #ef4444;
        }

        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        /* Language Switch */
        .language-switch {
            display: flex;
            gap: 0.5rem;
        }

        .lang-btn {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .lang-btn.active {
            background: var(--secondary-color);
            border-color: var(--secondary-color);
        }

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

        /* Form Enhancements */
        .form-row-inline {
            display: flex;
            gap: 0.5rem;
        }

        .form-select-small {
            flex: 1;
            padding: 0.875rem;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            font-size: 1rem;
            font-family: var(--font-body);
        }

        .form-file {
            width: 100%;
            padding: 0.875rem;
            border: 2px dashed var(--border-color);
            border-radius: 8px;
            background: var(--background-light);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .form-file:hover {
            border-color: var(--primary-color);
            background: rgba(30, 64, 175, 0.05);
        }

        .form-checkbox {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
        }

        .checkbox-label {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            cursor: pointer;
            font-size: 0.95rem;
            line-height: 1.5;
        }

        .checkmark {
            width: 20px;
            height: 20px;
            border: 2px solid var(--border-color);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            flex-shrink: 0;
            margin-top: 2px;
        }

        input[type="checkbox"]:checked + .checkmark {
            background: var(--primary-color);
            border-color: var(--primary-color);
        }

        input[type="checkbox"]:checked + .checkmark::after {
            content: '✓';
            color: black;
            font-size: 14px;
            font-weight: bold;
        }

        input[type="checkbox"] {
            display: none;
        }

        .form-note {
            font-size: 0.875rem;
            color: var(--text-secondary);
            text-align: center;
            margin-top: 1rem;
            line-height: 1.5;
        }
         /* New sections styling */
        .why-worth-more, .smart-renovations, .cleaning-services, .home-staging, .official-valuations, .hidden-value-map {
            padding: 80px 0;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            margin: 40px 0;
        }
        
        .why-worth-more:nth-child(even), .smart-renovations:nth-child(even), .cleaning-services:nth-child(even), .home-staging:nth-child(even), .official-valuations:nth-child(even), .hidden-value-map:nth-child(even) {
            background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
        }
        
        .statistic-highlight {
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
            color: white;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            margin: 30px 0;
            box-shadow: 0 10px 30px rgba(30, 64, 175, 0.3);
        }
        
        .stat-number {
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: 10px;
        }
        
        .stat-text {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        .renovation-features, .analysis-factors {
            list-style: none;
            padding: 0;
            margin: 30px 0;
        }
        
        .renovation-features li, .analysis-factors li {
            padding: 10px 0;
            font-size: 1.1rem;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .example-card {
            background: linear-gradient(135deg, #f59e0b 0%, #ffffff 100%);
            color: white;
            padding: 30px;
            border-radius: 15px;
            margin: 30px 0;
            box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3);
        }
        
        .roi-highlight {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .roi-value {
            font-size: 2rem;
            font-weight: 800;
        }
        
        .cleaning-services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin: 40px 0;
        }
        
        .cleaning-service {
            background: white;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        
        .cleaning-service:hover {
            transform: translateY(-5px);
        }
        
        .cleaning-service .service-icon {
            font-size: 3rem;
            margin-bottom: 20px;
        }
        
        .cleaning-stats {
            display: flex;
            justify-content: center;
            gap: 60px;
            margin: 40px 0;
        }
        
        .cleaning-stats .stat-item {
            text-align: center;
        }
        
        .cleaning-stats .stat-number {
            font-size: 2.5rem;
            font-weight: 800;
            color: #1e40af;
            display: block;
        }
        
        .cleaning-stats .stat-label {
            font-size: 1rem;
            color: #64748b;
            margin-top: 10px;
        }
        
        .staging-features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
            margin: 40px 0;
        }
        
        .staging-feature {
            background: white;
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }
        
        .staging-includes, .staging-result {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            padding: 30px;
            border-radius: 15px;
            margin: 30px 0;
        }
        
        .result-highlight {
            text-align: center;
        }
        
        .companies-list {
            list-style: none;
            padding: 0;
        }
        
        .companies-list li {
            padding: 15px;
            margin: 10px 0;
            background: white;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }
        
        .process-comparison {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin: 30px 0;
        }
        
        .process-item {
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }
        
        .zones-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin: 40px 0;
        }
        
        .zone-card {
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        
        .zone-card:hover {
            transform: translateY(-5px);
        }
        
        .zone-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .zone-growth {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 1.1rem;
        }
        
        .zone-timeframe {
            font-size: 0.9rem;
            color: #64748b;
            font-style: italic;
        }
        
        .cta-inline, .renovation-cta, .pretasacion-cta, .map-cta {
            text-align: center;
            margin: 40px 0;
        }
        
        .cta-questions {
            margin-bottom: 30px;
        }
        
        .cta-questions p {
            font-size: 1.1rem;
            margin: 15px 0;
        }

        /* Added CSS styles for the new success cases section */
        .success-cases {
            padding: 80px 0;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        }

        .success-cases-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

        .success-case-card {
            background: white;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 2px solid transparent;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .success-case-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #1e40af, #f59e0b);
        }

        .success-case-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
            border-color: #1e40af;
        }

        .case-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 25px;
            flex-wrap: wrap;
            gap: 15px;
        }

        .case-location {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .location-icon {
            font-size: 24px;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
        }

        .case-title {
            font-size: 20px;
            font-weight: 700;
            color: #1e40af;
            margin: 0;
        }

        .case-stats {
            display: flex;
            gap: 20px;
        }

        .stat-item {
            text-align: center;
            background: #f1f5f9;
            padding: 10px 15px;
            border-radius: 12px;
            min-width: 80px;
        }

        .stat-value {
            display: block;
            font-size: 18px;
            font-weight: 700;
            color: #059669;
        }

        .stat-label {
            display: block;
            font-size: 12px;
            color: #64748b;
            margin-top: 2px;
        }

        .case-before-after {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 25px;
            padding: 20px;
            background: #f8fafc;
            border-radius: 12px;
        }

        .before-after-item {
            text-align: center;
        }

        .before-after-item .label {
            display: block;
            font-size: 14px;
            color: #64748b;
            margin-bottom: 5px;
        }

        .before-after-item .value {
            display: block;
            font-size: 24px;
            font-weight: 700;
            color: #1e40af;
        }

        .before-after-item .value.highlight {
            color: #059669;
            position: relative;
        }

        .before-after-item .value.highlight::after {
            content: '↗️';
            margin-left: 8px;
        }

        .reforms-title {
            font-size: 16px;
            font-weight: 600;
            color: #1e40af;
            margin-bottom: 15px;
        }

        .reforms-list {
            list-style: none;
            padding: 0;
            margin: 0 0 20px 0;
        }

        .reforms-list li {
            padding: 8px 0;
            font-size: 14px;
            color: #374151;
            border-bottom: 1px solid #e5e7eb;
        }

        .reforms-list li:last-child {
            border-bottom: none;
        }

        .case-result {
            background: #ecfdf5;
            padding: 20px;
            border-radius: 12px;
            border-left: 4px solid #059669;
        }

        .result-text {
            margin: 0;
            font-size: 14px;
            line-height: 1.6;
            color: #374151;
        }

        .success-cases-cta {
            margin-top: 60px;
            text-align: center;
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/bgcta.png);
            padding: 50px 30px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .cta-title {
            font-size: 28px;
            font-weight: 700;
            color: #ffbd59;
            margin-bottom: 15px;
        }

        .cta-description {
            font-size: 18px;
            color: #ffbd59;
            margin-bottom: 30px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .cta-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }

        @media (max-width: 768px) {
            .success-cases-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .case-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .case-stats {
                width: 100%;
                justify-content: space-around;
            }

            .case-before-after {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }

            .cta-title {
                font-size: 24px;
            }

            .cta-description {
                font-size: 16px;
            }
        }
        /* Updated emoji styling to be more modern and consistent */
        .emoji-icon {
            font-size: 1.2em;
            display: inline-block;
            margin-right: 0.5rem;
            filter: grayscale(0.2) brightness(1.1);
            transition: all 0.3s ease;
        }

        .emoji-icon:hover {
            filter: grayscale(0) brightness(1.2);
            transform: scale(1.1);
        }

        /* Enhanced button emoji styling */
        .btn-icon {
            font-size: 1.1em;
            margin-right: 0.5rem;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
        }
        /* btn-color */
        .btn-color {
            color: #ffbd59;
        }

        /* Contact icons styling */
        .contact-icon {
            font-size: 1.1em;
            margin-right: 0.5rem;
            opacity: 0.9;
        }


	.why-worth-more {
		background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
		padding: 60px 0;
	}
	.why-worth-more .section-header h2 {
		/*color: #1a3a6c;*/
		font-size: 2.2rem;
		margin-bottom: 15px;
	}
	.why-worth-more .section-header p {
		/*color: #555;*/
		font-size: 1.1rem;
	}
	.why-worth-more .statistic-highlight {
		background: #fff;
		border: 2px solid #1a3a6c;
		border-radius: 8px;
		padding: 20px;
		margin: 25px 0;
		text-align: center;
		box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	}
	.why-worth-more .statistic-highlight .stat-number {
		font-size: 3rem;
		font-weight: 800;
		color: #e74c3c;
		display: block;
	}
	.why-worth-more .cta-inline button {
		margin-top: 20px;
	}


	/* Ejemplo de CSS para secciones con imagen de fondo */
	.bg-image-section {
		background-size: cover;
		background-position: center;
		background-attachment: fixed; /* O 'scroll' dependiendo del efecto deseado */
		padding: 80px 0;
		color: white; /* Ajusta el color del texto para contraste */
		/*text-shadow: 1px 1px 3px rgba(0,0,0,0.7);*/ /* Opcional: mejora la legibilidad */
		position: relative;
	}

	.bg-image-section::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5); /* Capa semitransparente para mejorar contraste */
		z-index: 0;
	}

	.bg-image-section > .container {
		position: relative;
		z-index: 1;
	}

	/* Asegura que el texto dentro del container también sea legible */
	/*	
	.bg-image-section h2, .bg-image-section h3, .bg-image-section p {
			color: white;
		} 

	*/


	/* --- NUEVAS REGLAS CSS PARA MEJORAR CONTRASTE EN TARJETAS CLARAS --- */

	/* Aplica a cualquier elemento con clase bg-white o bg-gray-light */
	.bg-white,
	.bg-gray-light {
		color: #333; /* Texto oscuro por defecto */
	}

	.bg-white h2,
	.bg-white h3,
	.bg-white h4,
	.bg-white p,
	.bg-white span,
	.bg-white div,
	.bg-gray-light h2,
	.bg-gray-light h3,
	.bg-gray-light h4,
	.bg-gray-light p,
	.bg-gray-light span,
	.bg-gray-light div {
		color: #333 !important; /* Fuerza el color oscuro */
		text-shadow: none !important; /* Elimina cualquier sombra de texto */
	}

	/* Ajustes específicos para las tarjetas de casos de éxito */
	.success-case-card,
	.case-header,
	.case-content,
	.case-before-after,
	.case-reforms,
	.case-result,
	.reforms-list li {
		color: #333 !important;
		text-shadow: none !important;
	}

	/* Ajustes específicos para las tarjetas de servicios (cleaning-services-grid, staging-features, etc.) */
	.cleaning-service,
	.staging-feature,
	.service-item,
	.faq-item,
	.info-card {
		color: #333 !important;
		text-shadow: none !important;
	}

	/* Ajustes específicos para los textos dentro de los contenedores de información de contacto */
	.contact-info .info-card .info-content,
	.contact-info .info-card .info-description,
	.contact-info .info-card .info-phone {
		color: #333 !important;
		text-shadow: none !important;
	}

	/* Ajustes específicos para el subtítulo en la sección de servicios adicionales */
	.additional-services .section-cta .cta-text {
		color: #333 !important;
		text-shadow: none !important;
	}

	/* Ajustes específicos para la sección de mapa del valor oculto */
	.zone-card,
	.zone-card h4,
	.zone-card p,
	.zone-card .zone-timeframe,
	.map-cta .cta-questions p {
		color: #333 !important;
		text-shadow: none !important;
	}

	/* Ajustes específicos para la sección de reformas inteligentes */
	.renovation-example .example-card,
	.renovation-cta p {
		color: #333 !important;
		text-shadow: none !important;
	}

	/* Ajustes específicos para la sección de valoraciones oficiales */
	.official-valuations-content .valuation-section h3,
	.official-valuations-content .valuation-section p,
	.official-valuations-content .valuation-section ul li,
	.official-valuations-content .pretasacion-cta p {
		/*color: #333 !important;*/
		text-shadow: none !important;
	}

	/* Ajustes específicos para la sección de por qué vale más */
	.worth-more-content .worth-more-text p,
	.worth-more-content .statistic-highlight .stat-text {
		/*color: #333 !important;*/
		text-shadow: none !important;
	}

	/* Ajustes específicos para la sección de mapa del valor oculto */
	.hidden-value-content .map-intro p,
	.hidden-value-content .analysis-factors li {
		color: #333 !important;
		text-shadow: none !important;
	}

	/* Ajustes específicos para la sección de servicios adicionales */
	.additional-services .service-title,
	.additional-services .service-description,
	.additional-services .cta-text {
		color: #333 !important;
		text-shadow: none !important;
	}

	/* Ajustes específicos para la sección de FAQ */
	.faq-item .faq-answer p {
		color: #333 !important;
		text-shadow: none !important;
	}

	/* Ajustes específicos para la sección de contactos (info-card) */
	.contact-info .info-card .info-title,
	.contact-info .info-card .info-description {
		color: #333 !important;
		text-shadow: none !important;
	}

	/* Si el footer va a tener fondo claro, también se puede aplicar */
	.footer-section {
		color: #333 !important;
		text-shadow: none !important;
	}

/* Si se quiere ser más general, se puede aplicar a todos los descendientes de .container dentro de secciones sin imagen */
/* Esta regla es más agresiva, úsala con precaución si los estilos anteriores no son suficientes */
/* .container > *:not([class*="bg-image"]) * {
    color: #333 !important;
    text-shadow: none !important;
} */

/* --- FIN DE NUEVAS REGLAS --- */


/* --- CORRECCIONES DE CONTRASTE PARA FONDOS CLAROS --- */
/* Estas reglas sobrescriben el color y text-shadow para elementos dentro de secciones con fondo claro */

/* Secciones que generalmente tienen fondo claro */
.advantages,
.success-cases,
.why-worth-more,
.smart-renovations,
.cleaning-services,
.home-staging,
.official-valuations,
.hidden-value-map,
.additional-services,
.faq,
.footer {
    /* Asegura que el color por defecto del texto no sea blanco */
    /* No se aplica color aquí directamente a la sección, sino a sus hijos */
}

/* Establece color de texto oscuro y elimina sombra para elementos específicos dentro de secciones claras */
.advantages *,
.success-cases *,
.why-worth-more *,
.smart-renovations *,
.cleaning-services *,
.home-staging *,
.official-valuations *,
.hidden-value-map *,
.additional-services *,
.faq *,

.footer * {
    
	/*
	color: #333    !important; */  /* Texto oscuro */
    text-shadow: none !important; /* Elimina la sombra */
	
}

/* Opcional: Si quieres ser más específico y no afectar a *todos* los descendientes,
   puedes aplicar las reglas solo a los elementos comunes como h1, h2, h3, p, span, div, etc. */
/*
.advantages h1, .advantages h2, .advantages h3, .advantages h4, .advantages h5, .advantages h6, .advantages p, .advantages span, .advantages div,
.success-cases h1, .success-cases h2, .success-cases h3, .success-cases h4, .success-cases h5, .success-cases h6, .success-cases p, .success-cases span, .success-cases div,
.why-worth-more h1, .why-worth-more h2, .why-worth-more h3, .why-worth-more h4, .why-worth-more h5, .why-worth-more h6, .why-worth-more p, .why-worth-more span, .why-worth-more div,
.smart-renovations h1, .smart-renovations h2, .smart-renovations h3, .smart-renovations h4, .smart-renovations h5, .smart-renovations h6, .smart-renovations p, .smart-renovations span, .smart-renovations div,
.cleaning-services h1, .cleaning-services h2, .cleaning-services h3, .cleaning-services h4, .cleaning-services h5, .cleaning-services h6, .cleaning-services p, .cleaning-services span, .cleaning-services div,
.home-staging h1, .home-staging h2, .home-staging h3, .home-staging h4, .home-staging h5, .home-staging h6, .home-staging p, .home-staging span, .home-staging div,
.official-valuations h1, .official-valuations h2, .official-valuations h3, .official-valuations h4, .official-valuations h5, .official-valuations h6, .official-valuations p, .official-valuations span, .official-valuations div,
.hidden-value-map h1, .hidden-value-map h2, .hidden-value-map h3, .hidden-value-map h4, .hidden-value-map h5, .hidden-value-map h6, .hidden-value-map p, .hidden-value-map span, .hidden-value-map div,
.additional-services h1, .additional-services h2, .additional-services h3, .additional-services h4, .additional-services h5, .additional-services h6, .additional-services p, .additional-services span, .additional-services div,
.faq h1, .faq h2, .faq h3, .faq h4, .faq h5, .faq h6, .faq p, .faq span, .faq div,
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6, .footer p, .footer span, .footer div {
    color: #333 !important;
    text-shadow: none !important;
}
*/

/* Reglas específicas para tarjetas o cajas dentro de secciones claras que pueden tener fondo blanco */
.advantages .advantage-item,
.success-cases .success-case-card,
.why-worth-more .statistic-highlight,
.smart-renovations .renovation-example .example-card,
.cleaning-services .cleaning-service,
.home-staging .staging-feature,
.official-valuations .valuation-section,
.hidden-value-map .zone-card,
.additional-services .service-item,
.faq .faq-item,
.footer .footer-section,
.footer .info-card, /* Si se usa en el HTML original */
.contact .info-card /* Añadido también aquí si aplica */
{
    color: #333 !important;
    text-shadow: none !important;
}

/* Reglas específicas para el contenido dentro de esas tarjetas/cajas */
.advantages .advantage-item *,
.success-cases .success-case-card *,
.why-worth-more .statistic-highlight *,
.smart-renovations .renovation-example .example-card *,
.cleaning-services .cleaning-service *,
.home-staging .staging-feature *,
.official-valuations .valuation-section *,
.hidden-value-map .zone-card *,
.additional-services .service-item *,
.faq .faq-item *,
.footer .footer-section *,
.footer .info-card *,
.contact .info-card *
{
    /*color: #333 !important;*/
    text-shadow: none !important;
}

/* Ajustes para enlaces dentro de secciones claras */
.advantages a,
.success-cases a,
.why-worth-more a,
.smart-renovations a,
.cleaning-services a,
.home-staging a,
.official-valuations a,
.hidden-value-map a,
.additional-services a,
.faq a,
.footer a {
    color: #000000  !important; /* Color azul estándar para enlaces, puedes cambiarlo */
    text-shadow: none !important;
}

.advantages a:hover,
.success-cases a:hover,
.why-worth-more a:hover,
.smart-renovations a:hover,
.cleaning-services a:hover,
.home-staging a:hover,
.official-valuations a:hover,
.hidden-value-map a:hover,
.additional-services a:hover,
.faq a:hover,
.footer a:hover {
    color: #0d47a1 !important; /* Color azul oscuro para hover */
    text-decoration: underline;
}

/* Ajustes para botones dentro de secciones claras si usan color por defecto */
.advantages button,
.success-cases button,
.why-worth-more button,
.smart-renovations button,
.cleaning-services button,
.home-staging button,
.official-valuations button,
.hidden-value-map button,
.additional-services button,
.faq button,
.footer button {
    /* No se sobrescribe color aquí a menos que sea blanco por defecto y esté en una tarjeta clara */
    /* Se asume que los estilos .btn ya gestionan su color de fondo y texto */
}

/* Ajustes específicos para el formulario de contacto (info-card) */
.contact .info-card,
.contact .info-card h4,
.contact .info-card p,
.contact .info-card .info-phone,
.contact .info-card .info-description {
    color: #333 !important;
    text-shadow: none !important;
}

/* --- FIN CORRECCIONES DE CONTRASTE --- */


/* --- CORRECCIÓN PARA SECCIÓN official-valuations CON bg-image-section --- */
/* Aplica estilos de texto blanco para el contenido general fuera de tarjetas blancas */
.official-valuations.bg-image-section,
.official-valuations.bg-image-section .section-header h2,
.official-valuations.bg-image-section .section-header p,
.official-valuations.bg-image-section p,
.official-valuations.bg-image-section h3,
.official-valuations.bg-image-section ul,
.official-valuations.bg-image-section li,
.official-valuations.bg-image-section .process-comparison,
.official-valuations.bg-image-section .process-item h4,
.official-valuations.bg-image-section .process-item p,
.official-valuations.bg-image-section .pretasacion-cta p {
    /*color: white !important;*/   /* Fuerza texto blanco */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) !important; /* Sombra para legibilidad */
}

/* Asegura que los enlaces también sean visibles */
.official-valuations.bg-image-section a {
    color: #3498db !important; /* Color azul claro para enlaces */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) !important; /* Sombra para legibilidad */
}

.official-valuations.bg-image-section a:hover {
     color: #5dade2 !important; /* Color azul más claro para hover */
}

/* Mantener texto oscuro dentro de tarjetas blancas (como .valuation-section) */
.official-valuations.bg-image-section .valuation-section,
.official-valuations.bg-image-section .valuation-section h3,
.official-valuations.bg-image-section .valuation-section p,
.official-valuations.bg-image-section .valuation-section ul li,
.official-valuations.bg-image-section .pretasacion-cta button, /* Asegura color del botón si es necesario */
.official-valuations.bg-image-section .valuation-section * {
    color: #333 !important; /* Texto oscuro */
    text-shadow: none !important; /* Sin sombra */
}

/* Asegura que el fondo de .valuation-section sea blanco o claro si no lo es */
.official-valuations.bg-image-section .valuation-section {
    background-color: white; /* Añade fondo blanco si no lo tiene */
    padding: 15px; /* Añade padding si no lo tiene */
    border-radius: 6px; /* Añade borde redondeado si no lo tiene */
    margin-bottom: 15px; /* Añade margen si no lo tiene */
}

/* --- FIN CORRECCIÓN official-valuations bg-image-section --- */

/* --- CORRECCIÓN PARA COLOR DE TEXTO EN FOOTER --- */



/* Aplica el color secundario a la clase específica del nombre en el footer */
.footer-company-name {
    color: var(--secondary-color) !important;
}

/* Si también quieres aplicarlo al subtítulo, puedes añadir esta línea también */
.footer-company-tagline {
    color: var(--secondary-color) !important; /* Opcional */
}
/* --- FIN CORRECCIÓN FOOTER --- */


/* --- NUEVAS REGLAS CSS PARA FORMULARIO CON IMAGEN DE FONDO --- */

/* Asegura que el contenedor de la sección de contacto tenga posición relativa */
.contact.bg-image-section {
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1950&q=80') center/cover no-repeat; /* Ejemplo de imagen, cámbiala por la tuya */
    /* padding: 80px 0;  Ajusta el padding si es necesario */
    color: white; /* Texto por defecto blanco */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Sombra para mejorar legibilidad */
}

/* Opcional: Si no usas la clase bg-image-section, puedes aplicar directamente a #contacto */
/* #contacto {
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('ruta/a/tu/imagen.jpg') center/cover no-repeat;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
} */


/* Asegura que el texto dentro del contenedor del formulario sea blanco */

/* .contact.bg-image-section .section-header h2, */
/* .contact.bg-image-section .section-header p, */
/* .contact.bg-image-section p, */
.contact.bg-image-section label,
.contact.bg-image-section span {
    color: #000000 !important;  /* Fuerza el color blanco */
    /*text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important;*/ /* Añade sombra */
}

/* Asegura que los elementos del formulario tengan un color de texto legible (blanco o gris oscuro) */
.contact.bg-image-section input,
.contact.bg-image-section select,
.contact.bg-image-section textarea {
    color: #333; /* Texto dentro de los inputs en color oscuro */
    text-shadow: none !important; /* Sin sombra en el texto del input */
}

/* Asegura que el botón del formulario tenga un color de texto blanco */
.contact.bg-image-section .btn-submit {
    color: white !important;   /* Fuerza el color blanco del texto del botón */
}

/* Asegura que el texto de las tarjetas de información sea negro */
.contact.bg-image-section .info-card,
.contact.bg-image-section .info-card h4,
.contact.bg-image-section .info-card p,
.contact.bg-image-section .info-card .info-phone,
.contact.bg-image-section .info-card .info-description {
    color: #333 !important; /* Fuerza texto oscuro */
    text-shadow: none !important; /* Elimina sombra */
}

/* --- FIN NUEVAS REGLAS CSS --- */


/* --- NUEVAS REGLAS CSS PARA ESTILO DE TARJETAS EN SECCIÓN VENTAJAS --- */

/* Aplica un borde/sombra similar al de las tarjetas de casos de éxito a las tarjetas de ventajas */
.advantages-grid .advantage-item {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra similar a .success-case-card */
    /* background-color: white;  Ya está definido en la regla general para .advantage-item */
    /* padding, border-radius, etc.  Ya están definidos en la regla general para .advantage-item */
}

/* --- FIN NUEVAS REGLAS CSS --- */


/* CAPTCHA Styles */
.captcha-group {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 20px;
}

.captcha-container {
  display: flex;
  flex-wrap: wrap; /* 👈 permite que los elementos se apilen si no caben */
  align-items: center;
  gap: 12px;
  width: 100%;
}

.captcha-question-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0; /* 👈 clave para que el span no empuje */
}

.captcha-question-box span {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  flex: 1;
  min-width: 0;
}


.captcha-equals {
  font-size: 18px;
  font-weight: 700;
  color: #92400e;
}

.captcha-input {
  width: 80px;
  text-align: center;
  font-weight: 700;
  flex-shrink: 0; /* evita que se contraiga demasiado */
}


/* --- ESTILOS ESPECÍFICOS PARA LA SECCIÓN "LAS 3 FORMAS DE TASACIÓN" --- */

/* Contenedor general de las tarjetas */
.methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 1 o 2 tarjetas por fila según espacio */
    gap: 2rem; /* Espacio entre tarjetas */
    margin: 2rem 0;
}

/* Estilo base para cada tarjeta */
.method-card {
    background: white; /* Fondo blanco para contraste */
    padding: 1.5rem; /* Espaciado interno */
    border-radius: 12px; /* Bordes redondeados como en otras tarjetas */
    box-shadow: var(--shadow-medium); /* Sombra media por defecto */
    border: 1px solid var(--border-color); /* Borde sutil */
    transition: all 0.3s ease; /* Transición suave para el hover */
    display: flex;
    flex-direction: column; /* Asegura que el contenido se organice verticalmente */
    height: 100%; /* Altura uniforme si tienen distinto contenido */
}

/* Efecto al pasar el ratón */
.method-card:hover {
    transform: translateY(-5px); /* Eleva la tarjeta */
    box-shadow: var(--shadow-large); /* Sombra más pronunciada */
}

/* Icono principal */
.method-icon {
    font-size: 2.5rem; /* Tamaño grande para el icono */
    margin-bottom: 1rem; /* Espacio debajo del icono */
    display: block; /* Asegura que ocupe su línea */
    color: var(--primary-color); /* Puedes cambiar el color si quieres que destaque más */
}

/* Título de la tarjeta */
.method-title {
    font-family: var(--font-heading); /* Usa la fuente de encabezados */
    font-size: 1.25rem; /* Tamaño de título */
    font-weight: 600; /* Peso medio-fuerte */
    color: var(--text-primary); /* Color de texto primario */
    margin-bottom: 1rem; /* Espacio debajo del título */
    line-height: 1.4; /* Línea más compacta */
}

/* Descripción de la tarjeta */
.method-description {
    color: var(--text-secondary); /* Color de texto secundario */
    line-height: 1.6; /* Altura de línea cómoda */
    flex-grow: 1; /* Empuja el botón (si lo hubiera) hacia abajo */
}

/* Estilo para el párrafo resumen debajo de las tarjetas */
.method-summary {
    margin-top: 2rem; /* Espacio encima */
    padding: 1.5rem; /* Espaciado interno */
    background-color: var(--background-light); /* Fondo claro */
    border-radius: 12px; /* Bordes redondeados */
    font-size: 1.1rem; /* Tamaño de fuente ligeramente mayor */
    text-align: center; /* Centrado */
    line-height: 1.6; /* Altura de línea cómoda */
    border-left: 4px solid var(--primary-color); /* Línea decorativa */
}

/* Responsive */
@media (max-width: 768px) {
    .methods-grid {
        grid-template-columns: 1fr; /* Una columna en móvil */
        gap: 1.5rem;
    }
}


/* --- MEJORA DEL BLOQUE 97% CON ICONO --- */
.statistic-highlight {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    padding: 1.5rem;
    border-radius: 16px;
    margin: 2rem 0;
    box-shadow: var(--shadow-light);
    text-align: left;
}

.stat-icon {
    font-size: 2.5rem;
    color: var(--accent-color); /* Verde emergente */
    flex-shrink: 0;
}

.stat-content .stat-number {
    font-size: 2.5rem !important;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 0.25rem;
    line-height: 1;
}

.stat-content .stat-text {
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .statistic-highlight {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    .stat-icon {
        margin-top: 0.5rem;
    }
}