/* 10-chrome.css */
/* 10-chrome.css: the parts on every page (header, footer, the chat company's call bar) and the
   site-wide heading rules. Breakpoints are Elementor's: phone <=767px, tablet 768-1024px, desktop >=1025px.
   Header ids are listed in pairs: Spanish header 29 first, English header 63 second. The four footers
   (64 and 241 Spanish, 72 and 74 English) share the same element ids, so one selector covers all of them. */

/* Every paragraph: never leave one word alone on the last line. Firefox ignores it and wraps as before. */
p {
  text-wrap: pretty;
}

/* ================================================================== HEADER */

/* Tablet: the logo shrank to about 145px wide inside a 95px-tall navy bar. Give its column more room
   and cap it near the desktop size (230px). */
@media (min-width: 768px) and (max-width: 1024px) {
  body .elementor-location-header .elementor-element.elementor-element-8324b4f,
  body .elementor-location-header .elementor-element.elementor-element-af76225 {
    --width: 34%;
  }
  body .elementor-location-header .elementor-element.elementor-element-8605b39,
  body .elementor-location-header .elementor-element.elementor-element-6d97aff {
    --width: 66%;
  }
  body .elementor-location-header .elementor-element-f60046b img,
  body .elementor-location-header .elementor-element-3d423f1 img {
    width: 100%;
    max-width: 240px;
  }
}

/* All sizes: the ENGLISH / ESPAÑOL link was a 42px (desktop, tablet) or 32px (phone) tap target with
   no hover state. Make the link itself 44px tall and show hover by colour. */
body .elementor-location-header .elementor-element.elementor-element-a33b92f > .elementor-widget-container,
body .elementor-location-header .elementor-element.elementor-element-5e4ab21 > .elementor-widget-container,
body .elementor-location-header .elementor-element.elementor-element-008a281 > .elementor-widget-container,
body .elementor-location-header .elementor-element.elementor-element-da7b45b > .elementor-widget-container {
  padding: 0;
}
body .elementor-location-header .elementor-element-a33b92f .elementor-heading-title a,
body .elementor-location-header .elementor-element-5e4ab21 .elementor-heading-title a,
body .elementor-location-header .elementor-element-008a281 .elementor-heading-title a,
body .elementor-location-header .elementor-element-da7b45b .elementor-heading-title a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  text-decoration: none;
  transition: color 0.2s;
  /* Its Roboto never loads (the live site's font link is broken), so it showed in Arial beside the
     Titillium phone number. */
  font-family: "Titillium Web", sans-serif;
  font-weight: 700;
}
body .elementor-location-header .elementor-element-a33b92f .elementor-heading-title a:hover,
body .elementor-location-header .elementor-element-a33b92f .elementor-heading-title a:focus-visible,
body .elementor-location-header .elementor-element-5e4ab21 .elementor-heading-title a:hover,
body .elementor-location-header .elementor-element-5e4ab21 .elementor-heading-title a:focus-visible {
  color: var(--e-global-color-secondary);
}
body .elementor-location-header .elementor-element-008a281 .elementor-heading-title a:hover,
body .elementor-location-header .elementor-element-008a281 .elementor-heading-title a:focus-visible,
body .elementor-location-header .elementor-element-da7b45b .elementor-heading-title a:hover,
body .elementor-location-header .elementor-element-da7b45b .elementor-heading-title a:focus-visible {
  color: var(--e-global-color-accent);
}

/* Phone: the white block under the navy bar had uneven gaps, black "CONSULTA" text next to navy
   text, and the full-width phone button had rounded corners that left white specks at the screen
   edges. Even spacing, navy text, square corners like the site's other yellow buttons. */
@media (max-width: 767px) {
  body .elementor-location-header .elementor-element.elementor-element-cb89925,
  body .elementor-location-header .elementor-element.elementor-element-00c65e4 {
    --padding-top: 4px;
    --padding-bottom: 0px;
    --row-gap: 0px;
  }
  body .elementor-location-header .elementor-element.elementor-element-eb5e3c0,
  body .elementor-location-header .elementor-element.elementor-element-b2cb3bd {
    color: var(--e-global-color-primary);
  }
  body .elementor-location-header .elementor-element.elementor-element-eb5e3c0 > .elementor-widget-container,
  body .elementor-location-header .elementor-element.elementor-element-b2cb3bd > .elementor-widget-container {
    padding-bottom: 12px;
  }
  body .elementor-location-header .elementor-element.elementor-element-811f825 > .elementor-widget-container,
  body .elementor-location-header .elementor-element.elementor-element-989d5c5 > .elementor-widget-container {
    padding: 0;
  }
  body .elementor-location-header .elementor-element.elementor-element-811f825 .elementor-button,
  body .elementor-location-header .elementor-element.elementor-element-989d5c5 .elementor-button {
    border-radius: 0;
  }
}

/* All sizes: the yellow/orange strip under the header is a 1024x14 image forced to 100% x 28px, so
   its centre notch was stretched out of shape (about 5x on phones, 2.7x on tablets). Crop it instead. */
body img[src*="Group-3125303"] {
  object-fit: cover;
  object-position: center;
}

/* Phone: the 28px strip sat flush against the yellow phone button, so the two yellows merged into
   one block. Thinner strip, with a white gap that separates it from the button. */
@media (max-width: 767px) {
  body .elementor-146 .elementor-element.elementor-element-0dec6de img,
  body .elementor-779 .elementor-element.elementor-element-3569bc7 img,
  body .elementor-1207 .elementor-element.elementor-element-0484540 img,
  body .elementor-1332 .elementor-element.elementor-element-0484540 img,
  body .elementor-203 .elementor-element.elementor-element-ee0d22f img,
  body .elementor-189 .elementor-element.elementor-element-ee0d22f img {
    height: 12px;
  }
  body .elementor-146 .elementor-element.elementor-element-0828cd3,
  body .elementor-779 .elementor-element.elementor-element-32f0c29,
  body .elementor-1207 .elementor-element.elementor-element-a4157af,
  body .elementor-1332 .elementor-element.elementor-element-a4157af,
  body .elementor-203 .elementor-element.elementor-element-8e285bf,
  body .elementor-189 .elementor-element.elementor-element-8e285bf {
    --margin-top: 8px;
  }
}

/* Phone: the hamburger was a 33px tap target, and the opened menu started 15px inside the navy bar.
   44px button; the menu now opens exactly at the bar's bottom edge. */
@media (max-width: 767px) {
  body .elementor-location-header .elementor-element.elementor-element-01661d1 .elementor-menu-toggle,
  body .elementor-location-header .elementor-element.elementor-element-7dfbafd .elementor-menu-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 26px;
  }
  body .elementor-location-header .elementor-element.elementor-element-01661d1 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container,
  body .elementor-location-header .elementor-element.elementor-element-7dfbafd nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    margin-top: 20px;
  }
}

/* Tablet: the menu button was a 33px-tall bar between 20px white bands. 48px bar, tighter bands, and
   the opened menu starts at the bottom of the band. */
@media (min-width: 768px) and (max-width: 1024px) {
  body .elementor-location-header .elementor-element.elementor-element-13a190f,
  body .elementor-location-header .elementor-element.elementor-element-916d784 {
    --padding-top: 12px;
    --padding-bottom: 12px;
  }
  body .elementor-location-header .elementor-element.elementor-element-95a4adc .elementor-menu-toggle,
  body .elementor-location-header .elementor-element.elementor-element-d0c6b32 .elementor-menu-toggle {
    min-height: 48px;
    padding: 0;
    font-size: 26px;
  }
  body .elementor-location-header .elementor-element.elementor-element-95a4adc nav.elementor-nav-menu--dropdown.elementor-nav-menu__container,
  body .elementor-location-header .elementor-element.elementor-element-d0c6b32 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    margin-top: 12px;
  }
}

/* Phone and tablet, opened menu: 13px items and 11px sub-items in 40px rows, grey sub-item text on
   the tablet, no divider between rows, sub-lists pushed off-centre by a transparent left border, and
   no edge against the page below. Readable sizes, 48px rows, navy text, grey sub-lists, a shadow. */
@media (max-width: 1024px) {
  body .elementor-location-header nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    font-size: 16px;
    box-shadow: 0 16px 24px -12px rgba(0, 36, 83, 0.35);
  }
  body .elementor-location-header nav.elementor-nav-menu__container a.elementor-item,
  body .elementor-location-header nav.elementor-nav-menu__container a.elementor-sub-item {
    min-height: 48px;
    padding: 12px 20px;
    line-height: 24px;
    color: var(--e-global-color-primary);
    border-left: 0;
    border-inline-start: 0;
  }
  body .elementor-location-header nav.elementor-nav-menu__container :is(a:hover, a:focus, a.highlighted, a.elementor-item-active) {
    color: var(--e-global-color-dac009d);
  }
  body .elementor-location-header nav.elementor-nav-menu__container .elementor-sub-item {
    font-size: 15px;
  }
  body .elementor-location-header nav.elementor-nav-menu__container ul.sub-menu {
    background-color: var(--e-global-color-d2621de);
  }
  body .elementor-location-header nav.elementor-nav-menu__container li + li {
    box-shadow: inset 0 1px 0 var(--e-global-color-3a8a1ad);
  }
  body .elementor-location-header nav.elementor-nav-menu__container .sub-arrow i {
    transition: transform 0.2s;
  }
  body .elementor-location-header nav.elementor-nav-menu__container a.highlighted .sub-arrow i {
    transform: rotate(180deg);
    /* The open item turns navy, and its arrow was navy too, so it vanished. */
    color: var(--e-global-color-accent);
  }
}

/* Phone: items that open a list had no arrow (the phone menu's icon is empty), so nothing told
   them apart from plain links. Same orange caret as the desktop menu; it flips when the list is open. */
@media (max-width: 767px) {
  body .elementor-location-header .elementor-element-01661d1 .sub-arrow::after,
  body .elementor-location-header .elementor-element-7dfbafd .sub-arrow::after {
    content: "\f0d7";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
    line-height: 1;
    color: var(--e-global-color-accent);
    transition: transform 0.2s;
  }
  body .elementor-location-header .elementor-element-01661d1 a.highlighted .sub-arrow::after,
  body .elementor-location-header .elementor-element-7dfbafd a.highlighted .sub-arrow::after {
    transform: rotate(180deg);
  }
}

/* Desktop: hover lists showed 13px grey text with no edge, so a white list over a white section had
   no outline. 15px navy text like the top menu, white on the navy hover, and a soft shadow. */
