/* ============================================================
   Administrable floating contact buttons (WhatsApp / Client / Catalog)
   Vertical rounded rectangles anchored to the right edge.
   ============================================================ */
/* Mobile: full-width bottom bar. Desktop (>=1280px): vertical tabs anchored to
   the right edge. Ported 1:1 from the darnel theme (Figma tab design). */
.floating-buttons {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 19;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    background-color: #003765;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}

.floating-buttons__item {
    position: relative;
    isolation: isolate;
    display: flex;
    flex: 1 1 0%;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    overflow: hidden;
    border: 0;
    background-color: #003765;
    padding: 0.75rem;
    text-align: center;
    color: #fff;
    text-decoration: none;
    transition: color .3s ease, background-color .3s ease;
}

.floating-buttons__item::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    aspect-ratio: 1 / 1;
    width: 0;
    transform: translate(50%, 50%);
    border-radius: 9999px;
    background-color: #006fb9;
    opacity: 0;
    transition:
        width 2.4s linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993),
        opacity 0.5s ease;
}

.floating-buttons__item--whatsapp {
    background-color: #65b32e;
}

.floating-buttons__item--whatsapp::before {
    background-color: #4b9815;
}

.floating-buttons__item:hover::before {
    width: 320%;
    opacity: 1;
}

.floating-buttons__icon-wrap {
    display: flex;
    height: 1.25rem;
    width: 1.25rem;
    margin-inline: auto;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.floating-buttons__icon {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: contain;
    padding: 0;
}

.floating-buttons__label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    width: 100%;
    text-align: center;
    font-size: 12px;
    line-height: 1.3333;
    font-weight: 400;
    overflow-wrap: break-word;
    color: #fff;
}

/* Mobile only: the bar is a fixed full-width strip at the bottom, so reserve
   space at the end of the page to keep it from covering the footer. On desktop
   (>=1280px) the bar sits on the right edge, so no reservation is needed. */
@media (max-width: 1279px) {
    body {
        padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
        background-color: #2671ba;
    }

    /* Mobile bar is horizontal: reserve 2 lines so icons stay aligned across
       tabs. On desktop the tabs are stacked, so each one centers its own
       content (no reservation) and single-line labels don't look top-heavy. */
    .floating-buttons__label {
        min-height: 2rem;
    }
}

@media (min-width: 1280px) {
    .floating-buttons {
        top: 50%;
        right: 0;
        bottom: auto;
        left: auto;
        transform: translateY(-50%);
        flex-direction: column;
        align-items: flex-end;
        gap: 0.5rem;
        overflow: visible;
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
    }

    .floating-buttons__item {
        height: 5rem;
        width: 5.2rem;
        flex: none;
        gap: 0.3125rem;
        border-top-left-radius: 1rem;
        border-bottom-left-radius: 1rem;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        padding-inline: 0.25rem;
        padding-block: 0.75rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    }
}

@media (hover: hover) and (min-width: 1280px) {
    .floating-buttons__item {
        transition:
            color 0.3s ease,
            background-color 0.3s ease,
            transform 1.533s linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993);
        transform-origin: right center;
    }

    .floating-buttons__item:hover {
        transform: scale(1.108);
    }
}

@media (prefers-reduced-motion: reduce) {
    .floating-buttons__item {
        transition: color 0.3s ease, background-color 0.3s ease;
    }

    .floating-buttons__item::before {
        transition: none;
    }

    .floating-buttons__item:hover {
        transform: none;
    }
}

/* ============================================================
   Lead modal — success / error result states
   Mirrors the mi-catalogo modal design (resolved token values):
   blue-500 #005185, gray-500 #2e2e2e, font-large 22px, medium-plus 20px.
   ============================================================ */
.lead-modal .lead-result,
.lead-page .lead-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
    padding: 8px 24px 16px;
}

.lead-modal .lead-result__icon,
.lead-page .lead-result__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.lead-modal .lead-result__icon img,
.lead-page .lead-result__icon img,
.lead-modal .lead-result__icon svg ,
.lead-page .lead-result__icon svg {
    display: block;
    margin: auto;
    max-width: 100%;
    height: auto;
}

