<!-- START: SEOTopSecret Webflow Form -->
<style>
    /* Contenedor principal del formulario */
    .sts-form-wrapper {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        max-width: 600px; /* Ancho máximo del formulario */
        margin: 2rem auto; /* Centrar y dar espacio */
    }

    /* Estilo para las etiquetas (Nombre, Correo Electrónico) */
    .sts-form-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #333333;
        font-size: 0.9rem;
    }

    /* Estilo para los campos de texto */
    .sts-form-input {
        display: block;
        width: 100%;
        padding: 12px 16px;
        margin-bottom: 20px;
        font-size: 1rem;
        color: #1a1a1a;
        background-color: #f9fafb;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        box-sizing: border-box; /* Importante para que el padding no afecte el ancho */
        transition: border-color 0.3s, box-shadow 0.3s;
    }

    /* Efecto de foco en los campos de texto */
    .sts-form-input:focus {
        outline: none;
        border-color: #5101DB;
        box-shadow: 0 0 0 3px rgba(81, 1, 219, 0.1);
    }

    /* Estilo para el botón de enviar */
    .sts-form-button {
        width: 100%;
        padding: 14px 20px;
        font-size: 1.1rem;
        font-weight: 700;
        text-align: center;
        color: #ffffff;
        background-color: #5101DB;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .sts-form-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(81, 1, 219, 0.2);
    }
    
    /* Estilos para los mensajes de éxito y error de Webflow */
    .sts-success-message, .sts-error-message {
        padding: 1rem;
        border-radius: 8px;
        margin-top: 1rem;
        text-align: center;
    }
    
    .sts-success-message {
        background-color: #d1fae5; /* Verde claro */
        color: #065f46; /* Verde oscuro */
    }
    
    .sts-error-message {
        background-color: #fee2e2; /* Rojo claro */
        color: #991b1b; /* Rojo oscuro */
    }
</style>

<div class="sts-form-wrapper">
    <!-- El div con la clase "w-form" es el contenedor principal de Webflow -->
    <div class="w-form">
        <!-- El 'name' y 'data-name' son importantes para que Webflow identifique el formulario -->
        <form id="wf-form-contacto" name="wf-form-Contacto" data-name="Contacto SEOTopSecret">
            
            <label for="Nombre" class="sts-form-label">Nombre</label>
            <input type="text" class="sts-form-input w-input" maxlength="256" name="Nombre" data-name="Nombre" placeholder="Tu nombre completo" id="Nombre" required="">
            
            <label for="Correo-Electronico" class="sts-form-label">Correo Electrónico</label>
            <input type="email" class="sts-form-input w-input" maxlength="256" name="Correo-Electronico" data-name="Correo Electronico" placeholder="tu@email.com" id="Correo-Electronico" required="">
            
            <input type="submit" value="Enviar" data-wait="Enviando..." class="sts-form-button w-button">
            
        </form>
        
        <!-- Mensaje de éxito de Webflow (se muestra al enviar correctamente) -->
        <div class="w-form-done">
            <div class="sts-success-message">¡Gracias! Hemos recibido tu mensaje. Nos pondremos en contacto contigo pronto.</div>
        </div>
        
        <!-- Mensaje de error de Webflow (se muestra si hay un problema) -->
        <div class="w-form-fail">
            <div class="sts-error-message">Oops! Hubo un error al enviar el formulario. Por favor, inténtalo de nuevo.</div>
        </div>
    </div>
</div>
<!-- END: SEOTopSecret Webflow Form -->