@media (min-width: 1025px) {
  body .elementor-location-header .elementor-nav-menu--main ul.sub-menu {
    box-shadow: 0 12px 24px rgba(0, 36, 83, 0.18);
  }
  body .elementor-location-header .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item {
    font-size: 15px;
    color: var(--e-global-color-primary);
  }
  body .elementor-location-header .elementor-nav-menu--main ul.sub-menu :is(a:hover, a:focus, a.highlighted, a.elementor-item-active) {
    color: var(--e-global-color-dac009d);
  }
}

/* ================================================================== FOOTER */

/* All sizes: the terms / privacy link was underlined (inline style in the page). Owner's rule: no
   underlines. Shown as a link by weight, and yellow on hover like the email and phone links. */
body .elementor-location-footer .elementor-element-b1de82d a,
body .elementor-location-footer .elementor-element-b1de82d a span {
  text-decoration: none !important;
}
body .elementor-location-footer .elementor-element.elementor-element-b1de82d a {
  font-weight: 700;
  transition: color 0.2s;
}
body .elementor-location-footer .elementor-element.elementor-element-b1de82d a:hover,
body .elementor-location-footer .elementor-element.elementor-element-b1de82d a:focus-visible {
  color: var(--e-global-color-secondary);
}

/* All sizes: the footer phone number was yellow on some pages (home) and white on the rest. White
   everywhere, yellow on hover, matching the email above it. */
body .elementor-location-footer .elementor-element.elementor-element-3cdda4c a {
  color: var(--e-global-color-dac009d);
}
body .elementor-location-footer .elementor-element.elementor-element-3cdda4c a:hover,
body .elementor-location-footer .elementor-element.elementor-element-3cdda4c a:focus-visible {
  color: var(--e-global-color-secondary);
}

/* All sizes: the four office boxes had four different widths (65-90%), so lines wrapped at random
   points, and boxes without a note got an extra 14px gap below. Same width, same gaps. */
body .elementor-location-footer .elementor-widget-icon-box.offices-circle-dot {
  --container-widget-width: 100%;
  width: 100%;
  max-width: 100%;
}
body .elementor-location-footer .offices-circle-dot .elementor-icon-box-title {
  margin: 0;
}
body .elementor-location-footer .offices-circle-dot .elementor-icon-box-description {
  margin-top: 6px;
}
body .elementor-location-footer .elementor-element.elementor-element-45dfa6c {
  --row-gap: 16px;
}
body .elementor-location-footer .elementor-element.elementor-element-45dfa6c > .elementor-widget {
  margin-block-end: 0;
}
body .elementor-location-footer .elementor-element.elementor-element-69e7bf1 p {
  margin: 0;
}

/* All sizes: the copyright line and the terms link carried paragraph margins that pushed them out
   of line with each other (16px apart on tablets) and spread them 40px apart on phones. */
body .elementor-location-footer .elementor-element.elementor-element-8b427e7 p {
  margin: 0;
}

/* Tablet and desktop: everything in the left column starts at its left edge except the social
   icons, which were centred and sat about 15px further in. Line them up. */
@media (min-width: 768px) {
  body .elementor-location-footer .elementor-element.elementor-element-d99a30f .elementor-widget-container {
    text-align: start;
  }
}

/* Phone and tablet: the social icons were 24-26px tap targets. 34px rings with 44px tap areas
   (the rings have no fill, so the extra padding is invisible). */
@media (max-width: 1024px) {
  body .elementor-location-footer .elementor-element.elementor-element-d99a30f {
    --icon-size: 34px;
    --grid-column-gap: 4px;
  }
  body .elementor-location-footer .elementor-element.elementor-element-d99a30f .elementor-social-icon {
    --icon-padding: 5px;
  }
}

/* Desktop: 100px above the logo against 50px below the offices made the block sit low between its
   two divider lines. Equal space above and below. */
@media (min-width: 1025px) {
  body .elementor-location-footer .elementor-element.elementor-element-c8af9a8 {
    --padding-top: 64px;
    --padding-bottom: 64px;
  }
}

/* Tablet: the left column (30%) was so narrow that addresses broke into 4 lines and the logo shrank
   to 190px. Wider left column. The copyright and the terms link sat at different heights: centre both. */
@media (min-width: 768px) and (max-width: 1024px) {
  body .elementor-location-footer .elementor-element.elementor-element-03af2dc {
    --width: 38%;
  }
  body .elementor-location-footer .elementor-element.elementor-element-dfcab3d {
    --width: 62%;
  }
  body .elementor-location-footer .elementor-element.elementor-element-8b427e7,
  body .elementor-location-footer .elementor-element.elementor-element-32ea94e {
    --align-items: center;
  }
  body .elementor-location-footer .elementor-element.elementor-element-b1de82d {
    --align-self: center;
  }
}

/* Phone: everything was centred except "OFICINAS" and the address list, which hugged the left edge
   with ragged widths. The 340px logo filled the width and read as off-centre, the email and phone
   links were 30px tap targets, and the gaps ranged from 20px to 53px. Centred heading, the address
   list as one centred block with left-aligned lines, a logo the size of the header's, 44px link
   targets, and a 16px rhythm. */
@media (max-width: 767px) {
  body .elementor-location-footer .elementor-element.elementor-element-c8af9a8 {
    --padding-top: 40px;
    --padding-bottom: 40px;
  }
  body .elementor-location-footer .elementor-element.elementor-element-03af2dc {
    --row-gap: 16px;
  }
  body .elementor-location-footer .elementor-element.elementor-element-03af2dc > .elementor-widget {
    margin-block-end: 0;
  }
  body .elementor-location-footer .elementor-element.elementor-element-641ce7f > .elementor-widget-container {
    margin: 0 0 8px;
  }
  body .elementor-location-footer .elementor-element-641ce7f img {
    max-width: 240px;
  }
  body .elementor-location-footer .elementor-element.elementor-element-d7c904b a,
  body .elementor-location-footer .elementor-element.elementor-element-3cdda4c a {
    display: inline-block;
    padding: 8px 0;
  }
  body .elementor-location-footer .elementor-element.elementor-element-45dfa6c {
    --width: 100%;
    max-width: 256px;
    --padding-top: 16px;
  }
  body .elementor-location-footer .elementor-element.elementor-element-69e7bf1 {
    text-align: center;
  }
  body .elementor-location-footer .elementor-element.elementor-element-033c5bb {
    margin-top: 16px;
  }
}

/* Spanish footer "Áreas que servimos" (built by server/html/areas.ts): the statewide line reads before
   the nine regions, county links look like the other footer links (bold, no underline, yellow on hover). */
body .elementor-location-footer .llh-areas-intro {
  margin: 12px 0 20px;
  color: var(--e-global-color-dac009d);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}
body .elementor-location-footer .llh-areas .elementor-icon-list-item a,
html:lang(es) .llh-hub-areas .elementor-icon-list-item a {
  text-decoration: none;
}
body .elementor-location-footer .llh-areas .elementor-icon-list-item a .elementor-icon-list-text,
html:lang(es) .llh-hub-areas .elementor-icon-list-item a .elementor-icon-list-text {
  font-weight: 700;
}
body .elementor-location-footer .llh-areas .elementor-icon-list-item a:hover .elementor-icon-list-text,
body .elementor-location-footer .llh-areas .elementor-icon-list-item a:focus-visible .elementor-icon-list-text,
html:lang(es) .llh-hub-areas .elementor-icon-list-item a:hover .elementor-icon-list-text,
html:lang(es) .llh-hub-areas .elementor-icon-list-item a:focus-visible .elementor-icon-list-text {
  color: var(--e-global-color-secondary);
}

/* Spanish areas hub /es/areas-servidas/: the same nine regions replace the office cards, on the cards'
   navy, with the footer rules above and below. */
html:lang(es) .llh-hub-areas {
  width: 100%;
  padding: 40px;
  background-color: var(--e-global-color-primary);
}

/* Tablet and desktop: the region names are longer than the old ones and wrapped to three lines at 22px
   in the 3-column grid, so the boxes had uneven heights. Smaller titles, every box two lines tall. */
@media (min-width: 768px) {
  body .elementor-location-footer .llh-areas .elementor-widget-n-accordion,
  html:lang(es) .llh-hub-areas .elementor-widget-n-accordion {
    --n-accordion-title-font-size: 17px;
  }
  body .elementor-location-footer .llh-areas .e-n-accordion-item-title-text,
  html:lang(es) .llh-hub-areas .e-n-accordion-item-title-text {
    line-height: 1.35;
  }
  body .elementor-location-footer .llh-areas .e-n-accordion-item-title,
  html:lang(es) .llh-hub-areas .e-n-accordion-item-title {
    min-height: 68px;
    align-items: center;
  }
}

/* Phone: the block used to be hidden here. Centred heading and line like the rest of the footer,
   48px dropdown rows and 40px county links for thumbs. */
@media (max-width: 767px) {
  body .elementor-location-footer .elementor-element.llh-areas {
    margin-top: 24px;
  }
  body .elementor-location-footer .llh-areas .elementor-heading-title,
  body .elementor-location-footer .llh-areas-intro {
    text-align: center;
  }
  body .elementor-location-footer .llh-areas-intro {
    font-size: 16px;
  }
  body .elementor-location-footer .llh-areas .e-n-accordion-item-title,
  html:lang(es) .llh-hub-areas .e-n-accordion-item-title {
    min-height: 48px;
    align-items: center;
  }
  body .elementor-location-footer .llh-areas .elementor-icon-list-item a,
  html:lang(es) .llh-hub-areas .elementor-icon-list-item a {
    display: inline-block;
    padding: 8px 0;
  }
  html:lang(es) .llh-hub-areas {
    padding: 24px 16px;
  }
}

/* ======================================================= CHAT COMPANY'S CALL BAR */

/* Phone: the call bar (fixed at the top after 50px of scroll) had a see-through white background,
   so page text showed above, below and between the buttons, plus Arial 22px text with icons touching
   it. Solid navy bar with a shadow, an 8px gap between two 44px yellow buttons, and the site's button
   type (Lato 700, uppercase, letter-spaced). The vendor's script fades the bar in and out by
   changing its display, so display is never set here. */
