/* Estilos para la página de contacto */

/* Contenedor principal */
#contacto {
    padding-bottom: 4rem;
}

/* Sección principal de contacto */
.contact-main {
    padding: 3rem 0;
}

/* Estilos para la imagen */
.contact-main-img {
    display: block;
    position: relative;
    clip-path: polygon( 38.095% 14.048%, 21.905% 14.048%, 0% 50%, 21.905% 85.952%, 38.095% 85.952%, 29.524% 100%, 69.524% 100%, 100% 50%, 69.524% 0%, 29.524% 0% );
    overflow: hidden;
}

.contact-main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Contenido del formulario */
.contact-main-content {
    padding: 1.5rem;
}

.contact-main-header {
    margin-bottom: 2rem;
}

.title-second, .contact-main-header h2 {
    font-size: 2.75rem;
    font-weight: 500;
    line-height: 1.3;
    display: block;
    margin-top:0;
}

/* Estilos para todos los FluentForms */
.fluentform .ff-el-group {
    margin-bottom: 1.5rem;
}
.fluentform .ff-el-form-control {
    background-color: var(--light-purple);
    border: .063rem solid #ccc;
    border-radius: 0 !important;
    color: var(--black);
    line-height: 1.2;
    padding: .75rem .938rem !important;
    transition: var(--transition);
}

.fluentform .ff-el-form-control:focus {
    border-bottom-color: var(--pink) !important;
    box-shadow: none !important;
    outline: none !important;
}

.fluentform .ff-el-form-control::placeholder {
    color: var(--grey) !important;
    opacity: 1 !important;
}

.fluentform select.ff-el-form-control {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="6"><path d="M0 0l6 6 6-6z" fill="%23aaaaaa"/></svg>');
    background-repeat: no-repeat;
    background-position: right .625rem center;
    padding-right: 1.875rem !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Estilo para el botón de enviar - igual que los botones del sitio */
.fluentform .ff-btn-submit {
    color: var(--white) !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 1.188rem !important;
}

.fluentform .ff-btn-submit:hover {
    background-position: 100% !important;
    transform: skewX(-13deg) !important;
    box-shadow: none !important;
}

/* Añadimos un span dentro del botón para corregir el skew */
.fluentform .ff-btn-submit span {
    display: block !important;
    transform: skewX(13deg) !important;
}

/* Utilizamos :after para insertar el span si no existe */
.fluentform .ff-btn-submit:not(:has(> span))::after {
    content: attr(value) !important;
    display: block !important;
    transform: skewX(13deg) !important
}

/* Estilo para mensajes de error */
.fluentform .ff-el-is-error .ff-el-form-control {border-bottom-color: #f56c6c !important;}

.fluentform .ff-el-help-message {
    color: #f56c6c !important;
    margin-top: .313rem !important;
    font-size: .875rem !important;
}

/* Responsive */
@media (max-width: 768px) {
    .contact-main-content {
        padding: 1rem 0;
        margin-top: 2rem;
    }
    .contact-main-img {
        max-width: 65dvw;
        margin: 0 auto 3rem;
    }
    .contact-main-img img {height: 100%}
    
    .fluentform .ff-btn-submit {
        width: 100% !important;
        padding: .938rem !important;
    }
    .title-second, .contact-main-header h2 {font-size: 2.25rem}
}

@media (max-width: 575.98px) {
    .contact-main-img {max-width: 85dvw}    
    .title-second, .contact-main-header h2 {font-size:2rem}
}