/* VARIABLES CSS - Mantener consistencia con tu home.html */
        :root {
            --primary-text-color: #f5f5f7; /* Blanco suave para texto en fondos oscuros */
            --secondary-text-color: rgba(255, 255, 255, 0.7); /* Gris claro para texto secundario */
            --background-dark: #000000; /* Negro puro para secciones oscuras */
            --background-light: #f5f5f7; /* Blanco muy suave para secciones claras */
            --card-bg-color: #1c1c1e; /* Fondo oscuro para tarjetas en secciones oscuras */
            --accent-color: #0070c9; /* Azul de Apple */
            --transition-speed: 0.4s; /* Velocidad general de las transiciones */
        }

        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            background-color: var(--background-dark); /* Fondo oscuro por defecto */
            color: var(--primary-text-color);
            display: flex; /* Para footer pegado abajo si el contenido es corto */
            flex-direction: column;
            min-height: 100vh; /* Altura mínima para el cuerpo */
        }

        /* Navbar si lo quieres incluir aquí */
        header {
             background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro y ligeramente transparente */
             padding: 1rem 0;
             position: sticky;
             top: 0;
             width: 100%;
             z-index: 1000;
             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }
        .navbar-brand {
             color: var(--primary-text-color) !important;
             font-weight: 700;
             font-size: 1.5rem;
        }
        .nav-link {
             color: var(--secondary-text-color) !important;
             font-weight: 500;
             transition: color 0.3s ease;
        }
        .nav-link:hover {
             color: var(--primary-text-color) !important;
        }
        .navbar-toggler {
             border-color: rgba(255, 255, 255, 0.1);
        }
        .navbar-toggler-icon {
             background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }


        /* SECCIÓN DE CONTACTO */
        .contact-section {
            background-color: var(--background-light); /* Fondo claro para la sección */
            color: #1d1d1f; /* Texto oscuro */
            padding: 100px 20px;
            text-align: center;
            flex-grow: 1; /* Permite que esta sección ocupe el espacio disponible */
        }
        .contact-section h1 {
            font-size: clamp(2.5rem, 6vw, 4rem);
            font-weight: 700;
            margin-bottom: 20px;
            letter-spacing: -0.02em;
            color: #1d1d1f;
        }
        .contact-section p.lead {
            font-size: clamp(1rem, 2.5vw, 1.4rem);
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto 60px auto;
            color: #6e6e73;
        }

        .contact-card {
            background-color: #ffffff; /* Fondo blanco puro para la tarjeta del formulario */
            border-radius: 18px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
            padding: 40px;
            max-width: 700px; /* Ancho máximo para el formulario */
            margin: 0 auto;
            text-align: left; /* Alineación del texto dentro del formulario */
            transition: transform var(--transition-speed) ease;
        }
        .contact-card:hover {
            transform: translateY(-5px); /* Pequeño efecto al pasar el ratón */
        }

        .form-group {
            margin-bottom: 25px;
        }
        .form-group label {
            display: block;
            font-size: 1rem;
            font-weight: 500;
            color: #1d1d1f;
            margin-bottom: 8px;
        }
        .form-control-apple {
            width: 100%;
            padding: 12px 18px;
            font-size: 1.05rem;
            border: 1px solid #e0e0e0;
            border-radius: 10px; /* Bordes más redondeados */
            background-color: #f8f8f8; /* Fondo ligeramente grisáceo para los campos */
            color: #1d1d1f;
            transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
           
        }
        .form-control-apple:focus {
            border-color: var(--accent-color);
            box-shadow: 0 0 0 4px rgba(0, 112, 201, 0.2); /* Sombra de enfoque sutil */
            background-color: #ffffff; /* Se vuelve blanco al enfocar */
            outline: none;
        }
        .form-control-apple::placeholder {
            color: #a0a0a0;
            opacity: 1; /* Para Firefox */
        }
        .form-control-apple.is-invalid {
            border-color: #dc3545; /* Color de error de Bootstrap */
        }
        .invalid-feedback {
            font-size: 0.85rem;
            color: #dc3545;
            margin-top: 5px;
            display: none; /* Se mostrará con JavaScript */
        }
        .form-group.has-error .invalid-feedback {
            display: block;
        }
        textarea.form-control-apple {
            resize: vertical;
            min-height: 120px;
        }
        .btn-submit-apple {
            background-color: var(--accent-color);
            color: #fff;
            border: none;
            padding: 14px 40px;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 999px; /* Botón píldora */
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
            width: 100%; /* Ocupa todo el ancho */
        }
        .btn-submit-apple:hover {
            background-color: #005bb5; /* Un tono más oscuro del azul al pasar el ratón */
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 112, 201, 0.3);
        }
        .btn-submit-apple:active {
            transform: translateY(0);
            box-shadow: none;
        }

        /* NUEVOS ESTILOS PARA EL PÁRRAFO DE INSTRUCCIONES */
        .instructions-box {
            margin-top: 30px; /* Espacio superior para separarlo del botón */
            padding-top: 20px; /* Espacio interno superior */
            border-top: 1px solid #e5e5e5; /* Línea sutil como divisor */
            text-align: center; /* Centrar el texto */
        }

        .instructions-text {
            font-size: 0.9rem; /* Letra pequeña */
            color: #888888; /* Gris suave, similar a las notas de Apple */
            line-height: 1.6;
            margin-bottom: 0; /* Sin margen inferior extra */
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Misma tipografía */
            text-align: justify;
            padding-left: 30%;
            padding-right: 30%;
        }

        /* FOOTER STYLES - Adaptado para un archivo separado */
        .footer {
            background: var(--background-dark);
            color: rgba(255, 255, 255, 0.6);
            text-align: center;
            padding: 60px 20px;
            font-size: 0.9rem;
            margin-top: auto; /* Empuja el footer hacia abajo */
        }
        .footer p {
            margin-bottom: 0;
        }
        .footer a {
            color: rgba(255, 255, 255, 0.6);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .footer a:hover {
            color: #fff;
        }

        /* Media Queries for Responsiveness */
        @media (max-width: 768px) {
            .contact-section {
                padding: 60px 15px;
            }
            .contact-section h1 {
                font-size: 2rem;
            }
            .contact-section p.lead {
                font-size: 1rem;
                margin-bottom: 40px;
            }
            .contact-card {
                padding: 25px;
            }
            .form-group {
                margin-bottom: 20px;
            }
            .form-control-apple, .btn-submit-apple {
                font-size: 0.95rem;
                padding: 10px 15px;
            }
            .instructions-box {
                margin-top: 20px;
                padding-top: 15px;
            }
            .instructions-text {
                font-size: 0.8rem;
            }
        }
        .zoom {
            transition: transform 1.5s ease;
           
            }
            .zoom:hover {
            transform: scale(1.5);
            cursor: pointer;
            }
        .zoom_menor {
            transition: transform 1.5s ease;
           
            }
        .zoom_menor:hover {
        transform: scale(1.2);
        cursor: pointer;
        }