/* Contacts page (pages/contactos.php): hero tweaks, general contacts + form (contact-split block),
   offices and map (office-map block). Measured from the contacts page print (1920 design; content
   placed on the 1440 header grid); phones and tablets (390 design) in the base rules, desktop under
   992px. The shared blocks on the page (page hero, option cards, notice and CTA banners) are styled
   in css/ep4.css. */

/* ==========================================================================
   Hero — sentence-case buttons, a larger two-line title
   ========================================================================== */

.ct-page .page-hero__actions .btn-design,
.ct-page .page-hero__actions .btn-outline-design {
    min-width: 0;
    min-height: 48px;
    padding: 0 22px;
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
}

/* "Pedir apoio": outline only, the hero shows through */
.ct-page .page-hero__actions .btn-outline-design {
    background: transparent;
}

@media only screen and (max-width: 575px) {
    .ct-page .page-hero__actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .ct-page .page-hero__actions .btn-design {
        width: 100%;
    }
}

@media only screen and (min-width: 992px) {
    .ct-page .page-hero__title {
        max-width: none;
        margin-bottom: 19px;
        font-size: clamp(40px, 3.85vw, 74px);
        line-height: 1.14;
    }

    .ct-page .page-hero__lead {
        max-width: 21em;
        margin-bottom: 34px;
        font-size: clamp(17px, 1.2vw, 23px);
        line-height: 1.57;
    }

    .ct-page .page-hero__actions {
        gap: 15px;
    }

    .ct-page .page-hero__actions .btn-design,
    .ct-page .page-hero__actions .btn-outline-design {
        min-height: 54px;
        font-size: 16px;
    }

    .ct-page .page-hero__actions .btn-design {
        padding: 0 30px;
    }

    .ct-page .page-hero__actions .btn-outline-design {
        padding: 0 26px;
    }
}


/* ==========================================================================
   General contacts + form (pages/blocks/contact-split.inc.php)
   Desktop: the contacts column (466 at 1320) beside the form card (814), 42 apart.
   Phones: the form first, then the contacts; the office photo is left out.
   ========================================================================== */

.contact-split {
    padding: 48px 0 56px;
    background: #F5F8FC;
}

.contact-split__inner {
    display: flex;
    flex-direction: column-reverse;
    gap: 40px;
}

.contact-split__title {
    margin: 0 0 10px;
    color: #102046;
    font-family: 'Proxima Nova Bold';
    font-size: 24px;
    line-height: 1.25;
}

.contact-split__lead,
.contact-split__form-lead {
    margin: 0;
    color: #6B7280;
    font-family: 'ProximaNova-Regular';
    font-size: 15px;
    line-height: 1.6;
}

.contact-split__channels {
    display: grid;
    gap: 14px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

/* sizes in the plain selector, so the desktop padding still applies on hover */
.contact-channel {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1px solid #EDF1F6;
    border-radius: 16px;
    background: #fff;
    transition: border-color .2s ease;
}

.contact-channel,
.contact-channel:hover,
.contact-channel:focus-visible {
    color: #102046;
    text-decoration: none;
}

.contact-channel:hover,
.contact-channel:focus-visible {
    border-color: #BFD8FB;
}

.contact-channel__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #3B90FF;
    color: #fff;
}

/* Icons: sprite symbols drawn on 24 units, so a 2px line is stroke-width 48 / size */
.contact-channel__icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.4;
}

.contact-channel__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.contact-channel__label,
.contact-channel__note {
    color: #6B7280;
    font-family: 'ProximaNova-Regular';
    font-size: 12px;
    line-height: 18px;
}

.contact-channel__note {
    color: #9CA3AF;
}

.contact-channel__value {
    color: #102046;
    font-family: 'Proxima Nova Bold';
    font-size: 19px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* Phones: no illustration */
.contact-split__image {
    display: none;
}

.contact-split__form {
    scroll-margin-top: 90px;
    padding: 28px 22px 30px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 40px rgba(16, 32, 70, .05);
}

.contact-split__form-title {
    margin: 0 0 10px;
    color: #102046;
    font-family: 'Proxima Nova Bold';
    font-size: 26px;
    line-height: 1.2;
}

.contact-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-top: 26px;
}