/* Titles/messages come from richeditor fields, so the text may sit inside a
   nested <p> — style both the container and that <p> so the sizing sticks. */
.lead-modal .lead-result__title,
.lead-page .lead-result__title,
.lead-modal .lead-result__title p ,
.lead-page .lead-result__title p {
    margin: 0;
    font-size: 22px;
    line-height: 1;
    font-weight: 500;
    color: #005185;
}

.lead-modal .lead-result__msg,
.lead-page .lead-result__msg,
.lead-modal .lead-result__msg p ,
.lead-page .lead-result__msg p {
    margin: 0;
    font-size: 20px;
    line-height: 1.15;
    font-weight: 400;
    color: #2e2e2e;
}

.lead-modal .lead-result__actions,
.lead-page .lead-result__actions {
    margin-top: 4px;
    display: flex;
    gap: 16px;
    justify-content: center;
}

/* Result states (success/error) use the narrower mi-catalogo modal width
   (624px) instead of the wide 900px form width. :has() covers both the
   partial-rendered success and the JS-built error modal. */
.lead-modal__dialog:has(.lead-result) {
    max-width: 624px;
}

/* ============================================================
   Lead modal
   ============================================================ */
.lead-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.lead-modal.is-open {
    display: flex;
}

.lead-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
}

.lead-modal__dialog {
    position: relative;
    margin: auto;
    background: #fff;
    width: 92%;
    max-width: 900px;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 14px;
    padding: 32px 34px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

.lead-modal__close {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 0;
    background: none;
    border: none;
    line-height: 0;
    cursor: pointer;
    transition: opacity .15s ease;
}

.lead-modal__close svg {
    display: block;
    width: 40px;
    height: 40px;
}

.lead-modal__close:hover { opacity: .65; }

/* Reserve space on the right so the header text never runs under the
   absolutely-positioned close button (most visible on narrow/mobile widths). */
.lead-form__title {
    color: #1b4f8a;
    font-weight: 700;
    margin: 0 0 22px;
    padding-right: 48px;
}

.lead-form__description {
    color: #666;
    margin-bottom: 20px;
    padding-right: 48px;
}

/* Validation error summary (shown by October on validation failure) */
.lead-form__errors {
    display: none;
    background: #fdecea;
    border: 1px solid #f5c6cb;
    color: #b02a37;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 600;
}

.lead-form__errors p {
    margin: 0;
}

/* highlight invalid fields */
.lead-form .gf-field-wrapper.gf-field-error input,
.lead-form .gf-field-wrapper.gf-field-error select,
.lead-form .gf-field-wrapper.gf-field-error textarea {
    border-color: #d33;
}

.lead-form .gf-form-fields-wrapper,
.lead-form__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}

/* Let grid items shrink below their content width so a long file name (or any
   long content) truncates instead of widening the column and breaking layout. */
.lead-form .gf-field-wrapper {
    min-width: 0;
}

/* textarea spans both columns; all other fields (incl. uploads) stay in the
   2-column grid and collapse to a single column on mobile (see media query). */
.lead-form .gf-field-textarea {
    grid-column: 1 / -1;
}

/* Checkbox fields (e.g. terms & conditions): full width, checkbox inline to the
   left of the label text, aligned to the first line. */
.lead-form .gf-field-checkbox {
    grid-column: 1 / -1;
}

.lead-form .gf-field-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.lead-form .gf-field-checkbox input[type="checkbox"] {
    width: auto;
    margin: 3px 0 0;
    flex-shrink: 0;
}

/* Reset richeditor wrapping (<p>) so the text aligns next to the checkbox. */
.lead-form .gf-field-checkbox label p {
    margin: 0;
}

/* Radio and checkbox-list groups (markup: gromitForms/fields/_radio.htm and
   _checkbox_list.htm). The theme's global `input { display: block; padding:
   10px; margin: 20px 0 }` reset in main.css applies to radios and checkboxes
   too, so every control has to be laid out explicitly: inline to the left of
   its own text, options stacked with even spacing. */
.lead-form .gf-field-radio .gf-options,
.lead-form .gf-field-checkbox-list .gf-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lead-form .gf-field-radio .gf-option,
.lead-form .gf-field-checkbox-list .gf-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    cursor: pointer;
}