@media (max-width: 767px) {
  body #fd-callnowbutton {
    box-sizing: border-box;
    left: 0;
    right: 0;
    width: 100%;
    padding: 8px;
    background-color: var(--e-global-color-primary, #002453);
    box-shadow: 0 4px 12px rgba(0, 20, 50, 0.35);
    font-family: "Lato", Sans-serif;
  }
  body #fd-callnowbutton .fd_CallNow,
  body #fd-callnowbutton .fd_TextNow {
    box-sizing: border-box;
    width: calc(50% - 4px);
    min-height: 44px;
    margin: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 0;
    gap: 8px;
    font-family: "Lato", Sans-serif;
    font-size: clamp(13px, 3.7vw, 15px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
  }
  body #fd-callnowbutton .fd_TextNow {
    float: right;
  }
  body #fd-callnowbutton img {
    flex: none;
    width: 18px !important;
    height: 18px !important;
  }
  body #fd-callnowbutton a:focus-visible {
    outline: 2px solid var(--e-global-color-dac009d, #fff);
    outline-offset: 2px;
  }
  body #fd-callnowbutton a:active {
    transform: scale(0.98);
  }
}

/* Phones under 390px: "ENVÍE UN MENSAJE" ran to the button's right edge. Tighter letters and icon gap. */
@media (max-width: 389px) {
  body #fd-callnowbutton .fd_CallNow,
  body #fd-callnowbutton .fd_TextNow {
    gap: 6px;
    padding: 0 6px;
    letter-spacing: 0.3px;
  }
}

/* ============================================================ HEADINGS, SITE-WIDE */

/* Phone and tablet: a heading word wider than the screen (long ALL-CAPS Spanish words such as
   TRANSMISIONES or CONCESIONARIO) made the whole page scroll sideways. Let headings wrap inside
   the screen; only words of 12+ letters are hyphenated. */
@media (max-width: 1024px) {
  body .elementor-heading-title {
    overflow-wrap: break-word;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 12 5 5;
  }
}

/* Phones narrower than 402px: the big heading sizes are fixed px values (60/56/54/44/37px), so
   long words broke mid-word on 360px phones. Same sizes at 402px and up; they scale down below that. */
@media (max-width: 767px) {
  body.elementor-kit-6 {
    --e-global-typography-41f1715-font-size: clamp(40px, 14.93vw, 60px);
    --e-global-typography-41f1715-line-height: 1.42;
    --e-global-typography-733310a-font-size: clamp(36px, 13.94vw, 56px);
    --e-global-typography-733310a-line-height: 1.15;
    --e-global-typography-716881c-font-size: clamp(34px, 13.44vw, 54px);
    --e-global-typography-716881c-line-height: 1.19;
    --e-global-typography-dbf250a-font-size: clamp(30px, 10.95vw, 44px);
    --e-global-typography-dbf250a-line-height: 1.18;
    --e-global-typography-fede3ce-font-size: clamp(30px, 10.95vw, 44px);
    --e-global-typography-fede3ce-line-height: 1.18;
    --e-global-typography-242a10d-font-size: clamp(26px, 9.21vw, 37px);
    --e-global-typography-242a10d-line-height: 1.19;
  }
}

/* Phone: H2s typed in ALL CAPS used the 50-54px heading size, so one word could be wider than the
   screen (TRANSMISIONES, CONCESIONARIO, "DEMOSTRADOR"?) and each heading ran to 5-6 lines.
   Smaller size for these headings only, Spanish and English pages. The guide and claim pages get
   theirs from 35-guides-claims.css. */
@media (max-width: 767px) {
  body .elementor-1039 .elementor-element.elementor-element-e297b51 .elementor-heading-title,
  body .elementor-1065 .elementor-element.elementor-element-63ea4fc .elementor-heading-title,
  body .elementor-1074 .elementor-element.elementor-element-2dd1e4b .elementor-heading-title,
  body .elementor-1092 .elementor-element.elementor-element-63ea4fc .elementor-heading-title,
  body .elementor-975 .elementor-element.elementor-element-8a82722 .elementor-heading-title,
  body .elementor-1097 .elementor-element.elementor-element-e297b51 .elementor-heading-title,
  body .elementor-1097 .elementor-element.elementor-element-fb9fda7 .elementor-heading-title,
  body .elementor-1105 .elementor-element.elementor-element-e297b51 .elementor-heading-title,
  body .elementor-1105 .elementor-element.elementor-element-63ea4fc .elementor-heading-title,
  body .elementor-962 .elementor-element.elementor-element-e297b51 .elementor-heading-title,
  body .elementor-962 .elementor-element.elementor-element-b76ec60 .elementor-heading-title,
  body .elementor-986 .elementor-element.elementor-element-a76a7e6 .elementor-heading-title,
  body .elementor-980 .elementor-element.elementor-element-8a82722 .elementor-heading-title,
  body .elementor-991 .elementor-element.elementor-element-db713bb .elementor-heading-title,
  body .elementor-995 .elementor-element.elementor-element-f7a922d .elementor-heading-title,
  body .elementor-998 .elementor-element.elementor-element-63ea4fc .elementor-heading-title {
    font-size: clamp(30px, 10.4vw, 42px);
    line-height: 1.2;
  }
}

/* 20-home-team.css */
/* 20-home-team.css: page-body layout fixes for home, about, reviews, case results and team pages (ES + EN twins). */

/* Team cards everywhere (home, about, our-team, areas, contact): name and title sat left-aligned under the round photo, at every size. */
body .elementor .elementor-element.elementor-widget-image-box.elementor-position-top:has(a[href*="/nuestro-equipo/"], a[href*="/our-team/"]) .elementor-image-box-wrapper {
  text-align: center;
}

/* Testimonial sliders (home, contact, thank-you, reviews, team member pages): empty on the live site too, so a
   "what our clients say" heading sat over a blank band. Hide the block only while its slider is empty; each such
   block holds just that heading and the slider. */
body .e-con:has(> .elementor-widget .e-loop-nothing-found-message),
body .e-con:has(> .e-con-inner > .elementor-widget .e-loop-nothing-found-message) {
  display: none;
}

/* Team strip (home, about): on desktop it ran edge to edge, 130px wider than the heading and button above it; hold it to the content width. */
@media (min-width: 1025px) {
  body .elementor .elementor-element.elementor-element-1e4a8d2f {
    max-width: 1190px;
    margin-inline: auto;
  }
}

/* Spanish team strip (home, about, contact): 8 lawyers now instead of 5 and a button (server/html/team.ts).
   In one row the 8 shrank to 126px cards (88px on tablet), and phones stacked them one per row. Two centred
   rows of 4 at the size 5-across had (a fifth of the row less the 20px gaps); 40px between cards leaves no
   room for a fifth. 2 per row on phones. Only the strip that holds the added cards; the English one keeps 5. */
body .elementor .elementor-element.elementor-element-1e4a8d2f:has(img[alt="Deepak Devabose"]) {
  --flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  --row-gap: 32px;
  --column-gap: 40px;
  gap: 32px 40px;
}
body .elementor .elementor-element.elementor-element-1e4a8d2f:has(img[alt="Deepak Devabose"]) > .e-con {
  --width: calc((100% - 80px) / 5);
  flex: 0 0 calc((100% - 80px) / 5);
}
@media (max-width: 767px) {
  body .elementor .elementor-element.elementor-element-1e4a8d2f:has(img[alt="Deepak Devabose"]) > .e-con {
    --width: calc(50% - 20px);
    flex: 0 0 calc(50% - 20px);
  }
}

/* Team intro paragraph (home, about): fell back to Arial at 16px because its font (Roboto) never loads; use the site body style (Lato) like every other paragraph. */
body .elementor .elementor-element.elementor-element-81a2b20 {
  font-family: var(--e-global-typography-af38dbf-font-family), sans-serif;
  font-size: var(--e-global-typography-af38dbf-font-size);
  font-weight: var(--e-global-typography-af38dbf-font-weight);
  line-height: var(--e-global-typography-af38dbf-line-height);
  letter-spacing: var(--e-global-typography-af38dbf-letter-spacing);
}

/* Same paragraph on tablet: at body size a 50% column wraps to a narrow tower; give it a readable width. */
@media (min-width: 768px) and (max-width: 1024px) {
  body .elementor .e-con .elementor-element.elementor-element-81a2b20.elementor-widget {
    --container-widget-width: 100%;
    width: 100%;
    max-width: 680px;
  }
}

/* Same paragraph on desktop: match the width of the two-line heading above it. */
@media (min-width: 1025px) {
  body .elementor .e-con .elementor-element.elementor-element-81a2b20.elementor-widget {
    --container-widget-width: 100%;
    width: 100%;
    max-width: 760px;
  }
}

/* Home hero checklist: rendered in Arial (Roboto never loads); use the body font. */
body .elementor .elementor-element:is(.elementor-element-c9d6158, .elementor-element-f5ac28d) .elementor-icon-list-item > :is(.elementor-icon-list-text, a) {
  font-family: "Lato", sans-serif;
}

/* Home guide/manufacturers/reviews icon boxes: titles rendered in Arial (Roboto never loads); use the heading font. */
body .elementor .elementor-element:is(.elementor-element-2ed5e386, .elementor-element-dc0a8b3, .elementor-element-22d00e47, .elementor-element-4de14f5, .elementor-element-86deab9, .elementor-element-9c9f2ba) :is(.elementor-icon-box-title, .elementor-icon-box-title a) {
  font-family: "Titillium Web", sans-serif;
  font-weight: 700;
}

/* Home "is my car a lemon" checklist: items were vertically centred in their grid row, so a 2-line item sat lower than its 3-line neighbour (tablet, desktop). */
body .elementor .elementor-element:is(.elementor-element-895065c, .elementor-element-a9e295f) > .elementor-element {
  --align-self: flex-start;
  align-self: start;
}

/* Home "is my car a lemon" heading: centred on phones over left-aligned text and checklist; align it with them. */
@media (max-width: 767px) {
  body .elementor .elementor-element:is(.elementor-element-2155a2d, .elementor-element-0eb97f8) {
    text-align: left;
  }
}

/* Home hero on tablet: only 20px above the headline and below the checklist, so the text jammed against the hero edges. */
@media (min-width: 768px) and (max-width: 1024px) {
  body .elementor .elementor-element:is(.elementor-element-ce6e99d, .elementor-element-c371d00) {
    --padding-top: 50px;
    --padding-bottom: 50px;
  }
}

/* Page headlines on phones (home, about, our-team): 60px type on an 85px line left big gaps between lines. */
@media (max-width: 767px) {
  body .elementor .elementor-element:is(.elementor-element-522f7dd, .elementor-element-9272c43, .elementor-element-476f4de, .elementor-element-4cc80e3) .elementor-heading-title {
    line-height: 1.1;
  }
}