.contact-form__row {
    display: grid;
    gap: 18px;
}

.contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* labels, inputs, the subject select and error messages: "Design form fields" in css/ep4.css */

/* intl-tel-input wraps the phone field; keep it full width */
.contact-form .iti {
    width: 100%;
}

.contact-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: stretch;
    gap: 10px;
    min-height: 52px;
    margin-top: 6px;
    padding: 0 28px;
    border: 0;
    border-radius: 10px;
    background: #3B90FF;
    color: #fff;
    font-family: 'FontsFree-Net-Proxima-Nova-Sbold';
    font-size: 16px;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .2s ease;
}

.contact-form__submit:hover,
.contact-form__submit:focus-visible {
    background: #1F7BF2;
}

.contact-form__submit:focus-visible {
    outline: 3px solid rgba(59, 144, 255, .4);
    outline-offset: 3px;
}

.contact-form__submit svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.4;
}

/* reCAPTCHA above the button on phones; beside it (button first) once there is room */
.contact-form__actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* "Confirme que não é um robô." (js/form-design.js): a line of its own under the widget */
.contact-form__actions .field-error-design {
    flex-basis: 100%;
    margin-top: -8px;
}

/* Google's widget is a fixed 304 x 78: on narrow phones it is scaled to the form's width
   (286px at 390, 271px at 375) so it doesn't push the form wider */
@media only screen and (max-width: 400px) {
    .contact-form .g-recaptcha {
        height: 74px;
        transform: scale(.94);
        transform-origin: 0 0;
    }
}

@media only screen and (max-width: 380px) {
    .contact-form .g-recaptcha {
        height: 70px;
        transform: scale(.89);
    }
}

@media only screen and (min-width: 576px) {
    .contact-form__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .contact-form__actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

}

@media only screen and (min-width: 992px) {
    .contact-split {
        padding: 117px 0 108px;
    }

    /* the contacts column ends after its cards; the form card is taller */
    .contact-split__inner {
        display: grid;
        grid-template-columns: minmax(0, 466fr) minmax(0, 814fr);
        align-items: start;
        gap: 42px;
    }

    .contact-split__info {
        padding-top: 4px;
    }

    .contact-split__title {
        margin-bottom: 10px;
        font-size: clamp(26px, 1.72vw, 33px);
    }

    .contact-split__lead,
    .contact-split__form-lead {
        font-size: 18px;
        line-height: 27px;
    }

    .contact-split__channels {
        gap: 22px;
        margin-top: 32px;
    }

    .contact-channel {
        gap: 21px;
        padding: 31px 30px;
    }

    .contact-channel__icon {
        width: 54px;
        height: 54px;
    }

    .contact-channel__icon svg {
        width: 24px;
        height: 24px;
        stroke-width: 2;
    }

    .contact-channel__label,
    .contact-channel__note {
        font-size: 13px;
    }

    .contact-channel__value {
        font-size: 24px;
        line-height: 30px;
    }

    /* the illustration between the lead and the cards, full column width (its
       rounded corners are in the image) */
    .contact-split__image {
        display: block;
        width: 100%;
        height: auto;
        margin-top: 28px;
    }

    .contact-split__image + .contact-split__channels {
        margin-top: 22px;
    }

    .contact-split__form {
        padding: 56px 55px 66px;
        border-radius: 24px;
    }

    .contact-split__form-title {
        margin-bottom: 13px;
        font-size: clamp(30px, 2.03vw, 39px);
    }

    .contact-form {
        gap: 22px;
        margin-top: 36px;
    }

    .contact-form__row {
        gap: 24px;
    }

    .contact-form__actions {
        margin-top: 15px;
    }

    .contact-form__submit {
        min-width: 226px;
        min-height: 60px;
        margin-top: 0;
    }
}


/* ==========================================================================
   Offices and map (pages/blocks/office-map.inc.php)
   Desktop: the office cards (460 at 1320) beside the map (834), 30 apart, the
   cards stretched to the map's height. Phones: the map first, then the cards.
   Map overlay sizes are in the base map's units (752 wide): cqw keeps the
   labels in step with the map, with floors so they stay readable on phones.
   ========================================================================== */

