/*
 * Ajustes de las pantallas V100 dentro del tema.
 *
 * 1. El botón flotante de chat que inyecta el guion del formulario, escondido en el resto
 *    del sitio desde assets/css/style.css, que aquí no se carga.
 * 2. El botón de cierre de los casos de éxito, que no parte y desborda en teléfono.
 * 3. El pie, cuyos enlaces van en una fila que tampoco parte.
 */

.zsiq_floatmain.zsiq_theme1.siq_bR {
    display: none !important;
}

/*
 * El formulario llega con el estilo de Zoho: etiqueta y campo en dos columnas flotadas, los
 * campos al 60 % y un botón azul en degradado. Se le da la forma del prototipo —etiqueta
 * encima, campo a todo el ancho, botón naranja— sin tocar ni un campo. Los selectores llevan
 * tres clases porque la hoja de Zoho se inyecta después de ésta y con dos empataría; los
 * !important responden a los suyos.
 */

.contact-form-embed {
    margin-top: 0;
}

/*
 * Perfil del equipo, en /solutions/engineering-expertise/. El panel oscuro, el sobretítulo y
 * la banda de patentes ya existen en la hoja del V100; lo nuevo son las cuatro cifras, las
 * píldoras de disciplina sobre fondo oscuro y la línea de reparto.
 *
 * El acento es #ff512b en toda la sección: el mismo del sobretítulo y del borde de la banda
 * de patentes. La variable --orange del tema es #ff5a2a, nueve unidades distinta, y mezclar
 * las dos deja dos rojos casi iguales en el mismo panel.
 */

.capability-staff-next .staff-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin: 26px 0 34px;
}

.capability-staff-next .staff-stat {
    padding: 18px 16px 20px;
    border-top: 4px solid #ff512b;
    border-radius: 0 0 6px 6px;
    background: #f1f4f5;
}

.capability-staff-next .staff-stat b {
    display: block;
    margin-bottom: 8px;
    color: #ff512b;
    font-size: 40px;
    font-weight: 900;
    line-height: 1;
}

.capability-staff-next .staff-stat span {
    color: #27333e;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.capability-staff-next .staff-heading {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.capability-staff-next .staff-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 26px;
}

.capability-staff-next .staff-chips span {
    padding: 8px 12px;
    border: 1px solid #ff512b;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.capability-staff-next .staff-levels {
    margin: 0;
    font-size: 13px;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.capability-staff-next .staff-levels strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 800;
}

/* Su regla es #id.clase y empata con dos clases: hay que subir por encima o marcar. */
.contact-form-embed #crmWebToEntityForm {
    width: 100%;
    padding: 0 !important;
}

/* La tarjeta ya lleva su propio título. */
.contact-form-embed .zcwf_title {
    display: none;
}

/* El ritmo lo marcan los márgenes del campo; los 15px de cada fila se suman de más. */
.contact-form-embed #crmWebToEntityForm .zcwf_row {
    margin: 0;
}

.contact-form-embed .zcwf_row .zcwf_col_lab,
.contact-form-embed .zcwf_row .zcwf_col_fld {
    float: none;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.contact-form-embed .zcwf_row .zcwf_col_lab label {
    font-size: 14px;
    font-weight: 400;
    color: var(--ink, #111820);
}

/* Todos los tipos que el formulario puede emitir, para que un campo nuevo añadido en el
   CRM salga con esta forma sin tener que tocar nada aquí. */
.contact-form-embed .zcwf_row .zcwf_col_fld input[type='text'],
.contact-form-embed .zcwf_row .zcwf_col_fld input[type='email'],
.contact-form-embed .zcwf_row .zcwf_col_fld input[type='tel'],
.contact-form-embed .zcwf_row .zcwf_col_fld input[type='url'],
.contact-form-embed .zcwf_row .zcwf_col_fld input[type='number'],
.contact-form-embed .zcwf_row .zcwf_col_fld input[type='date'],
.contact-form-embed .zcwf_row .zcwf_col_fld input[type='password'],
.contact-form-embed .zcwf_row .zcwf_col_fld select,
.contact-form-embed .zcwf_row .zcwf_col_fld .zcwf_col_fld_slt,
.contact-form-embed .zcwf_row .zcwf_col_fld textarea {
    float: none;
    width: 100%;
    padding: 13px;
    margin: 7px 0 18px;
    border: 1px solid #ccd4d9 !important;
    border-radius: 3px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink, #111820);
    background: var(--white, #fff);
}

.contact-form-embed .zcwf_row .zcwf_col_fld textarea {
    min-height: 140px;
}

.contact-form-embed .zcwf_row .zcwf_col_fld select,
.contact-form-embed .zcwf_row .zcwf_col_fld .zcwf_col_fld_slt {
    height: 44px;
    background: var(--white, #fff);
}

/* Los grupos de opciones van en línea con su texto, no estirados. */
.contact-form-embed .zcwf_row .zcwf_col_fld input[type='radio'] {
    float: none;
    width: auto;
    margin: 0 8px 0 0;
    padding: 0;
}

/* La casilla del aviso de privacidad no puede estirarse como un campo de texto. */
.contact-form-embed .zcwf_row .zcwf_col_fld input[type='checkbox'] {
    float: none;
    width: auto;
    margin: 0 8px 0 0;
    padding: 0;
}

.contact-form-embed .zcwf_row .zcwf_privacy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 0 18px;
}

.contact-form-embed .zcwf_row .zcwf_privacy_txt {
    width: auto;
    padding: 0;
}

.contact-form-embed .zcwf_row .zcwf_privacy_txt p {
    margin: 0;
}

/* Botones con la forma del prototipo: el de enviar en primario, el de limpiar en discreto. */
.contact-form-embed .zcwf_row .zcwf_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    padding: 15px 20px;
    border: 1px solid var(--line, #d8dee3);
    border-radius: 3px;
    background: var(--white, #fff);
    color: var(--muted, #66717d) !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .4px;
    text-transform: uppercase;
    cursor: pointer;
}

.contact-form-embed .zcwf_row .formsubmit.zcwf_button {
    margin-right: 10px;
    border-color: var(--orange, #ff5a2a);
    background: var(--orange, #ff5a2a);
    color: var(--white, #fff) !important;
}

/* Su texto entero marcaba el mínimo de la columna y la página se arrastraba de lado. */
@media (max-width: 900px) {
    .case-closing .btn {
        white-space: normal;
    }

    .footer-grid {
        flex-wrap: wrap;
        gap: 12px;
    }

    .footer-grid > span:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 0 16px;
    }

    .footer-grid > span:last-child a {
        margin-left: 0;
    }
}