/* Spanish team headline on phones ("Nuestros abogados experimentados luchan por usted", home, about, contact): at 52px
   "Experimentados" ran past the screen edge and made the page scroll sideways, and "Usted" sat alone on the last line. */
@media (max-width: 767px) {
  html:lang(es) body .elementor .elementor-element.elementor-element-d938c37 p {
    font-size: clamp(34px, 11.5vw, 52px);
    line-height: 1.15;
    text-wrap: balance;
  }
}

/* About "Acerca de" on tablet: the 45% text column was too narrow, so the copy ran long and "Contáctenos hoy mismo" broke onto two lines; split it evenly with the video. */
@media (min-width: 768px) and (max-width: 1024px) {
  body .elementor .elementor-element:is(.elementor-element-6842a77, .elementor-element-075697b) {
    --width: 50%;
  }
}

/* Reviews "Nuestros Blogs" button on tablet: stretched full width while the hero button on the same page is compact; size it like desktop. */
@media (min-width: 768px) and (max-width: 1024px) {
  body .elementor .elementor-element:is(.elementor-element-7cd7c1a, .elementor-element-2ce6123) {
    text-align: center;
  }

  body .elementor .elementor-element:is(.elementor-element-7cd7c1a, .elementor-element-2ce6123) .elementor-button {
    width: auto;
  }
}

/* Our-team intro paragraph: centred lines ran 1100px wide on desktop and tablet landscape; cap the measure. */
body .elementor .e-con .elementor-element.elementor-element-cca54dc.elementor-widget {
  max-width: 880px;
}

/* Case results top three amounts on tablet: 37px figures in three columns ran into each other; scale them to the column. */
@media (min-width: 768px) and (max-width: 1024px) {
  body .elementor .elementor-element:is(.elementor-element-2a614af, .elementor-element-1f73b5e, .elementor-element-d676ad7) :is(.elementor-icon-box-title, .elementor-icon-box-title a) {
    font-size: clamp(28px, 3.6vw, 37px);
    line-height: 1.3;
  }
}

/* 30-brands-cities.css */
/* Brand and city pages: /es/fabricantes/ and /es/areas-servidas/ with every subpage, plus their
   English twins (/manufacturers/, /areas-served/). Page bodies only. Every rule is scoped by
   body:is(...) to these pages, because the element IDs below are shared by about 110 pages.
   Breakpoints follow Elementor: phone <= 767px, tablet 768-1024px, desktop >= 1025px. */

/* ============================================================ TABLET: TEXT COLUMN HEADINGS */

/* Tablet: the sidebar form takes 40% of the width, so the text column is only 414-570px wide,
   but section headings kept their full-width 60px / 42px sizes and ran to 6-7 lines of 3 words.
   Smaller sizes inside the text column only; desktop and phone keep their sizes. */
@media (min-width: 768px) and (max-width: 1024px) {
  body:is(.page-id-843,.page-id-842,.page-id-773,.page-id-772,.parent-pageid-843,.parent-pageid-842,.parent-pageid-773,.parent-pageid-772,.parent-pageid-1101,.parent-pageid-1106,.parent-pageid-1110,.parent-pageid-1006,.parent-pageid-1016,.parent-pageid-1048,.parent-pageid-1054,.parent-pageid-1077,.parent-pageid-917,.parent-pageid-946) .elementor-element.elementor-element-bab4181 {
    --e-global-typography-716881c-font-size: 44px;
    --e-global-typography-716881c-line-height: 52px;
    --e-global-typography-242a10d-font-size: 34px;
    --e-global-typography-242a10d-line-height: 41px;
  }

  /* Same problem for the few section headings that have a typed 60px size instead of the global one. */
  body:is(.page-id-843,.page-id-842,.page-id-773,.page-id-772,.parent-pageid-843,.parent-pageid-842,.parent-pageid-773,.parent-pageid-772,.parent-pageid-1101,.parent-pageid-1106,.parent-pageid-1110,.parent-pageid-1006,.parent-pageid-1016,.parent-pageid-1048,.parent-pageid-1054,.parent-pageid-1077,.parent-pageid-917,.parent-pageid-946) .elementor-element-bab4181 .elementor-element:is(.elementor-element-f728075,.elementor-element-6e9d473,.elementor-element-3f6bc43,.elementor-element-49f9ece) .elementor-heading-title {
    font-size: 44px;
    line-height: 52px;
  }
}

/* ============================================================ MANUFACTURERS HUB */

/* Tablet: the hero had 0px right padding, so the intro text and heading ran into the screen edge. */
@media (max-width: 1024px) {
  body:is(.page-id-843,.page-id-842) .elementor-element:is(.elementor-element-9ee963a,.elementor-element-f7f7486) {
    --padding-right: 20px;
  }
}

/* Desktop: 13 brand cards in 3 columns left Volkswagen alone at the far left of the last row. Centre it. */
@media (min-width: 1025px) {
  body:is(.page-id-843,.page-id-842) .elementor-element:is(.elementor-element-5f60bb8,.elementor-element-e34b469) > .e-con:last-child:nth-child(3n+1) {
    grid-column: 2;
  }
}

/* Tablet: same orphan card in the 2-column grid, stuck on the left. Centre it at the same card width. */
@media (min-width: 768px) and (max-width: 1024px) {
  body:is(.page-id-843,.page-id-842) .elementor-element:is(.elementor-element-5f60bb8,.elementor-element-e34b469) > .e-con:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    --width: calc(50% - 10px);
    width: calc(50% - 10px);
  }
}

/* ============================================================ AREAS SERVED HUB */

/* Desktop: three office cards were 31% wide and the fourth (Sacramento) 33%, so the bottom card
   was visibly wider than the row above it. All four now share one width, three per row. */
@media (min-width: 1025px) {
  body:is(.page-id-773,.page-id-772) .elementor-element:is(.elementor-element-b9d94a9,.elementor-element-75aa0a5) > .e-con-inner > .e-con {
    --width: calc((100% - 71px) / 3);
  }
}

/* All sizes: the 20px card text split county names across two lines in the 2-column lists
   ("San / Bernardino", "San / Francisco"). Slightly smaller text keeps each name on one line. */
body:is(.page-id-773,.page-id-772) .elementor-element:is(.elementor-element-b9d94a9,.elementor-element-75aa0a5) .elementor-widget-text-editor {
  font-size: 18px;
  line-height: 28px;
}

/* ============================================================ BRAND PAGES: GREY "RED FLAGS" BOX */

/* All sizes: in the grey box, the heading (and on Chrysler/Dodge the first paragraph) sat flush
   against the box edge while the text below was indented 20px. Same inset for both. */
body:is(.page-id-843,.page-id-842,.page-id-773,.page-id-772,.parent-pageid-843,.parent-pageid-842,.parent-pageid-773,.parent-pageid-772,.parent-pageid-1101,.parent-pageid-1106,.parent-pageid-1110,.parent-pageid-1006,.parent-pageid-1016,.parent-pageid-1048,.parent-pageid-1054,.parent-pageid-1077,.parent-pageid-917,.parent-pageid-946) .elementor-element.elementor-element-fb35b18 > .elementor-widget {
  padding-left: 20px;
  padding-right: 20px;
}
body:is(.page-id-843,.page-id-842,.page-id-773,.page-id-772,.parent-pageid-843,.parent-pageid-842,.parent-pageid-773,.parent-pageid-772,.parent-pageid-1101,.parent-pageid-1106,.parent-pageid-1110,.parent-pageid-1006,.parent-pageid-1016,.parent-pageid-1048,.parent-pageid-1054,.parent-pageid-1077,.parent-pageid-917,.parent-pageid-946) .elementor-element.elementor-element-fb35b18 > .elementor-widget:first-child {
  padding-top: 20px;
}

/* Phone: the text below uses a 10px inset, so match it. */
@media (max-width: 767px) {
  body:is(.page-id-843,.page-id-842,.page-id-773,.page-id-772,.parent-pageid-843,.parent-pageid-842,.parent-pageid-773,.parent-pageid-772,.parent-pageid-1101,.parent-pageid-1106,.parent-pageid-1110,.parent-pageid-1006,.parent-pageid-1016,.parent-pageid-1048,.parent-pageid-1054,.parent-pageid-1077,.parent-pageid-917,.parent-pageid-946) .elementor-element.elementor-element-fb35b18 > .elementor-widget {
    padding-left: 10px;
    padding-right: 10px;
  }
  body:is(.page-id-843,.page-id-842,.page-id-773,.page-id-772,.parent-pageid-843,.parent-pageid-842,.parent-pageid-773,.parent-pageid-772,.parent-pageid-1101,.parent-pageid-1106,.parent-pageid-1110,.parent-pageid-1006,.parent-pageid-1016,.parent-pageid-1048,.parent-pageid-1054,.parent-pageid-1077,.parent-pageid-917,.parent-pageid-946) .elementor-element.elementor-element-fb35b18 > .elementor-widget:first-child {
    padding-top: 10px;
  }
}

/* ============================================================ UNSTYLED INTRO AND CLOSING TEXT */

/* All sizes: on the Hyundai, Tigershark and Honda braking pages the intro paragraphs and the closing
   "¿Qué hacer si esto le pasa a usted?" paragraph had no text style, so they showed in small
   fallback Arial while the rest of the page uses the body text style. Give them the page's body style. */
body:is(.page-id-1011,.page-id-1051,.page-id-1030) .elementor-element:is(.elementor-element-c9c55b4,.elementor-element-d59904d,.elementor-element-d654c33,.elementor-element-2e25146,.elementor-element-cc7a2c8) {
  font-family: var(--e-global-typography-af38dbf-font-family), Sans-serif;
  font-size: var(--e-global-typography-af38dbf-font-size);
  font-weight: var(--e-global-typography-af38dbf-font-weight);
  line-height: var(--e-global-typography-af38dbf-line-height);
  letter-spacing: var(--e-global-typography-af38dbf-letter-spacing);
}

/* All sizes: the Hyundai intro links were the hero's yellow on a white background, nearly unreadable.
   Use the blue bold link style the rest of the body text uses. */
body.page-id-1011 .elementor-element.elementor-element-c9c55b4 a,
body.page-id-1011 .elementor-element.elementor-element-c9c55b4 a:hover {
  color: #2F6FB7;
  font-weight: 700;
}

/* ============================================================ NEW PAGES: H3 MADE FROM AN H2 */

/* All sizes: the Ford, GMC, Hyundai and Jeep pages have no H3 widget to copy, so their new H3s are
   copies of an H2 widget and kept its 69px H2 style. Give them the H3 style every other H3 uses. */