.lead-form .gf-field-radio .gf-option__input,
.lead-form .gf-field-checkbox-list .gf-option__input {
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    accent-color: #1b4f8a;
    cursor: pointer;
}

/* Opt out of the wrapper-level `span { display: block; margin-bottom: 6px }`
   rule above, which would push the option text below its own control. */
.lead-form .gf-field-radio .gf-option__text,
.lead-form .gf-field-checkbox-list .gf-option__text {
    display: inline;
    margin: 0;
    line-height: 1.3;
}

.lead-form label {
    display: block;
    width: 100%;
}

.lead-form .gf-field-wrapper span {
    display: block;
    margin-bottom: 6px;
    color: #333;
}

.lead-form input[type="text"],
.lead-form input[type="email"],
.lead-form input[type="number"],
.lead-form select,
.lead-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #cfd6dd;
    border-radius: 24px;
    font: inherit;
    background: #fff;
}

.lead-form textarea {
    border-radius: 14px;
    min-height: 120px;
    resize: vertical;
}

/* Custom file input: the native "Choose File / No file chosen" strings are
   browser-rendered and can't be translated, so the native input is visually
   hidden and replaced by a translatable button + status text (markup in
   gromitForms/fields/_upload.htm; status updated by floating-buttons.js). */
.lead-form .gf-field-upload .gf-file {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 4px 0;
    cursor: pointer;
}

.lead-form .gf-field-upload .gf-file__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    opacity: 0;
}

.lead-form .gf-field-upload .gf-file__btn {
    display: inline-block;
    flex-shrink: 0;
    margin: 0;
    padding: 8px 18px;
    border-radius: 20px;
    background: #1b4f8a;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    transition: background .15s ease;
}

.lead-form .gf-field-upload .gf-file:hover .gf-file__btn {
    background: #163f6f;
}

.lead-form .gf-field-upload .gf-file__name {
    display: inline-block;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #666;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Accumulated files list (multi-file) with a per-file remove button. */
.lead-form .gf-field-upload .gf-file__list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lead-form .gf-field-upload .gf-file__item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lead-form .gf-field-upload .gf-file__item-name {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #444;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lead-form .gf-field-upload .gf-file__remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #e6e6e6;
    color: #555;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.lead-form .gf-field-upload .gf-file__remove:hover {
    background: #d33;
    color: #fff;
}

.lead-form .gf-field-validation-message {
    color: #d33;
    font-size: 12px;
    margin-top: 4px;
}

.lead-form__submit {
    margin-top: 22px;
    background: #1b4f8a;
    color: #fff;
    border: none;
    border-radius: 26px;
    padding: 14px 40px;
    font-weight: 700;
    cursor: pointer;
}

.lead-form__submit:hover { background: #163f6f; }

/* The disabled state must LOOK disabled, or users click again because nothing
   changed and report that the lock does not work. :disabled:hover is required
   as well -- without it the :hover rule above still repaints the dead button. */
.lead-form__submit:disabled,
.lead-form__submit:disabled:hover {
    background: #9aa5b1;
    color: #e8ecf0;
    cursor: progress;
}

@media (max-width: 640px) {
    .lead-form .gf-form-fields-wrapper,
    .lead-form__fields { grid-template-columns: 1fr; }
    .lead-modal__dialog { padding: 26px 18px; }
}

/* injected download link in the success view (centered under the message) */
.lead-form__download {
    display: block;
    width: fit-content;
    margin-inline: auto;
    text-decoration: none;
    text-align: center;
}
.lead-form__download:hover { color: #fff; }

/* ============================================================
   Standalone lead pages (/quiero-ser-cliente, /descargar-catalogo)
   The shared _lead-form partial renders here without the modal
   shell, so it needs its own width constraint and spacing.
   ============================================================ */
.lead-page {
    /* Only the "form not available" fallback on the lead routes still uses this;
       the normal case renders the modal shell instead. margin-top clears the
       fixed header, which the modal (position: fixed) does not need. */
    margin-top: 7.4em;
    padding: 40px 0 80px;
}

.lead-page .lead-form__body {
    max-width: 620px;
}

.lead-page__empty {
    font-size: 20px;
    color: #2e2e2e;
}