/* ==========================================================================
   contact.css — pagina de contacto
   - botones del formulario (overrides puntuales del tema)
   - cards con resplandor/borde celeste al hover
   - labels flotantes (.flf) para el formulario
   - honeypot anti-spam oculto
   - separador antes del mapa
   ========================================================================== */

.wsus__contact .common_btn,
.wsus__contact_question .common_btn {
    background-color: #08c !important;
    color: #fff !important;
    border: none !important;
    border-radius: 30px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 12px 40px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}

.wsus__contact .common_btn:hover,
.wsus__contact_question .common_btn:hover {
    background-color: #063d5c !important;
    color: #fff !important;
}

.wsus__contact_area {
    padding-bottom: 0 !important;
}

/* icono del boton enviar: alineado con el texto, no se separa del label */
#form-submit svg {
    margin-right: 8px;
    vertical-align: -3px;
}

/* el reset global del tema fuerza span{color:#353535}: el texto del boton
   debe heredar el blanco del boton para verse uniforme con el icono */
#form-submit .btn-label {
    color: inherit;
}

/* --------------------------------------------------------------------------
   Cards laterales: resplandor celeste al pasar el mouse
   -------------------------------------------------------------------------- */
#wsus__contact .wsus__contact_single {
    transition: border-color 0.18s ease, box-shadow 0.28s ease,
        transform 0.18s ease;
}

#wsus__contact .wsus__contact_single:hover {
    border-color: rgba(14, 165, 233, 0.5);
    box-shadow:
        0 0 0 1px rgba(14, 165, 233, 0.22),
        0 10px 32px -8px rgba(14, 165, 233, 0.38);
    transform: translateY(-2px);
}

/* slider de cards en movil: aire entre slides + dots como puntos reales
   (slick usa el numero del slide como texto del boton si nadie lo oculta) */

/* el .row de Bootstrap es display:flex y rompe el layout interno de slick:
   al inicializar volvemos a block para que track y dots apilen normal */
.js-contact-cards-slider.slick-initialized {
    display: block;
}

.js-contact-cards-slider .slick-slide {
    margin: 0 6px;
}

.js-contact-cards-slider .slick-dots {
    /* fila centrada de puntos */
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 14px 0 4px;
    padding: 0;
    bottom: auto;
    left: auto;
    list-style: none;
}

.js-contact-cards-slider .slick-dots li {
    width: auto;
    height: auto;
    margin: 0;
    float: none;
}

.js-contact-cards-slider .slick-dots li button {
    width: 9px;
    height: 9px;
    padding: 0;
    font-size: 0;
    line-height: 0;
    background-color: #cbd5e1;
    border: none;
    border-radius: 50%;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.js-contact-cards-slider .slick-dots li button:hover {
    background-color: #7dd3fc;
}

.js-contact-cards-slider .slick-dots li.slick-active button {
    background-color: #0ea5e9;
    transform: scale(1.25);
}

/* cards inferiores (horario/tiempo/redes): solo el borde las distingue */
.contact_card_line {
    transition: border-color 0.18s ease;
}

.contact_card_line:hover {
    border-color: rgba(14, 165, 233, 0.5);
}

/* --------------------------------------------------------------------------
   Labels flotantes: centradas en reposo, montadas sobre el borde al escribir
   -------------------------------------------------------------------------- */
.flf {
    position: relative;
    margin-bottom: 18px;
}

.flf input,
.flf textarea {
    width: 100%;
    padding: 24px 16px 9px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    color: #1f2937;
    background-color: #fff;
    border: 1px solid #d7dde3;
    border-radius: 10px;
    outline: none;
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.flf input:focus,
.flf textarea:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.13);
}

.flf label {
    position: absolute;
    /* padding lateral compensado: el texto arranca alineado con el contenido
       del input y, al flotar, ese mismo padding hace de hueco sobre el borde */
    left: 11px;
    padding: 0 6px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 15px;
    pointer-events: none;
    transition: top 0.15s ease, transform 0.15s ease, font-size 0.15s ease,
        color 0.15s ease, background-color 0.15s ease;
}

.flf textarea + label {
    top: 21px;
    transform: none;
}

/* flotado: montada SOBRE la linea superior del borde */
.flf input:focus + label,
.flf input:not(:placeholder-shown) + label,
.flf textarea:focus + label,
.flf textarea:not(:placeholder-shown) + label {
    top: 0;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #0284c7;
    background-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    #wsus__contact .wsus__contact_single,
    .contact_card_line,
    .flf label {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Honeypot anti-spam: fuera de pantalla pero presente en el DOM
   -------------------------------------------------------------------------- */
.flf-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Separador antes del mapa: linea fina con degradado celeste
   -------------------------------------------------------------------------- */
.contact_divider {
    border: none;
    height: 1px;
    margin: 28px auto 0;
    max-width: 720px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(14, 165, 233, 0.4),
        transparent
    );
}