body .elementor-element.elementor-widget-heading .elementor-heading-title.llh-h3 {
  font-family: var(--e-global-typography-242a10d-font-family), Sans-serif;
  font-size: var(--e-global-typography-242a10d-font-size);
  font-weight: var(--e-global-typography-242a10d-font-weight);
  font-style: var(--e-global-typography-242a10d-font-style);
  line-height: var(--e-global-typography-242a10d-line-height);
  letter-spacing: var(--e-global-typography-242a10d-letter-spacing);
  text-transform: none;
}

/* ============================================================ CAROUSELS */

/* All sizes: in the testimonial carousels every slide is as tall as the longest quote, but the
   navy card inside stayed at its own height, leaving a 200px+ empty band under shorter quotes.
   Cards now fill the slide, as the English Ford page already does. */
body:is(.page-id-843,.page-id-842,.page-id-773,.page-id-772,.parent-pageid-843,.parent-pageid-842,.parent-pageid-773,.parent-pageid-772,.parent-pageid-1101,.parent-pageid-1106,.parent-pageid-1110,.parent-pageid-1006,.parent-pageid-1016,.parent-pageid-1048,.parent-pageid-1054,.parent-pageid-1077,.parent-pageid-917,.parent-pageid-946) .elementor-widget-n-carousel.elementor-element {
  --e-n-carousel-slide-height: auto;
  --e-n-carousel-slide-container-height: 100%;
}
body:is(.page-id-843,.page-id-842,.page-id-773,.page-id-772,.parent-pageid-843,.parent-pageid-842,.parent-pageid-773,.parent-pageid-772,.parent-pageid-1101,.parent-pageid-1106,.parent-pageid-1110,.parent-pageid-1006,.parent-pageid-1016,.parent-pageid-1048,.parent-pageid-1054,.parent-pageid-1077,.parent-pageid-917,.parent-pageid-946) .elementor-widget-n-carousel .swiper-slide > .e-con > .e-con-inner > .e-con {
  height: 100%;
}

/* Tablet: the case-result amounts ($334,500.00) were cut off at the card edge in the 2-up
   case carousel. Smaller amount and a 20px card inset so the full figure shows. */
@media (min-width: 768px) and (max-width: 1024px) {
  body:is(.page-id-843,.page-id-842,.page-id-773,.page-id-772,.parent-pageid-843,.parent-pageid-842,.parent-pageid-773,.parent-pageid-772,.parent-pageid-1101,.parent-pageid-1106,.parent-pageid-1110,.parent-pageid-1006,.parent-pageid-1016,.parent-pageid-1048,.parent-pageid-1054,.parent-pageid-1077,.parent-pageid-917,.parent-pageid-946) .elementor-widget-n-carousel.elementor-element {
    --e-global-typography-8f81467-font-size: 26px;
    --e-global-typography-8f81467-line-height: 32px;
  }
  body:is(.page-id-843,.page-id-842,.page-id-773,.page-id-772,.parent-pageid-843,.parent-pageid-842,.parent-pageid-773,.parent-pageid-772,.parent-pageid-1101,.parent-pageid-1106,.parent-pageid-1110,.parent-pageid-1006,.parent-pageid-1016,.parent-pageid-1048,.parent-pageid-1054,.parent-pageid-1077,.parent-pageid-917,.parent-pageid-946) .elementor-widget-n-carousel .swiper-slide > .e-con:has(> .e-con-inner > .elementor-widget-heading) {
    --padding-left: 20px;
    --padding-right: 20px;
  }
}

/* ============================================================ CITY PAGES: TEAM GRID */

/* Tablet: 3 team cards per row in the narrow text column left about 100px per card, so every name
   broke onto two lines ("Amy / Morse"). Two cards per row, the same card width as on desktop. */
@media (min-width: 768px) and (max-width: 1024px) {
  body:is(.page-id-773,.page-id-772,.parent-pageid-773,.parent-pageid-772) .e-con > .e-con:has(> .elementor-widget-image-box) {
    --width: calc(50% - 11px);
  }
}

/* Phone: the portrait is centred but the name and title under it were left-aligned. Centre both. */
@media (max-width: 767px) {
  body:is(.page-id-773,.page-id-772,.parent-pageid-773,.parent-pageid-772) .elementor-element.elementor-widget-image-box .elementor-image-box-wrapper {
    text-align: center;
  }
}

/* ============================================================ SPANISH HYUNDAI HERO */

/* Tablet and desktop: the hero is a 55/45 row of title and photo, so the lead added under the title
   (sections/hyundai.json) became a squeezed middle column. Put it under the title, photo on the right. */
@media (min-width: 768px) {
  .elementor-1011 .elementor-element.elementor-element-8bd76af {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    align-content: start;
  }
  .elementor-1011 .elementor-element-8bd76af > .elementor-element-5fc009a,
  .elementor-1011 .elementor-element-8bd76af > .elementor-element-2a8fe70 {
    grid-column: 1;
    width: auto;
  }
  .elementor-1011 .elementor-element-8bd76af > .elementor-element-36bb1fd {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: auto;
  }
}

/* ============================================================ SPANISH BRAND HEROES WITH AN ADDED PHOTO */

/* All sizes: the other Spanish brand pages had a dark hero with no photo. sections/*.json adds the photo
   (.llh-hero-photo); these rules give the hero the Hyundai look, with the values from its post-1011.css:
   light grey with no background picture, navy title, black lead, photo on the right. */
body .elementor-element.elementor-element-f0e1c81:has(.llh-hero-photo):not(.elementor-motion-effects-element-type-background) {
  background-image: none;
}
body .elementor-element.elementor-element-8bd76af:has(> .llh-hero-photo) {
  --column-gap: 30px;
}
body .elementor-element-8bd76af:has(> .llh-hero-photo) .elementor-element.elementor-element-5fc009a .elementor-heading-title {
  color: var(--e-global-color-primary);
}
body .elementor-element-8bd76af:has(> .llh-hero-photo) > .elementor-widget-text-editor {
  color: var(--e-global-color-text);
}
/* The lead's links were the dark hero's yellow; use the blue bold link style of the body text. */
body .elementor-element-8bd76af:has(> .llh-hero-photo) > .elementor-widget-text-editor a,
body .elementor-element-8bd76af:has(> .llh-hero-photo) > .elementor-widget-text-editor a:hover {
  color: #2F6FB7;
  font-weight: 700;
}
body .elementor-element.llh-hero-photo {
  text-align: center;
}

/* Desktop: the dark hero had 70px above and below; the Hyundai hero has 50px. */
@media (min-width: 1025px) {
  body .elementor-element.elementor-element-f0e1c81:has(.llh-hero-photo) {
    --padding-top: 50px;
    --padding-bottom: 50px;
  }
}

/* Tablet and desktop: title and lead on the left, photo on the right, as the Hyundai hero above.
   The lead's row takes the height the photo adds, so a one-line title keeps its lead right under it. */