.office-map {
    padding: 56px 0 48px;
    background: #fff;
}

.office-map__title {
    margin: 0 0 10px;
    color: #102046;
    font-family: 'Proxima Nova Bold';
    font-size: 28px;
    line-height: 1.2;
}

.office-map__lead {
    margin: 0;
    color: #6B7280;
    font-family: 'ProximaNova-Regular';
    font-size: 15px;
    line-height: 1.6;
}

.office-map__layout {
    display: flex;
    flex-direction: column-reverse;
    gap: 24px;
    margin-top: 26px;
}

.office-map__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.office-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    padding: 20px;
    border: 1px solid #E5EAF0;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

.office-card:hover {
    border-color: #BFD8FB;
}

.office-card.is-active {
    border-color: #8DB9F5;
    background: #F3F8FF;
}

.office-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #EAF2FE;
    color: #3B90FF;
    transition: background-color .2s ease, color .2s ease;
}

.office-card.is-active .office-card__icon {
    background: #3B90FF;
    color: #fff;
}

.office-card__icon svg {
    width: 17px;
    height: 17px;
    stroke-width: 1.9;
}

.office-card__title {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
}

.office-card__select {
    padding: 0;
    border: 0;
    background: none;
    color: #102046;
    font-family: 'Proxima Nova Bold';
    font-size: inherit;
    line-height: inherit;
    text-align: left;
    cursor: pointer;
}

.office-card__select:focus-visible {
    border-radius: 4px;
    outline: 3px solid rgba(59, 144, 255, .4);
    outline-offset: 3px;
}

.office-card__type {
    color: #6B7280;
    font-family: 'ProximaNova-Regular';
}

.office-card__type span {
    color: #C4CAD4;
}

.office-card__address {
    grid-column: 1 / -1;
    margin: 12px 0 0;
    color: #4B5563;
    font-family: 'ProximaNova-Regular';
    font-size: 14px;
    font-style: normal;
    line-height: 22px;
}

.office-card__directions,
.office-card__directions:hover,
.office-card__directions:focus-visible {
    display: inline-flex;
    grid-column: 1 / -1;
    justify-self: start;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: #2F7FE8;
    font-family: 'FontsFree-Net-Proxima-Nova-Sbold';
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
}

.office-card__directions:hover,
.office-card__directions:focus-visible {
    text-decoration: underline;
}

.office-card__directions svg {
    flex: none;
    width: 16px;
    height: 16px;
    color: #176AD7;
    stroke-width: 3;
}