@media (min-width: 768px) {
  body .elementor-element.elementor-element-8bd76af:has(> .llh-hero-photo) {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    grid-template-rows: auto 1fr;
    align-content: start;
  }
  body .elementor-element.llh-hero-photo > .elementor-widget-container {
    margin: 20px 0px 0px 0px;
  }
  body .elementor-element-8bd76af:has(> .llh-hero-photo) > .elementor-widget {
    grid-column: 1;
    width: auto;
  }
  body .elementor-element-8bd76af > .elementor-element.llh-hero-photo {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* 35-guides-claims.css */
/* 35-guides-claims.css: page-body layout fixes for the guide, process, military, FAQ, contact, client portal,
   privacy and thank-you pages, and the claims, buyback and auto-buying hubs with all their sub-pages (ES + EN twins).
   Loads after 10-chrome.css, so on these pages the heading sizes below are the ones that hold. */

/* Phone: section headings (H2) were 54px, so long words ran past the screen edge ("DEMOSTRADOR"?, CONCESIONARIO,
   Responsabilidad made the page scroll sideways) and most headings ran 5-7 lines. Scale: H1 40px, H2 36px, H3 28px. */
@media (max-width: 767px) {
  body:is(.page-id-996, .page-id-989, .page-id-974, .page-id-953, .page-id-950, .page-id-947, .page-id-981, .page-id-978, .page-id-1148, .page-id-455, .page-id-971, .page-id-969, .page-id-1128, .page-id-1127, .page-id-206, .page-id-213, .page-id-1163, .page-id-844, .page-id-1164, .page-id-1020, .page-id-1063, .page-id-1058, .parent-pageid-1163, .parent-pageid-844, .parent-pageid-1164, .parent-pageid-1020, .parent-pageid-1063, .parent-pageid-1058) .elementor[data-elementor-type="wp-page"] {
    --e-global-typography-716881c-font-size: min(36px, 10vw);
    --e-global-typography-716881c-line-height: 1.17;
  }

  body:is(.page-id-996, .page-id-989, .page-id-974, .page-id-953, .page-id-950, .page-id-947, .page-id-981, .page-id-978, .page-id-1148, .page-id-455, .page-id-971, .page-id-969, .page-id-1128, .page-id-1127, .page-id-206, .page-id-213, .page-id-1163, .page-id-844, .page-id-1164, .page-id-1020, .page-id-1063, .page-id-1058, .parent-pageid-1163, .parent-pageid-844, .parent-pageid-1164, .parent-pageid-1020, .parent-pageid-1063, .parent-pageid-1058) .elementor[data-elementor-type="wp-page"] .elementor-widget-heading:has(h1) {
    --e-global-typography-716881c-font-size: min(40px, 11vw);
    --e-global-typography-716881c-line-height: 1.15;
  }

  body:is(.page-id-996, .page-id-989, .page-id-974, .page-id-953, .page-id-950, .page-id-947, .page-id-981, .page-id-978, .page-id-1148, .page-id-455, .page-id-971, .page-id-969, .page-id-1128, .page-id-1127, .page-id-206, .page-id-213, .page-id-1163, .page-id-844, .page-id-1164, .page-id-1020, .page-id-1063, .page-id-1058, .parent-pageid-1163, .parent-pageid-844, .parent-pageid-1164, .parent-pageid-1020, .parent-pageid-1063, .parent-pageid-1058) .elementor[data-elementor-type="wp-page"] .elementor-widget-heading:has(h3) {
    --e-global-typography-242a10d-font-size: min(28px, 8vw);
    --e-global-typography-242a10d-line-height: 1.2;
  }
}

/* Tablet: 60px H2s did not fit the 413px article column at 768px ("DEMOSTRADOR"? ran into the sidebar column).
   H2 now scales 42-56px and H3 32-42px with the screen width; H1 keeps its 60px. */
@media (min-width: 768px) and (max-width: 1024px) {
  body:is(.page-id-996, .page-id-989, .page-id-974, .page-id-953, .page-id-950, .page-id-947, .page-id-981, .page-id-978, .page-id-1148, .page-id-455, .page-id-971, .page-id-969, .page-id-1128, .page-id-1127, .page-id-206, .page-id-213, .page-id-1163, .page-id-844, .page-id-1164, .page-id-1020, .page-id-1063, .page-id-1058, .parent-pageid-1163, .parent-pageid-844, .parent-pageid-1164, .parent-pageid-1020, .parent-pageid-1063, .parent-pageid-1058) .elementor[data-elementor-type="wp-page"] {
    --e-global-typography-716881c-font-size: clamp(42px, 5.5vw, 56px);
    --e-global-typography-716881c-line-height: 1.15;
  }

  body:is(.page-id-996, .page-id-989, .page-id-974, .page-id-953, .page-id-950, .page-id-947, .page-id-981, .page-id-978, .page-id-1148, .page-id-455, .page-id-971, .page-id-969, .page-id-1128, .page-id-1127, .page-id-206, .page-id-213, .page-id-1163, .page-id-844, .page-id-1164, .page-id-1020, .page-id-1063, .page-id-1058, .parent-pageid-1163, .parent-pageid-844, .parent-pageid-1164, .parent-pageid-1020, .parent-pageid-1063, .parent-pageid-1058) .elementor[data-elementor-type="wp-page"] .elementor-widget-heading:has(h1) {
    --e-global-typography-716881c-font-size: 60px;
    --e-global-typography-716881c-line-height: 69px;
  }

  body:is(.page-id-996, .page-id-989, .page-id-974, .page-id-953, .page-id-950, .page-id-947, .page-id-981, .page-id-978, .page-id-1148, .page-id-455, .page-id-971, .page-id-969, .page-id-1128, .page-id-1127, .page-id-206, .page-id-213, .page-id-1163, .page-id-844, .page-id-1164, .page-id-1020, .page-id-1063, .page-id-1058, .parent-pageid-1163, .parent-pageid-844, .parent-pageid-1164, .parent-pageid-1020, .parent-pageid-1063, .parent-pageid-1058) .elementor[data-elementor-type="wp-page"] .elementor-widget-heading:has(h3) {
    --e-global-typography-242a10d-font-size: clamp(32px, 4.2vw, 42px);
    --e-global-typography-242a10d-line-height: 1.17;
  }
}

/* Phone and tablet: these H2s carry their own fixed 54-60px size, so they stood out from the H2s around them.
   Put them on the shared H2 size from the two blocks above. */
@media (max-width: 1024px) {
  body .elementor-996 .elementor-element.elementor-element-07c6baa .elementor-heading-title,
  body .elementor-974 .elementor-element.elementor-element-3b94a71 .elementor-heading-title,
  body .elementor-989 .elementor-element.elementor-element-034b860 .elementor-heading-title,
  body .elementor-989 .elementor-element.elementor-element-ed11b29 .elementor-heading-title,
  body .elementor-953 .elementor-element.elementor-element-f728075 .elementor-heading-title,
  body .elementor-920 .elementor-element.elementor-element-1ba28fd .elementor-heading-title,
  body .elementor-920 .elementor-element.elementor-element-657ef70 .elementor-heading-title,
  body .elementor-927 .elementor-element.elementor-element-b20656a .elementor-heading-title,
  body .elementor-927 .elementor-element.elementor-element-3bb9b0d .elementor-heading-title,
  body .elementor-943 .elementor-element.elementor-element-afa61e1 .elementor-heading-title,
  body .elementor-943 .elementor-element.elementor-element-1ac39e9 .elementor-heading-title,
  body .elementor-957 .elementor-element.elementor-element-86e3c66 .elementor-heading-title,
  body .elementor-957 .elementor-element.elementor-element-55d0cd1 .elementor-heading-title,
  body .elementor-977 .elementor-element:is(.elementor-element-05461ac, .elementor-element-fa0ae79, .elementor-element-6a06c9f, .elementor-element-9d438a2, .elementor-element-8a82722, .elementor-element-35b890d) .elementor-heading-title,
  body .elementor-1010 .elementor-element:is(.elementor-element-05461ac, .elementor-element-fa0ae79, .elementor-element-6a06c9f, .elementor-element-9d438a2) .elementor-heading-title,
  body .elementor-985 .elementor-element:is(.elementor-element-0f1c3bf, .elementor-element-6e70aa2, .elementor-element-63ea4fc, .elementor-element-8a82722, .elementor-element-4704688, .elementor-element-1bee4be) .elementor-heading-title {
    font-size: var(--e-global-typography-716881c-font-size);
    line-height: var(--e-global-typography-716881c-line-height);
  }
}

/* Privacy page, every size: the uppercase notice paragraph is set as a 69px heading (50px on phones): 9-12 lines
   that outshout the H1, and on phones COMPLETAMENTE broke mid-word. Give it the site's H3 size. */
body.page-id-1128 .elementor-element.elementor-element-bea2f37 .elementor-heading-title,
body.page-id-1127 .elementor-element.elementor-element-ed11b29 .elementor-heading-title {
  font-size: 47px;
  line-height: 54px;
}

@media (min-width: 768px) and (max-width: 1024px) {
  body.page-id-1128 .elementor-element.elementor-element-bea2f37 .elementor-heading-title,
  body.page-id-1127 .elementor-element.elementor-element-ed11b29 .elementor-heading-title {
    font-size: clamp(32px, 4.2vw, 42px);
    line-height: 1.17;
  }
}

@media (max-width: 767px) {
  body.page-id-1128 .elementor-element.elementor-element-bea2f37 .elementor-heading-title,
  body.page-id-1127 .elementor-element.elementor-element-ed11b29 .elementor-heading-title {
    font-size: min(28px, 8vw);
    line-height: 1.2;
  }
}

/* Phone: the privacy H1 (45px) and the claims hub H1 (49px) used their own sizes, unlike every other page H1, and
   the claims hub H1 sat left-aligned while the buyback and auto-buying hub H1s are centred. */
@media (max-width: 767px) {
  body.page-id-1128 .elementor-element.elementor-element-7ebc700 .elementor-heading-title,
  body.page-id-1163 .elementor-element.elementor-element-e0750d7 .elementor-heading-title {
    font-size: min(40px, 11vw);
    line-height: 1.15;
  }

  body.page-id-1163 .elementor-element.elementor-element-e0750d7 {
    text-align: center;
  }
}

/* Phone: the hub intro line ("Comprensión de las Reclamaciones...") is a 54px paragraph, 7-8 lines tall.
   Set it at the H2 size. */
@media (max-width: 767px) {
  body:is(.page-id-1163, .page-id-844, .page-id-1164, .page-id-1020, .page-id-1063, .page-id-1058) .elementor-element:is(.elementor-element-9efd487, .elementor-element-fa387b0, .elementor-element-2686de1, .elementor-element-5c3df2e, .elementor-element-f6b2c80, .elementor-element-53fbf9d) {
    font-size: min(36px, 10vw);
    line-height: 1.17;
  }
}

/* Contact, phones under 400px: the 60px "Contáctenos" H1 is 324px wide and broke mid-word on 360px phones.
   Unchanged at 402px and up. */
@media (max-width: 767px) {
  body:is(.page-id-1148, .page-id-455) .elementor-element.elementor-element-40528a2 .elementor-heading-title {
    font-size: min(60px, 15vw);
  }
}

/* Phone: the breadcrumb band is split 50/50 orange over yellow, so a 3-5 line breadcrumb ran across the colour line
   with its last lines on yellow. Orange now wraps the whole breadcrumb and yellow holds the reviewer row. */
@media (max-width: 767px) {
  body:is(.page-id-996, .page-id-989, .page-id-974, .page-id-953, .page-id-950, .page-id-947, .page-id-981, .page-id-978, .page-id-1148, .page-id-455, .page-id-971, .page-id-969, .page-id-1128, .page-id-1127, .page-id-206, .page-id-213, .page-id-1163, .page-id-844, .page-id-1164, .page-id-1020, .page-id-1063, .page-id-1058, .parent-pageid-1163, .parent-pageid-844, .parent-pageid-1164, .parent-pageid-1020, .parent-pageid-1063, .parent-pageid-1058) .elementor-element.elementor-element-65ffeb4 {
    background: var(--e-global-color-secondary);
  }

  body:is(.page-id-996, .page-id-989, .page-id-974, .page-id-953, .page-id-950, .page-id-947, .page-id-981, .page-id-978, .page-id-1148, .page-id-455, .page-id-971, .page-id-969, .page-id-1128, .page-id-1127, .page-id-206, .page-id-213, .page-id-1163, .page-id-844, .page-id-1164, .page-id-1020, .page-id-1063, .page-id-1058, .parent-pageid-1163, .parent-pageid-844, .parent-pageid-1164, .parent-pageid-1020, .parent-pageid-1063, .parent-pageid-1058) .elementor-element.elementor-element-79608f5 {
    background-color: var(--e-global-color-accent);
    box-shadow: 0 0 0 20px var(--e-global-color-accent);
  }
}

/* Tablet: the 45-degree yellow/orange diagonal cut through 3-5 line breadcrumbs at 768px (words sat half on orange).
   Keep the diagonal but make it steeper and place it in the gap between breadcrumb and reviewer. */
@media (min-width: 768px) and (max-width: 1024px) {
  body:is(.page-id-996, .page-id-989, .page-id-974, .page-id-953, .page-id-950, .page-id-947, .page-id-981, .page-id-978, .page-id-1148, .page-id-455, .page-id-971, .page-id-969, .page-id-1128, .page-id-1127, .page-id-206, .page-id-213, .page-id-1163, .page-id-844, .page-id-1164, .page-id-1020, .page-id-1063, .page-id-1058, .parent-pageid-1163, .parent-pageid-844, .parent-pageid-1164, .parent-pageid-1020, .parent-pageid-1063, .parent-pageid-1058) .elementor-element.elementor-element-65ffeb4 {
    background:
      linear-gradient(to bottom right, var(--e-global-color-secondary) 50%, var(--e-global-color-accent) 50%) calc(50% + 10px) 0 / 40px 100% no-repeat,
      linear-gradient(to right, var(--e-global-color-secondary) 50%, var(--e-global-color-accent) 50%);
  }
}

/* Phone: the grey and navy content boxes (guía, proceso, militar, portal) had 10px inner padding, so text nearly
   touched the box edges. 20px like tablet and desktop. */
@media (max-width: 767px) {
  body:is(.page-id-996, .page-id-989, .page-id-974, .page-id-953, .page-id-950, .page-id-947, .page-id-971, .page-id-969) .elementor-element:is(.elementor-element-df97e26, .elementor-element-0c6c8ae, .elementor-element-81c7cbc, .elementor-element-e743068, .elementor-element-38c16cf) {
    --padding-top: 20px;
    --padding-left: 20px;
    --padding-right: 20px;
  }
}

/* Hub cards, every size: some card titles were centred vertically and others pinned to the top, so titles in one
   row started at different heights. Centre them all in their equal-height cards. */
body:is(.page-id-1163, .page-id-844, .page-id-1164, .page-id-1020, .page-id-1063, .page-id-1058) .elementor-element:is(.elementor-element-8cd53eb, .elementor-element-914860b, .elementor-element-0a9a90d, .elementor-element-0db295a, .elementor-element-bf75940, .elementor-element-053660f, .elementor-element-0d50d3b) > .e-con {
  --justify-content: center;
  justify-content: center;
}

/* Tablet: the claims hub's 12 cards sit in two separate rows (8 + 4), which broke into 3-3-2 and 3-1 with two
   half-empty rows. Let them flow as one grid: four full rows of three. */
@media (min-width: 768px) and (max-width: 1024px) {
  body.page-id-1163 .elementor-element.elementor-element-3e77ebf > .e-con-inner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }

  body.page-id-1163 .elementor-element:is(.elementor-element-8cd53eb, .elementor-element-914860b) {
    display: contents;
  }
}

/* Tablet: the buyback hub's 4 cards wrapped as 3 + 1 lone card. Two columns give an even 2 x 2. */
@media (min-width: 768px) and (max-width: 1024px) {
  body.page-id-1164 .elementor-element.elementor-element-0db295a > .e-con {
    --width: calc(50% - 10px);
  }
}

/* The Spanish guide embeds Elementor's demo "Video Placeholder" plus a line telling readers to watch
   it (live has the same). The English guide has neither, so hide both. */
body.page-id-996 .elementor-element:is(.elementor-element-815e964, .elementor-element-3364244) {
  display: none;
}

/* 40-blog-form.css */
/* 40-blog-form.css: the lead form box (every Gravity Forms box: navy sidebar 266/265, white hero 259/255, white footer 245/240),
   the "Noticias y retiros recientes" cards (325/322), the blog index (1332/1207), category pages and blog posts (146). ES + EN twins. */

/* ===== Lead form box ===== */

/* Labels fell back to the system font at 14px (Roboto never loads) next to Lato inputs and buttons; all sizes. */
body .elementor-widget-uael-gf-styler .uael-gf-style .gform_wrapper.gform-theme .gfield_label {
  font-family: "Lato", sans-serif;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0.2px;
  margin: 0 0 8px;
  padding: 0;
}

/* Text inputs were 38px tall and selects 50px, so Año / Marca / Modelo sat at different heights in one row; all sizes. */
body .elementor-widget-uael-gf-styler .uael-gf-style .gform_wrapper.gform-theme.gform-theme--framework.gform-theme--foundation .gform_fields .gfield .ginput_container input:is([type=text], [type=email], [type=tel], [type=number], [type=url], [type=password]),
body .elementor-widget-uael-gf-styler .uael-gf-style .gform_wrapper.gform-theme.gform-theme--framework.gform-theme--foundation .gform_fields .gfield .ginput_container select {
  box-sizing: border-box;
  height: 48px;
  min-height: 48px;
  padding-block: 0;
  padding-inline: 14px;
}

/* Select text could run under the orange arrow, and the arrow sat 12px from the edge instead of lining up with the text padding; all sizes. */
body .elementor-widget-uael-gf-styler .uael-gf-style .gform_wrapper.gform-theme.gform-theme--framework.gform-theme--foundation .gform_fields .gfield .ginput_container select {
  padding-inline-end: 44px;
  line-height: 46px;
  background-position: right 16px center;
  background-size: 12px 7px;
  background-repeat: no-repeat;
}

/* Fields were only 10px apart, so each label sat as close to the field above it as to its own field; all sizes. */
body .elementor-widget-uael-gf-styler .uael-gf-style .gform_wrapper.gform-theme .gform_fields {
  row-gap: 16px;
  column-gap: 12px;
}

/* Section titles ("Cuéntenos acerca de usted") showed in the thin fallback font instead of the site's bold heading font; all sizes. */
body .elementor-widget-uael-gf-styler .uael-gf-style .gform_wrapper.gform-theme .gfield.gsection .gsection_title {
  font-family: "Titillium Web", sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0.15px;
  margin: 12px 0 0;
}
body .elementor-widget-uael-gf-styler .uael-gf-style .gform_wrapper.gform-theme .gfield.gsection {
  padding-bottom: 12px;
}

/* The consent checkbox sat 22px away from its text, which also used the fallback font; all sizes. */
body .elementor-widget-uael-gf-styler .uael-gf-style .gform_wrapper.gform-theme .gfield--type-consent .ginput_container_consent {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}
body .elementor-widget-uael-gf-styler.uael-gf-check-default-yes .uael-gf-style.uael-gf-check-style .gform_wrapper .gform_body .ginput_container_consent input[type=checkbox] {
  margin: 3px 0 0;
}
body .elementor-widget-uael-gf-styler .uael-gf-style .gform_wrapper.gform-theme .ginput_container_consent .gfield_consent_label {
  font-family: "Lato", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  margin: 0;
}

/* Buttons: "Anterior" used 20px type and the submit 22px (16px on phones), and the gap above them varied; all sizes. */
body .elementor-widget-uael-gf-styler .uael-gf-style .gform_wrapper.gform-theme.gform-theme--framework :is(.gform_page_footer, .gform_footer) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  padding: 0;
}
body .elementor-widget-uael-gf-styler .uael-gf-style .gform_wrapper.gform-theme.gform-theme--framework :is(.gform_page_footer, .gform_footer) input:is(.gform_button, .gform_next_button, .gform_previous_button) {
  width: 100%;
  height: auto;
  min-height: 56px;
  margin: 0;
  padding: 12px 24px;
  white-space: normal;
  font-family: "Lato", sans-serif;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 1.25px !important;
}

/* "Anterior" was a second full yellow bar, as loud as the submit button it sits above; all sizes (navy box). */
body :is(.elementor-266, .elementor-265) .elementor-widget-uael-gf-styler .uael-gf-style .gform_wrapper .gform_page_footer input.gform_previous_button {
  background-color: transparent !important;
  color: var(--e-global-color-dac009d) !important;
  border: 2px solid var(--e-global-color-secondary) !important;
}
body :is(.elementor-266, .elementor-265) .elementor-widget-uael-gf-styler .uael-gf-style .gform_wrapper .gform_page_footer input.gform_previous_button:is(:hover, :focus-visible) {
  background-color: var(--e-global-color-secondary) !important;
  color: var(--e-global-color-primary) !important;
}

/* Same "Anterior" fix for the white hero box; all sizes. */
body :is(.elementor-259, .elementor-255, .elementor-245, .elementor-240) .elementor-widget-uael-gf-styler .uael-gf-style .gform_wrapper .gform_page_footer input.gform_previous_button {
  background-color: transparent !important;
  color: var(--e-global-color-primary) !important;
  border: 2px solid var(--e-global-color-primary) !important;
}
body :is(.elementor-259, .elementor-255, .elementor-245, .elementor-240) .elementor-widget-uael-gf-styler .uael-gf-style .gform_wrapper .gform_page_footer input.gform_previous_button:is(:hover, :focus-visible) {
  background-color: var(--e-global-color-primary) !important;
  color: var(--e-global-color-dac009d) !important;
}