/* Map */
.office-map__canvas {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 752 / 599;
    overflow: hidden;
    border-radius: 20px;
    /* the sea: the base map (images/contactos/mapa.svg) has none of its own */
    background: linear-gradient(126.87deg, #EEF5FE 0%, #DCE9FA 71.43%);
}

.office-map__img,
.office-map__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.office-map__img {
    display: block;
    object-fit: cover;
}

.office-map__overlay {
    overflow: visible;
    pointer-events: none;
}

.office-map__line {
    fill: none;
    stroke: #5C9BF5;
    stroke-width: 1.3;
    stroke-dasharray: 5 5;
    opacity: .45;
    transition: opacity .3s ease, stroke-width .3s ease;
}

.office-map__line.is-active {
    stroke: #3B8DFB;
    stroke-width: 2;
    stroke-dasharray: 7 6;
    opacity: .9;
}

.office-map__ring {
    fill: none;
    stroke: #8DB8F5;
    stroke-width: 1.2;
    stroke-dasharray: 3 4;
    opacity: 0;
    transition: opacity .3s ease;
}

/* Every dot (measured from the design's map states, in map units): a blue core (4) in a white
   ring (to 6.5) over two halos, the inner one to r 14 (27% blue where they overlap), the outer
   one to r 23.5 (11%), both with soft edges (the -soft filter). The active office's halos grow
   to r 24 and 39.5 (the outer one fainter, 8%), its core to 7.8 in a ring to 11.5, and the dashed
   ring (r 52) appears. The halos grow by radius, not by scaling, so the blur keeps its size. */
.office-map__point {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .3s ease, stroke-width .3s ease;
}

.office-map__halo {
    fill: #3B8DFB;
    opacity: .18;
    r: 14px;
}

.office-map__halo--outer {
    opacity: .11;
    r: 23.5px;
}

.office-map__point {
    fill: #3B8DFB;
    stroke: #fff;
    stroke-width: 2.5;
}

.office-map__dot.is-active .office-map__ring {
    opacity: 1;
}

.office-map__halo {
    transition: r .3s ease, opacity .3s ease;
}

.office-map__dot.is-active .office-map__halo {
    opacity: .2;
    r: 24px;
}

.office-map__dot.is-active .office-map__halo--outer {
    opacity: .08;
    r: 39.5px;
}

.office-map__dot.is-active .office-map__point {
    stroke-width: 2; /* 3.7 once scaled */
    transform: scale(1.84);
}

/* names printed on the map */
.office-map__place {
    position: absolute;
    color: #8E9AAD;
    font-family: 'FontsFree-Net-Proxima-Nova-Sbold';
    font-size: max(7px, 1.46cqw);
    line-height: 1.4;
    letter-spacing: .2em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.office-map__place--home {
    color: #3E7BDA;
}

.office-map__place--sea {
    color: #93A3BA;
}

/* a larger click target over each dot */
.office-map__hit {
    position: absolute;
    width: 9cqw;
    height: 9cqw;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

/* labels: white while inactive, a dark directions link while active; 'left' labels grow
   leftwards from their anchor (right edge), 'right' ones rightwards (left edge) */
.office-map__label {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .55em;
    height: 2.5em;
    padding: 0 1.17em;
    border: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(16, 32, 70, .12);
    color: #102046;
    font-family: 'Proxima Nova Bold';
    font-size: max(8px, 1.6cqw);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity .25s ease;
}

.office-map__label--right {
    transform: translate(0, -50%);
}

.office-map__label--left {
    transform: translate(-100%, -50%);
}

.office-map__label.is-active {
    opacity: 0;
    pointer-events: none;
}

.office-map__label--active,
.office-map__label--active:hover,
.office-map__label--active:focus-visible {
    height: 2.43em;
    padding: 0 1.07em;
    background: #0E1F4D;
    box-shadow: 0 6px 16px rgba(14, 31, 77, .25);
    color: #fff;
    font-size: max(9px, 1.86cqw);
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
}

.office-map__label--active span {
    color: #9FB0CF;
    font-family: 'ProximaNova-Regular';
    font-size: .93em;
}

.office-map__label--active svg {
    width: .8em;
    height: .8em;
    color: #6EA8FF;
    stroke-width: 2.6;
}

.office-map__label--active.is-active {
    opacity: 1;
    pointer-events: auto;
}

@media only screen and (min-width: 992px) {
    .office-map {
        padding: 120px 0 115px;
    }

    .office-map__title {
        margin-bottom: 9px;
        font-size: clamp(32px, 2.4vw, 46px);
    }

    .office-map__lead {
        font-size: 19px;
        line-height: 1.5;
    }

    .office-map__layout {
        display: grid;
        grid-template-columns: minmax(0, 460fr) minmax(0, 834fr);
        align-items: start;
        gap: 30px;
        margin-top: 45px;
    }

    .office-map__list {
        align-self: stretch;
        gap: 22px;
    }

    .office-card {
        flex: 1;
        align-content: start;
        column-gap: 12px;
        padding: 26px 24px 28px;
    }

    .office-card__icon {
        width: 40px;
        height: 40px;
    }

    .office-card__icon svg {
        width: 19px;
        height: 19px;
    }

    .office-card__title {
        font-size: 19px;
    }

    .office-card__address {
        margin-top: 12px;
        font-size: 15px;
        line-height: 24px;
    }

    .office-card__directions {
        margin-top: 8px;
    }

    .office-map__canvas {
        border-radius: 24px;
    }
}