/* After a failed send, the error summary heading was light grey (#ccc) on the white boxes and field errors were bright red; all sizes. */
body :is(.elementor-245, .elementor-240, .elementor-259, .elementor-255) .elementor-widget-uael-gf-styler .uael-gf-style .gform_wrapper.gform-theme div.gform_validation_errors h2.gform_submission_error,
body :is(.elementor-245, .elementor-240, .elementor-259, .elementor-255) .elementor-widget-uael-gf-styler .uael-gf-style .gform_wrapper.gform-theme .gfield .gfield_description.validation_message {
  color: var(--gf-color-danger, #c02b0a);
}

/* Field errors were bright red on the navy box (under 4:1 contrast); all sizes. */
body :is(.elementor-266, .elementor-265) .elementor-widget-uael-gf-styler .uael-gf-style .gform_wrapper.gform-theme .gfield .gfield_description.validation_message {
  color: var(--e-global-color-secondary);
  font-weight: 700;
}

/* The thank-you message was dark green on the navy box, close to invisible, and in the fallback font; all sizes. */
body .elementor-widget-uael-gf-styler .uael-gf-style .gform_confirmation_wrapper .gform_confirmation_message {
  font-family: "Lato", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  padding: 8px 0 4px;
}
body :is(.elementor-266, .elementor-265) .elementor-widget-uael-gf-styler .uael-gf-style .gform_confirmation_wrapper .gform_confirmation_message {
  color: var(--e-global-color-dac009d);
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablets: the sidebar and hero boxes are 275-380px wide, so step 2 put Nombre/Apellido and email/phone in 110-160px half fields; tablet. */
  body :is(.elementor-266, .elementor-265, .elementor-259, .elementor-255) .uael-gf-style .gform_wrapper.gform-theme--foundation .gform_fields .gfield--width-half {
    grid-column: 1 / -1;
  }

  /* Tablet step: section titles and buttons follow the site's tablet scale; tablet. */
  body .elementor-widget-uael-gf-styler .uael-gf-style .gform_wrapper.gform-theme .gfield.gsection .gsection_title {
    font-size: 26px;
  }
  body .elementor-widget-uael-gf-styler .uael-gf-style .gform_wrapper.gform-theme.gform-theme--framework :is(.gform_page_footer, .gform_footer) input:is(.gform_button, .gform_next_button, .gform_previous_button) {
    font-size: 19px !important;
  }
}

@media (max-width: 767px) {
  /* Phones: 14px labels were small next to 16px field text; mobile. */
  body .elementor-widget-uael-gf-styler .uael-gf-style .gform_wrapper.gform-theme .gfield_label {
    font-size: 16px;
  }

  /* Phones: section titles and buttons follow the site's phone scale ("Anterior" stayed at 20px beside a 16px submit); mobile. */
  body .elementor-widget-uael-gf-styler .uael-gf-style .gform_wrapper.gform-theme .gfield.gsection .gsection_title {
    font-size: 24px;
  }
  body .elementor-widget-uael-gf-styler .uael-gf-style .gform_wrapper.gform-theme.gform-theme--framework :is(.gform_page_footer, .gform_footer) input:is(.gform_button, .gform_next_button, .gform_previous_button) {
    min-height: 52px;
    font-size: 16px !important;
  }
}

/* ===== "Noticias y retiros recientes" cards ===== */

/* The section title used the 69px page-hero size (three lines on phones), bigger than the post title above it; all sizes. */
body :is(.elementor-325, .elementor-322) .elementor-element.elementor-element-2c6e7bb4 .elementor-heading-title {
  font-size: var(--e-global-typography-fede3ce-font-size);
  line-height: var(--e-global-typography-fede3ce-line-height);
  letter-spacing: var(--e-global-typography-fede3ce-letter-spacing);
}

/* Each slide was only as tall as its own title, so the date / brand line jumped up and down from card to card; all sizes. */
body :is(.elementor-325, .elementor-322) .elementor-widget-loop-carousel .swiper-slide {
  height: auto;
}
body .elementor-310 .elementor-element.elementor-element-90a1bff {
  margin-top: auto;
}

/* ===== Blog index (/es/blog/, /blog/) ===== */

/* Card excerpts had no font of their own and fell back to the system font between Titillium titles and Lato dates; all sizes. */
body :is(.elementor-1274, .elementor-1271, .elementor-1242) .elementor-widget-text-editor {
  font-family: "Lato", sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.2px;
}

/* Card titles had a 26px line height on 24px type, so accented capitals touched the line above; all sizes. */
body .elementor-1274 .elementor-element.elementor-element-c7839f1 .elementor-heading-title,
body .elementor-1271 .elementor-element.elementor-element-5d64662 .elementor-heading-title {
  line-height: 1.25;
}

/* Cards in a row ended their "fecha | marca" line at different heights, with 20px gaps around the bar; all sizes. */
body .elementor-1274 .elementor-element.elementor-element-0345725,
body .elementor-1271 .elementor-element.elementor-element-9e57b09 {
  margin-top: auto;
  --row-gap: 4px;
  --column-gap: 8px;
}

@media (max-width: 767px) {
  /* Phones: the blog title ran to six lines at 54px; mobile. */
  body.blog .elementor-element.elementor-element-ff8488b .elementor-heading-title {
    font-size: 38px;
    line-height: 46px;
  }
}

/* ===== Category pages (/es/blog/category/*) ===== */

/* The page sat flush against the footer with no space below the title or the list; all sizes. */
body.archive.category .site-main {
  padding-top: 48px;
  padding-bottom: 80px;
}

/* "Categoría: Ford" used the theme's grey system font instead of the site's navy heading style; all sizes. */
body.archive.category .page-header .entry-title {
  font-family: "Titillium Web", sans-serif;
  font-weight: 700;
  color: var(--e-global-color-primary);
  font-size: var(--e-global-typography-242a10d-font-size);
  line-height: var(--e-global-typography-242a10d-line-height);
  letter-spacing: 0.25px;
  max-width: none;
  margin: 0 0 40px;
  padding-inline: 0;
}

/* Posts in the list ran into each other with no space between them; all sizes. */
body.archive.category .page-content article.post {
  margin: 0 0 56px;
}
body.archive.category .page-content article.post:last-child {
  margin-bottom: 0;
}

/* Post titles took the yellow link colour on white (about 1.6:1 contrast) in the system font; all sizes. */
body.archive.category .page-content .post .entry-title {
  font-family: "Titillium Web", sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.15px;
  margin: 0 0 16px;
}
body.archive.category .page-content .post .entry-title a {
  color: var(--e-global-color-primary);
  text-decoration: none;
}
body.archive.category .page-content .post .entry-title a:is(:hover, :focus-visible) {
  color: var(--e-global-color-318ce5b);
}

/* The image touched the excerpt, and the excerpt used the system font; all sizes. */
body.archive.category .page-content .post .wp-post-image {
  display: block;
  margin: 0 0 16px;
}
body.archive.category .page-content .post > p {
  font-family: "Lato", sans-serif;
  font-size: var(--e-global-typography-13e3009-font-size);
  line-height: var(--e-global-typography-13e3009-line-height);
  letter-spacing: 0.5px;
  color: var(--e-global-color-text);
  margin: 0;
}

/* Older / newer links took the yellow link colour; all sizes. */
body.archive.category .pagination {
  margin-top: 48px;
  font-family: "Lato", sans-serif;
  font-weight: 700;
}
body.archive.category .pagination a {
  color: var(--e-global-color-primary);
  text-decoration: none;
}

@media (min-width: 1025px) {
  /* Desktop: the list ran 1140px wide, about 150 characters per excerpt line; desktop. */
  body.archive.category .site-main {
    max-width: 800px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablet: post titles follow the tablet scale; tablet. */
  body.archive.category .page-content .post .entry-title {
    font-size: 28px;
    line-height: 36px;
  }
}

@media (max-width: 767px) {
  /* Phones: the list had 10px side margins (0 between 576 and 767px) instead of the site's 20px; mobile. */
  body.archive.category .site-main {
    max-width: none;
    padding-inline: 20px;
    padding-top: 32px;
    padding-bottom: 56px;
  }
  body.archive.category .page-header .entry-title {
    margin-bottom: 32px;
  }
  body.archive.category .page-content article.post {
    margin-bottom: 40px;
  }
  body.archive.category .page-content .post .entry-title {
    font-size: 24px;
    line-height: 30px;
  }
}

/* ===== Blog posts (single-post template 146) ===== */

/* Titles used the 69px page-hero size, so long Spanish titles ran five to seven lines beside the photo; desktop. */
body.single-post .elementor-146 .elementor-element.elementor-element-581c2ab .elementor-heading-title {
  font-size: 56px;
  line-height: 64px;
  letter-spacing: 0;
}

/* Some paragraphs had no type settings and showed in the 16px system font between 22px Lato paragraphs; all sizes. */
body.single-post .elementor-widget-theme-post-content .elementor-widget-text-editor {
  font-family: var(--e-global-typography-af38dbf-font-family), sans-serif;
  font-weight: 400;
  font-size: var(--e-global-typography-af38dbf-font-size);
  line-height: var(--e-global-typography-af38dbf-line-height);
  letter-spacing: var(--e-global-typography-af38dbf-letter-spacing);
}

/* Section headings were 56px (h2) and 47px (h3), as large as the title, and the two sizes were swapped in some posts; desktop. */
body.single-post .elementor-widget-theme-post-content .elementor-widget-heading h2.elementor-heading-title {
  font-size: 44px;
  line-height: 52px;
}
body.single-post .elementor-widget-theme-post-content .elementor-widget-heading h3.elementor-heading-title {
  font-size: 34px;
  line-height: 42px;
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablet: at 60px the title fit one word per line in its 350px column, and "Transmission" barely fit at all; tablet. */
  body.single-post .elementor-146 .elementor-element.elementor-element-581c2ab .elementor-heading-title {
    font-size: 44px;
    line-height: 52px;
  }

  /* Tablet: headings follow the same scale step down as the title; tablet. */
  body.single-post .elementor-widget-theme-post-content .elementor-widget-heading h2.elementor-heading-title {
    font-size: 36px;
    line-height: 44px;
  }
  body.single-post .elementor-widget-theme-post-content .elementor-widget-heading h3.elementor-heading-title {
    font-size: 30px;
    line-height: 38px;
  }

  /* Tablet: the check-mark bullets were placed for a 32px line and sat low on 28px lines; tablet. */
  body.single-post .elementor-widget-theme-post-content .elementor-widget-text-editor ul li::before {
    margin-top: 10px;
  }
}

@media (max-width: 767px) {
  /* Phones: the title was 54px, seven or eight lines for a long Spanish title; mobile. */
  body.single-post .elementor-146 .elementor-element.elementor-element-581c2ab .elementor-heading-title {
    font-size: 36px;
    line-height: 44px;
  }

  /* Phones: h2 at 44px and h3 at 37px in a 362px column broke headings into four or five lines; mobile. */
  body.single-post .elementor-widget-theme-post-content .elementor-widget-heading h2.elementor-heading-title {
    font-size: 30px;
    line-height: 38px;
  }
  body.single-post .elementor-widget-theme-post-content .elementor-widget-heading h3.elementor-heading-title {
    font-size: 24px;
    line-height: 31px;
  }

  /* Phones: the check-mark bullets sat below the middle of the first 24px line; mobile. */
  body.single-post .elementor-widget-theme-post-content .elementor-widget-text-editor ul li::before {
    margin-top: 8px;
  }

  /* Phones: the reviewer photo (15%) and "Revisado por" text (90%) added up to 105%, so the photo sat alone at the left and the text wrapped below; mobile. */
  body.single-post :is(.elementor-316, .elementor-151) .elementor-element.elementor-element-79608f5 {
    --flex-wrap: nowrap;
    --flex-wrap-mobile: nowrap;
    --justify-content: center;
    --align-items: center;
    --column-gap: 12px;
  }
  body.single-post :is(.elementor-316, .elementor-151) .elementor-element.elementor-element-532be6bb {
    width: 56px;
    max-width: 56px;
    flex: 0 0 56px;
  }
  body.single-post :is(.elementor-316, .elementor-151) .elementor-element.elementor-element-79dba13a {
    width: auto;
    max-width: none;
    flex: 0 1 auto;
  }

  /* Phones: "Fecha" and "Categoría" were left-aligned under the centred reviewer line; mobile. */
  body.single-post :is(.elementor-316, .elementor-151) .elementor-element.elementor-element-2d6d794 {
    --align-items: center;
  }
  body.single-post :is(.elementor-316, .elementor-151) .elementor-element.elementor-element-2d6d794 .elementor-widget-post-info {
    width: 100%;
    max-width: 100%;
  }
  body.single-post :is(.elementor-316, .elementor-151) .elementor-element.elementor-element-2d6d794 .elementor-icon-list-item {
    justify-content: center;
    text-align: center;
  }

  /* Phones: table cells kept 15px padding, squeezing three-column tables to a word or two per line; mobile. */
  body.single-post .elementor-widget-theme-post-content table :is(th, td) {
    padding: 10px;
    font-size: 15px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}