/**
 * Immigway — Responsive overrides (Mobile-First)
 * Breakpoints:
 *  - Mobile:  320px – 767px
 *  - Tablet:  768px – 1024px
 *  - Desktop: 1025px+
 *  - XL nav:  1200px+ (menú horizontal nativo del tema)
 */

/*--------------------------------------------------------------
# Base fluid media & overflow
--------------------------------------------------------------*/
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

#pxl-wapper,
#pxl-main,
.pxl-content-area,
.entry-content,
.elementor-section,
.elementor-container {
  max-width: 100%;
}

img,
video,
canvas,
svg,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

iframe,
embed,
object {
  display: block;
}

.wp-caption,
.wp-block-image,
.alignnone,
.aligncenter,
.alignleft,
.alignright {
  max-width: 100%;
}

table {
  max-width: 100%;
}

.pxl-table-responsive,
.entry-content table,
.comment-content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Logo: evitar desborde por max-width: inherit del tema */
#pxl-header-default .pxl-header-branding img,
#pxl-header-elementor .pxl-header-branding img,
.pxl-logo-mobile img {
  max-width: 100% !important;
  width: auto;
  height: auto;
  max-height: 56px;
}

/*--------------------------------------------------------------
# Header & hamburger — mobile first
--------------------------------------------------------------*/
#pxl-nav-mobile {
  z-index: 1002;
  padding: 12px;
  margin: -12px;
}

.pxl-nav-mobile-button {
  display: block;
  position: relative;
  width: 34px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pxl-nav-mobile-button:focus-visible {
  outline: 2px solid var(--primary-color, #e13833);
  outline-offset: 3px;
}

body.body-overflow {
  overflow: hidden;
  touch-action: none;
}

/* Drawer más usable en pantallas estrechas */
@media screen and (max-width: 1199px) {
  #pxl-header-default .pxl-header-main > .container,
  #pxl-header-elementor #pxl-header-mobile .pxl-header-main > .container {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 60px; /* espacio para el hamburguesa */
  }

  #pxl-header-default .row,
  #pxl-header-elementor #pxl-header-mobile .row {
    flex-wrap: nowrap;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
  }

  #pxl-header-default .pxl-header-branding,
  #pxl-header-elementor .pxl-header-branding {
    flex: 1 1 auto;
    min-width: 0;
    margin: 12px 0;
    max-width: calc(100% - 10px);
  }

  #pxl-header-default .pxl-header-branding img,
  #pxl-header-elementor .pxl-header-branding img {
    max-height: 48px;
  }

  .pxl-header-menu {
    width: min(350px, 86vw);
    max-width: 100%;
  }

  .pxl-header-menu-scroll {
    padding: 48px 24px 32px;
  }

  .pxl-menu-primary li.menu-item > a {
    word-break: break-word;
    padding-right: 36px; /* espacio para .pxl-menu-toggle */
  }

  #pxl-nav-mobile.active .pxl-nav-mobile-button span {
    opacity: 0;
  }

  #pxl-nav-mobile.active .pxl-nav-mobile-button:before {
    top: 9px;
    width: 100%;
    transform: rotate(45deg);
  }

  #pxl-nav-mobile.active .pxl-nav-mobile-button:after {
    bottom: 9px;
    width: 100%;
    transform: rotate(-45deg);
  }
}

/*--------------------------------------------------------------
# Mobile (320px – 767px)
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .container,
  .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
  }

  #pxl-header-default .pxl-header-main > .container,
  #pxl-header-elementor #pxl-header-mobile .pxl-header-main > .container {
    padding-right: 52px;
  }

  .pxl-header-menu {
    width: 100%;
  }

  .pxl-header-menu-scroll {
    padding: 40px 20px 28px;
  }

  #pxl-header-default .pxl-header-branding img,
  #pxl-header-elementor .pxl-header-branding img {
    max-height: 40px;
  }

  /* Tipografía & page title */
  #pxl-page-title-default {
    padding: 64px 0;
  }

  #pxl-page-title-default .pxl-page-title {
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1.25;
    word-wrap: break-word;
  }

  .pxl-breadcrumb {
    font-size: 14px;
  }

  .pxl-breadcrumb li:after {
    margin: 0 8px;
  }

  h1, .h1 { font-size: clamp(28px, 7vw, 36px); }
  h2, .h2 { font-size: clamp(24px, 6vw, 30px); }
  h3, .h3 { font-size: clamp(20px, 5vw, 26px); }
  h4, .h4 { font-size: clamp(18px, 4.5vw, 22px); }

  /* Grillas / columns fluidas */
  .row {
    flex-wrap: wrap;
  }

  .pxl-grid .pxl-grid-inner,
  .pxl-grid-masonry {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Contenedores Elementor: permitir wrap sin forzar 100% (respeta ajustes del builder) */
  .elementor-section .elementor-container {
    flex-wrap: wrap;
  }

  .elementor-top-section > .elementor-container > .elementor-column {
    min-width: 0;
  }

  /* Controles / botones */
  .btn,
  .button,
  input[type="submit"],
  .wp-block-button__link {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
  }

  /* Swiper / carousels: padding seguro */
  .pxl-swiper-slider,
  .pxl-carousel-inner {
    max-width: 100%;
    overflow: hidden;
  }

  /* Dots del carrusel: acercarse a las tarjetas en móvil */
  .pxl-swiper-pagination {
    margin-top: 8px !important;
  }
  .pxl-swiper-dots {
    margin-top: 0 !important;
  }
  .pxl-swiper-dots.style-2.pxl-swiper-pagination-bullets {
    margin-top: 0 !important;
  }
  .pxl-swiper-dots.style-1.pxl-swiper-pagination-bullets,
  .pxl-swiper-dots.style-3.pxl-swiper-pagination-bullets,
  .pxl-swiper-dots.style-4.pxl-swiper-pagination-bullets,
  .pxl-swiper-dots.style-5.pxl-swiper-pagination-bullets {
    margin-top: 0 !important;
  }

  .pxl-scroll-top {
    right: 16px !important;
    bottom: 16px !important;
  }

  /* Formularios */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  /* Very small phones (320–374px) */
  @media screen and (max-width: 374px) {
    #pxl-header-default .pxl-header-branding,
    #pxl-header-elementor .pxl-header-branding {
      margin: 10px 0;
    }

    .pxl-header-menu-scroll {
      padding: 36px 16px 24px;
    }

    .pxl-menu-primary li.menu-item > a {
      font-size: 14px;
      line-height: 42px;
    }
  }
}

/*--------------------------------------------------------------
# Tablet (768px – 1024px)
--------------------------------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .container {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }

  #pxl-header-default .pxl-header-branding img,
  #pxl-header-elementor .pxl-header-branding img {
    max-height: 52px;
  }

  .pxl-header-menu {
    width: min(380px, 70vw);
  }

  #pxl-page-title-default {
    padding: 100px 0;
  }

  #pxl-page-title-default .pxl-page-title {
    font-size: clamp(36px, 4.5vw, 48px);
  }

  /* En tablet, grillas del tema a 2 columnas cuando aplican clases xl/lg de 3–4 */
  .pxl-grid .pxl-grid-inner {
    display: flex;
    flex-wrap: wrap;
  }

  .elementor-section .elementor-container {
    flex-wrap: wrap;
  }

  .elementor-top-section > .elementor-container > .elementor-column {
    min-width: 0;
  }
}

/*--------------------------------------------------------------
# Landscape phones / short viewports
--------------------------------------------------------------*/
@media screen and (max-width: 1199px) and (max-height: 500px) {
  .pxl-header-menu {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .pxl-header-menu-scroll {
    padding-top: 28px;
    padding-bottom: 20px;
  }

  .pxl-logo-mobile {
    margin-bottom: 12px;
  }
}

/*--------------------------------------------------------------
# Desktop XL — restaurar alturas de logo del diseño
--------------------------------------------------------------*/
@media screen and (min-width: 1200px) {
  #pxl-header-default .pxl-header-branding img {
    max-height: 65px;
  }
}

/*--------------------------------------------------------------
# Elementor Header Glass (YestoMex) — móvil / tablet
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  /* Cápsula: menos padding, más espacio útil */
  .elementor-location-header .elementor-element-3f0073d {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    top: 12px !important;
    padding: 8px 14px !important;
    border-radius: 28px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  /* Logo: sin min-width rígido que empuja todo */
  .elementor-location-header .elementor-element-ab808b8 {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    max-width: 42% !important;
  }

  .elementor-location-header .elementor-element-6c24800 img {
    max-height: 36px !important;
    width: auto !important;
    max-width: 140px !important;
  }

  /* Menú / hamburguesa */
  .elementor-location-header .elementor-element-3090d68 {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 44px !important;
    justify-content: center !important;
    position: relative !important;
  }

  .elementor-location-header .elementor-element-b6e84bc,
  .elementor-location-header .elementor-element-b6e84bc .elementor-widget-container {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .elementor-location-header .elementor-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  /*
   * Dropdown: solo posicionamiento base.
   * NO tocar max-height/transform cerrados — Elementor usa:
   *   toggle:not(.active) + container { max-height:0; transform:scaleY(0) }
   *   toggle.active + container { max-height:var(--menu-height); transform:scaleY(1) }
   */
  .elementor-location-header .elementor-element-3090d68 .elementor-nav-menu--dropdown {
    position: absolute !important;
    top: calc(100% + 14px) !important;
    left: 50% !important;
    right: auto !important;
    width: min(420px, calc(100vw - 32px)) !important;
    margin-left: calc(min(420px, calc(100vw - 32px)) / -2) !important;
    z-index: 10000 !important;
  }

  /* Solo cuando está abierto: altura usable + scroll */
  .elementor-location-header .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown {
    max-height: min(70vh, 520px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transform: scaleY(1) !important;
  }

  /* Cerrado: respetar colapso de Elementor */
  .elementor-location-header .elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu--dropdown {
    max-height: 0 !important;
    overflow: hidden !important;
    transform: scaleY(0) !important;
    pointer-events: none !important;
  }

  /* Iconos login + carrito */
  .elementor-location-header .elementor-element-3978d3e {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
  }

  .elementor-location-header .elementor-element-eab9796,
  .elementor-location-header .elementor-element-8340985 {
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .elementor-location-header .elementor-element-8340985 {
    padding: 6px !important;
  }

  .elementor-location-header .elementor-menu-cart__toggle_button,
  .elementor-location-header .elementor-element-8340985 .elementor-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .elementor-location-header .elementor-menu-cart__toggle_button .elementor-button-icon,
  .elementor-location-header .elementor-menu-cart__toggle_button i,
  .elementor-location-header .elementor-element-8340985 .elementor-icon i {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  .elementor-location-header .elementor-menu-cart__toggle_button .elementor-button-text {
    display: none !important;
  }
}

/* Ocultar bolsa de carrito si no hay productos */
.elementor-location-header .elementor-element-eab9796:has(.elementor-button-icon-qty[data-counter="0"]),
.elementor-location-header .elementor-menu-cart--empty-indicator-hide:has(.elementor-button-icon-qty[data-counter="0"]) {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .elementor-location-header .elementor-element-3f0073d {
    width: calc(100% - 16px) !important;
    padding: 6px 10px !important;
    gap: 4px !important;
    border-radius: 22px !important;
  }

  .elementor-location-header .elementor-element-ab808b8 {
    max-width: 38% !important;
  }

  .elementor-location-header .elementor-element-6c24800 img {
    max-height: 30px !important;
    max-width: 110px !important;
  }

  .elementor-location-header .elementor-menu-toggle {
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
  }

  .elementor-location-header .elementor-element-3978d3e {
    gap: 2px !important;
  }

  .elementor-location-header .elementor-menu-cart__toggle_button,
  .elementor-location-header .elementor-element-8340985 .elementor-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  .elementor-location-header .elementor-menu-cart__toggle_button i,
  .elementor-location-header .elementor-element-8340985 .elementor-icon i {
    font-size: 18px !important;
  }

  .elementor-location-header .elementor-element-8340985 {
    padding: 4px !important;
  }

  .elementor-location-header .elementor-element-3090d68 .elementor-nav-menu--dropdown {
    width: calc(100vw - 24px) !important;
    margin-left: calc((100vw - 24px) / -2) !important;
    top: calc(100% + 10px) !important;
  }
}

@media screen and (max-width: 374px) {
  .elementor-location-header .elementor-element-6c24800 img {
    max-height: 26px !important;
    max-width: 88px !important;
  }

  .elementor-location-header .elementor-menu-cart__toggle_button,
  .elementor-location-header .elementor-element-8340985 .elementor-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
}

/*--------------------------------------------------------------
# CTA Explore Individuals / Business — móvil
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  /* Apilar las dos tarjetas en columna */
  .elementor-element-4b96dc3 {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: 100% !important;
    align-items: stretch !important;
  }

  .elementor-element-4b96dc3 > .e-con,
  .elementor-element-3a55cfc,
  .elementor-element-962b464 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  .elementor-element-72a18d3,
  .elementor-element-ab70810,
  .elementor-element-72a18d3 .pxl-button,
  .elementor-element-ab70810 .pxl-button {
    width: 100% !important;
    text-align: center !important;
  }

  .elementor-element-72a18d3 .pxl-button .btn,
  .elementor-element-ab70810 .pxl-button .btn {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 20px !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.35 !important;
    min-height: 56px !important;
  }

  .elementor-element-72a18d3 .pxl-button .btn .pxl--btn-text,
  .elementor-element-ab70810 .pxl-button .btn .pxl--btn-text {
    display: inline !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    flex: 1 1 auto !important;
    text-align: left !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  .elementor-element-72a18d3 .pxl-button .btn i,
  .elementor-element-ab70810 .pxl-button .btn i {
    flex: 0 0 auto !important;
    margin: 0 !important;
    font-size: 16px !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .elementor-element-72a18d3 .pxl-button .btn,
  .elementor-element-ab70810 .pxl-button .btn {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: normal !important;
    padding: 14px 18px !important;
    line-height: 1.3 !important;
    text-align: left !important;
  }

  .elementor-element-72a18d3 .pxl-button .btn .pxl--btn-text,
  .elementor-element-ab70810 .pxl-button .btn .pxl--btn-text {
    white-space: normal !important;
    font-size: 14px !important;
  }
}

/*--------------------------------------------------------------
# Footer YTM — centrado total en móviles
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .ytm-solid-fullwidth-footer {
    text-align: center !important;
  }

  .ytm-footer-container {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 0 20px 40px !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .ytm-footer-col,
  .ytm-footer-col.ytm-footer-brand {
    grid-column: auto !important;
    width: 100% !important;
    max-width: 420px !important;
    align-items: center !important;
    text-align: center !important;
  }

  .ytm-footer-logo-wrapper {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .ytm-footer-logo-img {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ytm-footer-tagline {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .ytm-footer-socials {
    justify-content: center !important;
    width: 100% !important;
  }

  .ytm-footer-title {
    text-align: center !important;
    width: 100% !important;
  }

  .ytm-footer-links {
    width: 100% !important;
  }

  .ytm-footer-links li {
    text-align: center !important;
  }

  .ytm-footer-links a:hover {
    transform: none !important;
  }

  .ytm-footer-contact-info {
    width: 100% !important;
  }

  .ytm-footer-contact-info li {
    justify-content: center !important;
    text-align: center !important;
    flex-wrap: wrap !important;
  }

  .ytm-footer-contact-info li.ytm-address-block {
    align-items: center !important;
    flex-direction: column !important;
  }

  .ytm-address-link {
    text-align: center !important;
  }

  .ytm-footer-bottom,
  .ytm-footer-bottom-container {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .ytm-legal-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px 18px !important;
  }
}

/*--------------------------------------------------------------
# Header: Services accordion dentro del dropdown móvil
# (Desktop ≥1025px sin cambios)
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  /* Submenús anidados: flujo normal, no capa flotante */
  .elementor-location-header .elementor-nav-menu--dropdown .menu-item-has-children {
    position: relative !important;
  }

  .elementor-location-header .elementor-nav-menu--dropdown .menu-item-has-children > .sub-menu,
  .elementor-location-header .elementor-nav-menu--dropdown ul.sub-menu.elementor-nav-menu--dropdown {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    animation: none !important;
    overflow: hidden !important;
    max-height: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    z-index: auto !important;
    transition: max-height 0.32s ease, padding 0.32s ease !important;
  }

  .elementor-location-header .elementor-nav-menu--dropdown .menu-item-has-children.ytm-submenu-open > .sub-menu {
    max-height: 480px !important;
    padding: 4px 0 10px !important;
  }

  .elementor-location-header .elementor-nav-menu--dropdown .menu-item-has-children > .sub-menu a {
    padding: 10px 28px 10px 40px !important;
    font-size: 14px !important;
    opacity: 0.9;
  }

  .elementor-location-header .elementor-nav-menu--dropdown .menu-item-has-children > a {
    cursor: pointer;
  }

  .elementor-location-header .elementor-nav-menu--dropdown .menu-item-has-children > a .sub-arrow {
    transition: transform 0.25s ease !important;
    margin-left: auto !important;
  }

  .elementor-location-header .elementor-nav-menu--dropdown .menu-item-has-children.ytm-submenu-open > a .sub-arrow {
    transform: rotate(180deg) !important;
  }
}

/*--------------------------------------------------------------
# Global Presence: mapa -> directorio de países en móvil
# (Desktop y tablet ≥768px sin cambios)
#
# En móvil el planisferio mide 375x188px: los países quedan
# ilegibles y 13 pares de banderas se solapan (Malasia/Singapur
# a 4.6px de distancia con marcadores de 24px). Además el
# tooltip sólo responde a mouseenter, evento que no existe en
# táctil, así que los nombres eran inalcanzables.
#
# Solución: la misma capa de marcadores se recompone como
# rejilla de tarjetas. El nombre sale de [data-location] vía
# content: attr(), de modo que no hace falta tocar el HTML del
# widget de Elementor guardado en la base de datos.
#
# Los selectores llevan 3 clases a propósito: el <style> del
# widget vive en el <body> y por tanto gana a este archivo del
# <head> a igualdad de especificidad.
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  /* El contenedor deja de ser lienzo de proporción fija */
  .yestomex-map-section .map-container {
    aspect-ratio: auto !important;
    height: auto !important;
    margin: 24px 0 !important;
    padding: 0 16px !important;
    /* Sin esto el padding se suma al 100% y desborda 32px */
    box-sizing: border-box !important;
  }

  /* El planisferio se conserva como banda ilustrativa sobre el
     directorio: sale del posicionamiento absoluto y entra en el
     flujo normal, así deja de ser lienzo y pasa a ser cabecera.
     Sube de opacidad porque a este tamaño el 25% no se percibe. */
  .yestomex-map-section .map-container .world-map-bg {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    opacity: 0.45 !important;
    margin: 0 0 20px !important;
  }

  /* El tooltip depende de hover; en táctil nunca se dispara */
  .yestomex-map-section .map-container .map-tooltip {
    display: none !important;
  }

  /* La capa absoluta pasa a rejilla fluida */
  .yestomex-map-section .map-container .map-markers-layer {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    display: grid !important;
    /* Columnas explícitas, no auto-fit: con auto-fit la rejilla
       encaja 4 columnas de 134px a 600px y "NETHERLANDS", al ser
       una sola palabra, se sale de la tarjeta sin dónde partir. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
  }

  /* A partir de 560px sí hay holgura para una tercera columna
     sin que quepa el nombre más largo justo al límite */
  @media (min-width: 560px) {
    .yestomex-map-section .map-container .map-markers-layer {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* Cada marcador pasa de punto de 24px a tarjeta legible.
     Al ser position:static, los top/left en línea se ignoran solos. */
  .yestomex-map-section .map-markers-layer .map-marker {
    position: static !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 8px 14px 8px 8px !important;
    background-color: #ffffff;
    border: 1px solid rgba(242, 141, 35, 0.22);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    /* No son enlaces: en móvil no deben aparentar ser pulsables */
    cursor: default !important;
  }

  .yestomex-map-section .map-markers-layer .map-marker .marker-flag-wrapper {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    box-shadow: none !important;
  }

  /* El nombre del país sale del atributo, sin tocar la base de datos */
  .yestomex-map-section .map-markers-layer .map-marker::after {
    content: attr(data-location);
    color: #1a1a1a;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    /* Red de seguridad: si mañana se añade un país de nombre
       largo, parte la palabra en vez de desbordar la tarjeta */
    min-width: 0;
    overflow-wrap: break-word;
  }

  /* Sin puntero real, el hover heredado sólo provoca saltos */
  .yestomex-map-section .map-markers-layer .map-marker:hover .marker-flag-wrapper {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Móviles estrechos (iPhone SE y similares): se recorta el
   respiro lateral para no perder la segunda columna */
@media screen and (max-width: 374px) {
  .yestomex-map-section .map-container {
    padding: 0 12px !important;
  }

  .yestomex-map-section .map-markers-layer .map-marker {
    gap: 9px !important;
    padding: 8px 10px 8px 8px !important;
  }

  .yestomex-map-section .map-markers-layer .map-marker .marker-flag-wrapper {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
  }

  .yestomex-map-section .map-markers-layer .map-marker::after {
    font-size: 11px;
    letter-spacing: 0.2px;
  }
}

/*--------------------------------------------------------------
# Checkout EAEL — fila del pedido apilada en móvil
  Especificidad doblada (.elementor-element-94d4e46 repetida) para
  ganarle a la regla de 767px que vive en el CSS de la página 11.
--------------------------------------------------------------*/
@media (max-width: 767px) {

  body .elementor-element-94d4e46.elementor-element-94d4e46 .ea-checkout-review-order-table,
  body .elementor-element-94d4e46.elementor-element-94d4e46 .ea-order-review-table {
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body .elementor-element-94d4e46.elementor-element-94d4e46 .ea-order-review-table .table-header {
    display: none !important;
  }

  body .elementor-element-94d4e46.elementor-element-94d4e46 .ea-order-review-table .table-row {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "name  name"
      "qty   price" !important;
    gap: 14px 12px !important;
    padding: 18px 4px !important;
    align-items: center;
  }

  body .elementor-element-94d4e46.elementor-element-94d4e46 .ea-order-review-table .table-col-1 {
    grid-area: name;
    text-align: left !important;
  }
  body .elementor-element-94d4e46.elementor-element-94d4e46 .ea-order-review-table .table-col-2 {
    grid-area: qty;
    justify-self: start !important;
    text-align: left !important;
  }
  body .elementor-element-94d4e46.elementor-element-94d4e46 .ea-order-review-table .table-col-3 {
    grid-area: price;
    justify-self: end !important;
    text-align: right !important;
    font-size: 18px !important;
  }

  body .elementor-element-94d4e46.elementor-element-94d4e46 .ea-order-review-table .table-row .table-col-2::after {
    margin-top: 4px;
    font-size: 9px;
  }

  body .elementor-element-94d4e46.elementor-element-94d4e46 .footer-content {
    min-width: 0 !important;
    width: 100%;
  }
}

/*--------------------------------------------------------------
# Checkout EAEL — recuperar ancho útil en móvil
  El widget trae padding:40px desde el editor de Elementor, que en
  375px deja solo 233px de contenido y provoca scroll horizontal.
--------------------------------------------------------------*/
@media (max-width: 767px) {

  body .elementor-element-94d4e46.elementor-element-94d4e46 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body .elementor-element-94d4e46.elementor-element-94d4e46 .ea-woo-checkout-order-review {
    padding: 12px 16px 22px !important;
  }

  body .elementor-element-94d4e46.elementor-element-94d4e46 .ea-order-review-table .table-col-1 {
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }

  body .elementor-element-94d4e46.elementor-element-94d4e46 .woocommerce-billing-fields,
  body .elementor-element-94d4e46.elementor-element-94d4e46 .woo-checkout-payment {
    padding: 24px 18px !important;
  }
}

@media (max-width: 767px) {
  body .elementor-element-94d4e46.elementor-element-94d4e46 .ea-order-review-table .table-row,
  body .elementor-element-94d4e46.elementor-element-94d4e46 .ea-order-review-table .table-header {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Móvil: flex en columna. Sin rejilla no hay ancho mínimo que desborde. */
@media (max-width: 767px) {
  body .elementor-element-94d4e46.elementor-element-94d4e46 .ea-order-review-table .table-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  body .elementor-element-94d4e46.elementor-element-94d4e46 .ea-order-review-table .table-col-2,
  body .elementor-element-94d4e46.elementor-element-94d4e46 .ea-order-review-table .table-col-3 {
    text-align: left !important;
    white-space: normal !important;
  }
}

/*--------------------------------------------------------------
# Barras de filtros — envolver en móvil
  Ya eran deslizables (overflow-x:auto), pero sin pista visual:
  en /blog/ se ven 315px de 870px. Envolviendo se ven todas.
--------------------------------------------------------------*/
@media (max-width: 767px) {
  body .ytm-clean-filter-bar,
  body .ytm-ind-filter-bar,
  body .ytm-corp-filter-bar {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 8px 10px !important;
    justify-content: flex-start !important;
  }
  body .ytm-clean-filter-wrapper,
  body .ytm-ind-filter-wrapper,
  body .ytm-corp-filter-wrapper {
    flex-wrap: wrap !important;
  }
}

/*--------------------------------------------------------------
# Optimización móvil — timeline y áreas táctiles
--------------------------------------------------------------*/
@media (max-width: 767px) {

  /* Timeline de About Us: el propio widget (HTML embebido en la
     página) ya trae su layout horizontal para móvil correcto —
     fila, sin wrap, overflow-x:auto, anchos de tarjeta, etc.
     Lo único roto es touch-action: pan-y en su <style>, que le
     dice al navegador que SOLO permita gestos verticales sobre el
     riel y por eso el swipe horizontal no responde en táctil.
     pan-x invierte eso: permite arrastrar el riel en horizontal. */
  body .ytm-horizontal-track {
    touch-action: pan-x !important;
  }

  /* Áreas táctiles: mínimo 44px de alto (guía de Apple, Google usa 48) */
  body .ytm-footer-links a,
  body .ytm-legal-links a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  body .ytm-footer-socials a {
    width: 44px !important;
    height: 44px !important;
  }
  body .ytm-btn-quick-buy,
  body .ytm-btn-details,
  body .ytm-corp-btn-details,
  body .ytm-filter-link,
  body .ytm-ind-filter-link,
  body .ytm-corp-filter-link {
    min-height: 44px !important;
  }
}

/*--------------------------------------------------------------
# Home — títulos de Blog y FAQs centrados
  Equivalente a poner Alineación: Centro en esos dos widgets
  de Elementor. Si lo haces en el editor, borra este bloque.
--------------------------------------------------------------*/
.elementor-element-e77e554.elementor-element-e77e554.elementor-element-e77e554.elementor-element-e77e554.elementor-element-e77e554.elementor-element-e77e554 h2,
.elementor-element-e77e554.elementor-element-e77e554.elementor-element-e77e554.elementor-element-e77e554.elementor-element-e77e554.elementor-element-e77e554 .elementor-heading-title,
.elementor-element-05e7734.elementor-element-05e7734.elementor-element-05e7734.elementor-element-05e7734.elementor-element-05e7734.elementor-element-05e7734 h2,
.elementor-element-05e7734.elementor-element-05e7734.elementor-element-05e7734.elementor-element-05e7734.elementor-element-05e7734.elementor-element-05e7734 .elementor-heading-title {
  text-align: center !important;
}

/*--------------------------------------------------------------
# Header móvil — estados reales del desplegable
  El CSS de Site Settings aplica padding:12px 0 y una animación
  con fill-mode:forwards al panel SIEMPRE, esté abierto o no.
  Con max-height:0 el padding no colapsa: quedan 26px de barra
  negra visible. Aquí se separan los dos estados de verdad.
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {

  .elementor-location-header .elementor-element-3090d68 .elementor-nav-menu--dropdown {
    animation: none !important;
    transition: max-height .32s cubic-bezier(.16,1,.3,1),
                opacity .24s ease,
                padding .32s ease !important;
    will-change: max-height, opacity;
  }

  /* CERRADO: colapso total, sin padding ni borde */
  .elementor-location-header .elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu--dropdown {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    opacity: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* ABIERTO */
  .elementor-location-header .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown {
    max-height: min(70vh, 520px) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    border-width: 1px !important;
    opacity: 1 !important;
    transform: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    pointer-events: auto !important;
  }
}

/*--------------------------------------------------------------
# Header móvil — apariencia del panel (reemplaza al bloque 5
# que vivía en Site Settings). Aquí solo color, forma y tipografía:
# el posicionamiento y los estados abierto/cerrado ya están arriba.
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {

  .elementor-location-header .elementor-element-3090d68 .elementor-nav-menu--dropdown {
    background: rgba(15, 15, 25, 0.88) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
  }

  /* Fondo de los items: transparente, el color lo pone el panel */
  .elementor-location-header .elementor-element-3090d68 .elementor-nav-menu--dropdown li,
  .elementor-location-header .elementor-element-3090d68 .elementor-nav-menu--dropdown .elementor-item,
  .elementor-location-header .elementor-element-3090d68 .elementor-nav-menu--dropdown .elementor-item:focus {
    background: transparent !important;
  }

  .elementor-location-header .elementor-element-3090d68 .elementor-nav-menu--dropdown .elementor-item {
    color: #ffffff !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    padding: 13px 24px !important;
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
    transition: background .22s ease, padding-left .22s ease !important;
  }

  /* Estado activo y hover: realce sutil, no bloque gris */
  .elementor-location-header .elementor-element-3090d68 .elementor-nav-menu--dropdown .elementor-item:hover,
  .elementor-location-header .elementor-element-3090d68 .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
  .elementor-location-header .elementor-element-3090d68 .elementor-nav-menu--dropdown .elementor-item.highlighted {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    padding-left: 30px !important;
  }

  /* Separadores finos entre items */
  .elementor-location-header .elementor-element-3090d68 .elementor-nav-menu--dropdown > ul > li + li > .elementor-item {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  }

  /* Submenú de Services: un escalón visual, no otra tarjeta */
  .elementor-location-header .elementor-element-3090d68 .elementor-nav-menu--dropdown .sub-menu .elementor-sub-item {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 10px 24px 10px 40px !important;
    background: transparent !important;
  }
  .elementor-location-header .elementor-element-3090d68 .elementor-nav-menu--dropdown .sub-menu .elementor-sub-item:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }

  /* Flecha de Services */
  .elementor-location-header .elementor-element-3090d68 .elementor-nav-menu--dropdown .sub-arrow {
    color: rgba(255, 255, 255, 0.6) !important;
    margin-left: auto !important;
  }
}

@media screen and (max-width: 1024px) {
  /* Ancho igual al de la cápsula del header (95%, máx 1400) */
  .elementor-location-header .elementor-element-3090d68 .elementor-nav-menu--dropdown {
    width: min(1400px, 95vw) !important;
    margin-left: calc(min(1400px, 95vw) / -2) !important;
    /* Más opaco: sobre fotos claras el texto del hero se transparentaba */
    background: rgba(15, 15, 25, 0.95) !important;
  }

  /* Sin subrayados ni indicadores heredados del menú de escritorio */
  .elementor-location-header .elementor-element-3090d68 .elementor-nav-menu--dropdown .elementor-item::before,
  .elementor-location-header .elementor-element-3090d68 .elementor-nav-menu--dropdown .elementor-item::after {
    display: none !important;
    content: none !important;
  }
}

@media screen and (max-width: 1024px) {
  /* El panel se posiciona contra el ancestro posicionado más cercano.
     Si el contenedor del menú (60% de ancho) está posicionado, el
     left:50% se calcula sobre ese box y el panel sale corrido.
     Neutralizándolo, la referencia pasa a ser la cápsula del header. */
  .elementor-location-header .elementor-element-3090d68 {
    position: static !important;
  }
}

@media screen and (max-width: 1024px) {
  /* Posición fija: deja de depender de qué ancestro esté posicionado.
     Mismos márgenes laterales que la cápsula (2.5vw a cada lado, que
     es lo que deja su width:95% centrado). */
  .elementor-location-header .elementor-element-3090d68 .elementor-nav-menu--dropdown {
    /* La cápsula (.elementor-element-3f0073d) tiene transform:
       translateX(-50%), y un ancestro transformado se convierte en el
       bloque contenedor incluso para position:fixed. Así que left/right
       ya se miden desde la cápsula: 0 y 0 la calcan exactamente. */
    position: fixed !important;
    top: calc(100% + 12px) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
  }
}

@media screen and (max-width: 1024px) {
  /* El panel vive DENTRO de la cápsula, que ya tiene backdrop-filter.
     Un backdrop-filter anidado no compone la página de fondo, sino el
     resultado del padre: no hace nada. Se quita y se usa un fondo
     sólido con el tono del header, que es lo que sí tapa. */
  .elementor-location-header .elementor-element-3090d68 .elementor-nav-menu--dropdown {
    background: #171720 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
  }
}

/*--------------------------------------------------------------
# Header móvil — panel fuera de la cápsula, con vidrio real
  theme.js lo mueve a .elementor-location-header (hermano de la
  cápsula). Ya no es descendiente, así que su backdrop-filter sí
  compone la página y se ve igual que el header.
  El estado abierto deja de depender del selector hermano: lo marca
  la clase .ytm-nav-open que sincroniza el JS.
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {

  .elementor-location-header > nav.elementor-nav-menu--dropdown[data-ytm-detached] {
    position: fixed !important;
    top: var(--ytm-nav-top, 102px) !important;
    left: 2.5vw !important;
    right: auto !important;
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 0 !important;
    z-index: 9998 !important;

    /* Mismo vidrio que la cápsula, pero más opaco: la cápsula solo
       lleva logo e iconos, el panel lleva ocho líneas de texto sobre
       fotos claras. 0.75 mantiene el efecto y salva la legibilidad. */
    background: rgba(20, 20, 30, 0.78) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 22px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;

    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    animation: none !important;
    transition: max-height .32s cubic-bezier(.16,1,.3,1),
                opacity .24s ease,
                padding .32s ease !important;
  }

  .elementor-location-header > nav.elementor-nav-menu--dropdown[data-ytm-detached].ytm-nav-open {
    max-height: min(70vh, 520px) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    opacity: 1 !important;
    overflow-y: auto !important;
    pointer-events: auto !important;
  }
}

/*--------------------------------------------------------------
# Header móvil — estilos de los items en el panel ya desanclado.
  Al sacarlo de .elementor-element-3090d68 las reglas anteriores
  dejaron de aplicar: aquí se replican con el selector nuevo.
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {

  .elementor-location-header > nav[data-ytm-detached] li,
  .elementor-location-header > nav[data-ytm-detached] .elementor-item,
  .elementor-location-header > nav[data-ytm-detached] .elementor-item:focus {
    background: transparent !important;
  }

  .elementor-location-header > nav[data-ytm-detached] .elementor-item {
    color: #ffffff !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    padding: 13px 24px !important;
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45) !important;
    transition: background .22s ease, padding-left .22s ease !important;
  }

  .elementor-location-header > nav[data-ytm-detached] .elementor-item:hover,
  .elementor-location-header > nav[data-ytm-detached] .elementor-item.elementor-item-active,
  .elementor-location-header > nav[data-ytm-detached] .elementor-item.highlighted {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
    padding-left: 30px !important;
  }

  .elementor-location-header > nav[data-ytm-detached] > ul > li + li > .elementor-item {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  }

  .elementor-location-header > nav[data-ytm-detached] .elementor-item::before,
  .elementor-location-header > nav[data-ytm-detached] .elementor-item::after {
    display: none !important;
    content: none !important;
  }

  /* Submenú de Services */
  .elementor-location-header > nav[data-ytm-detached] .sub-menu .elementor-sub-item {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 10px 24px 10px 40px !important;
    background: transparent !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45) !important;
  }
  .elementor-location-header > nav[data-ytm-detached] .sub-menu .elementor-sub-item:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  .elementor-location-header > nav[data-ytm-detached] .sub-arrow {
    color: rgba(255, 255, 255, 0.7) !important;
    margin-left: auto !important;
  }
}

/*--------------------------------------------------------------
# Header móvil — botón de menú: sin fondo y de trazo fino
  La casita del header es Font Awesome 5 Pro Light (weight 300).
  El toggle usaba la fuente 'eicons' de Elementor, más gruesa.
  Se le aplica la misma familia y peso para que el trazo coincida.
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {

  .elementor-location-header .elementor-menu-toggle,
  .elementor-location-header .elementor-menu-toggle:hover,
  .elementor-location-header .elementor-menu-toggle:focus,
  .elementor-location-header .elementor-menu-toggle.elementor-active {
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  .elementor-location-header .elementor-menu-toggle svg,
  .elementor-location-header .elementor-menu-toggle .e-font-icon-svg {
    display: none !important;
  }

  .elementor-location-header .elementor-menu-toggle i {
    font-family: "Font Awesome 5 Pro" !important;
    font-weight: 300 !important;
    font-size: 19px !important;
    line-height: 1 !important;
    color: #dbdbdb !important;
  }
  .elementor-location-header .elementor-menu-toggle__icon--open::before {
    content: "\f0c9" !important;
  }
  .elementor-location-header .elementor-menu-toggle__icon--close::before {
    content: "\f00d" !important;
  }
}

/*--------------------------------------------------------------
# Home — "We Guide You Every Step of the Way" centrado en móvil
  Clase repetida para superar las reglas de contenedor de Elementor
  que fuerzan text-align:left !important a sus títulos hijos.
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .elementor-element-6e3e14c.elementor-element-6e3e14c.elementor-element-6e3e14c.elementor-element-6e3e14c.elementor-element-6e3e14c.elementor-element-6e3e14c h2,
  .elementor-element-6e3e14c.elementor-element-6e3e14c.elementor-element-6e3e14c.elementor-element-6e3e14c.elementor-element-6e3e14c.elementor-element-6e3e14c .elementor-heading-title {
    text-align: center !important;
  }
}

/*--------------------------------------------------------------
# Header móvil — sin realce de fondo en los items
  En táctil el :hover persiste tras el toque y .elementor-item-active
  marca la página actual de forma permanente. El resultado eran
  bandas de fondo que no aportan nada. Se distingue solo por color.
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {

  .elementor-location-header > nav[data-ytm-detached] .elementor-item,
  .elementor-location-header > nav[data-ytm-detached] .elementor-item:hover,
  .elementor-location-header > nav[data-ytm-detached] .elementor-item:focus,
  .elementor-location-header > nav[data-ytm-detached] .elementor-item:active,
  .elementor-location-header > nav[data-ytm-detached] .elementor-item.elementor-item-active,
  .elementor-location-header > nav[data-ytm-detached] .elementor-item.highlighted,
  .elementor-location-header > nav[data-ytm-detached] .sub-menu .elementor-sub-item,
  .elementor-location-header > nav[data-ytm-detached] .sub-menu .elementor-sub-item:hover,
  .elementor-location-header > nav[data-ytm-detached] .sub-menu .elementor-sub-item.highlighted {
    background: transparent !important;
    background-color: transparent !important;
    padding-left: 24px !important;
  }

  /* La página actual se distingue solo por el color del texto */
  .elementor-location-header > nav[data-ytm-detached] .elementor-item.elementor-item-active {
    color: #F28D23 !important;
  }

  .elementor-location-header > nav[data-ytm-detached] .sub-menu .elementor-sub-item,
  .elementor-location-header > nav[data-ytm-detached] .sub-menu .elementor-sub-item.highlighted {
    padding-left: 40px !important;
  }
}

/*--------------------------------------------------------------
# Header móvil — marcar también subpáginas
  Los subitems usan .elementor-sub-item (no .elementor-item) y el
  padre solo se marca en el <li> con current-menu-ancestor.
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .elementor-location-header > nav[data-ytm-detached] .sub-menu .elementor-sub-item.elementor-item-active,
  .elementor-location-header > nav[data-ytm-detached] li.current-menu-item > a,
  .elementor-location-header > nav[data-ytm-detached] li.current-menu-ancestor > a.elementor-item,
  .elementor-location-header > nav[data-ytm-detached] li.current-menu-parent > a.elementor-item {
    color: #F28D23 !important;
  }
  .elementor-location-header > nav[data-ytm-detached] li.current-menu-ancestor > a.elementor-item .sub-arrow {
    color: #F28D23 !important;
  }
}

/*--------------------------------------------------------------
# Global Presence en móvil — v2: mapa con puntos, no directorio
#
# Reemplaza la conversión a rejilla de tarjetas. Motivo: el objetivo
# de la sección es credibilidad inmediata, no consultar países. Una
# lista de 16 tarjetas cuesta ~1,200px de scroll y pierde justo lo
# que hace bueno al diseño de escritorio: ver la distribución.
#
# Las banderas no sobreviven la reducción (8px = mancha), pero un
# punto sí se lee a cualquier escala. Se conserva el planisferio y
# las coordenadas originales; solo cambia el marcador.
#
# 3 clases en los selectores igual que el bloque anterior: el
# <style> del widget vive en el <body> y gana a este archivo del
# <head> a igualdad de especificidad.
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {

  /* El contenedor vuelve a ser lienzo de proporción fija */
  .yestomex-map-section .map-container {
    aspect-ratio: 2 / 1 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 16px 0 20px !important;
  }

  /* Planisferio como en escritorio, pero más visible: al 25% no se
     percibe a este tamaño. Se conserva width:100%/height:auto para
     que los porcentajes de los marcadores sigan calzando. */
  .yestomex-map-section .map-container .world-map-bg {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    opacity: 0.5 !important;
    margin: 0 !important;
  }

  /* La capa recupera el posicionamiento absoluto */
  .yestomex-map-section .map-container .map-markers-layer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }

  /* De tarjeta a punto */
  .yestomex-map-section .map-markers-layer .map-marker {
    position: absolute !important;
    width: 9px !important;
    height: 9px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    background-color: #F28D23 !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 3px rgba(242, 141, 35, 0.22) !important;
    transform: translate(-50%, -50%) !important;
  }

  .yestomex-map-section .map-markers-layer .map-marker .marker-flag-wrapper {
    display: none !important;
  }

  /* El nombre del país ya no se imprime: a esta escala no cabe y
     para credibilidad no aporta */
  .yestomex-map-section .map-markers-layer .map-marker::after {
    content: none !important;
    display: none !important;
  }

  /* La cifra es la carga de credibilidad: va después del mapa.
     La sección solo tiene un hijo (.map-container), así que el
     ::after cae justo debajo sin tocar el HTML del widget. */
  .yestomex-map-section::after {
    content: "+17 countries · 5 continents";
    display: block;
    text-align: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: #000000;
    margin: 4px 0 0;
  }
}

/*--------------------------------------------------------------
# Global Presence v3 — puntos separados + banderas + aire
#
# v2 dejó tres problemas: los puntos se encimaban (Malasia/Singapur
# a 4.6px), se perdía qué país era cada uno, y la cifra quedaba
# pegada al mapa.
--------------------------------------------------------------*/
.ytm-flag-strip { display: none; }

@media screen and (max-width: 767px) {

  /* Punto más pequeño y con anillo fino: menos área de colisión */
  .yestomex-map-section .map-markers-layer .map-marker {
    width: 7px !important;
    height: 7px !important;
    box-shadow: 0 0 0 2px rgba(242, 141, 35, 0.20) !important;
  }

  /* Separación manual de los tres pares que chocan. Son ajustes de
     1-2% : a esta escala el mapa es impresionista, no cartográfico. */
  .yestomex-map-section .map-marker[data-location="PORTUGAL"]   { left: 44.0% !important; }
  .yestomex-map-section .map-marker[data-location="SPAIN"]      { left: 48.3% !important; top: 38% !important; }
  .yestomex-map-section .map-marker[data-location="NETHERLANDS"]{ left: 48.4% !important; top: 26.5% !important; }
  .yestomex-map-section .map-marker[data-location="GERMANY"]    { left: 52.6% !important; top: 28% !important; }
  .yestomex-map-section .map-marker[data-location="MALAYSIA"]   { left: 77.0% !important; top: 53% !important; }
  .yestomex-map-section .map-marker[data-location="SINGAPORE"]  { left: 80.6% !important; top: 59% !important; }

  /* Tira de banderas: recupera la identidad que el punto no da */
  .ytm-flag-strip {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin: 16px 16px 0 !important;
  }
  .ytm-flag-strip img {
    width: 27px !important;
    height: 27px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    box-shadow: 0 0 0 1.5px rgba(242, 141, 35, 0.35) !important;
    display: block !important;
  }

  /* La cifra necesitaba respirar */
  .yestomex-map-section::after {
    margin-top: 18px !important;
    font-size: 18px !important;
  }
}

/*--------------------------------------------------------------
# Global Presence v4 — banderas y cifra arriba del mapa
  La sección pasa a columna flex y se reordena con `order`. El
  ::after participa como ítem flex, así que puede colocarse entre
  la tira y el mapa sin tocar el JS ni el HTML del widget.
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {

  .yestomex-map-section {
    display: flex !important;
    flex-direction: column !important;
  }

  /* 1º las banderas */
  .ytm-flag-strip {
    order: 1 !important;
    margin: 4px 16px 0 !important;
  }

  /* 2º la cifra */
  .yestomex-map-section::after {
    order: 2 !important;
    margin: 14px 0 0 !important;
  }

  /* 3º el mapa, como respaldo visual de lo que se acaba de leer */
  .yestomex-map-section .map-container {
    order: 3 !important;
    margin: 18px 0 0 !important;
  }
}

/*--------------------------------------------------------------
# Services — hero centrado y filtros en rejilla
#
# Los botones de filtro medían 24px de ancho (el del icono) y la
# etiqueta se desbordaba invadiendo al vecino. Con flex-wrap cada
# uno se encogía a su contenido; con grid cada celda tiene ancho
# propio y la etiqueta parte dentro de su caja.
#
# Se muestran los 8: son la navegación principal del catálogo. En
# scroll lateral, "Smart Deals" quedaría fuera de vista.
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {

  /* Hero de Individuals: título centrado como su subtítulo */
  .elementor-element-d69d74d.elementor-element-d69d74d.elementor-element-d69d74d.elementor-element-d69d74d.elementor-element-d69d74d.elementor-element-d69d74d h1,
  .elementor-element-d69d74d.elementor-element-d69d74d.elementor-element-d69d74d.elementor-element-d69d74d.elementor-element-d69d74d.elementor-element-d69d74d .elementor-heading-title {
    text-align: center !important;
  }

  /* Rejilla 4x2: ocho filtros, dos filas parejas */
  .ytm-ind-filter-bar,
  .ytm-corp-filter-bar {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px 4px !important;
    align-items: start !important;
    overflow: visible !important;
  }

  .ytm-ind-filter-link,
  .ytm-corp-filter-link {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    padding: 4px 2px !important;
    text-align: center !important;
  }

  /* La etiqueta ocupa su celda y parte si hace falta */
  .ytm-ind-filter-link span,
  .ytm-corp-filter-link span {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.2px !important;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .ytm-ind-filter-link svg,
  .ytm-corp-filter-link svg {
    flex: 0 0 auto !important;
  }
}

/* Pantallas muy estrechas: tres columnas para que quepa la palabra */
@media screen and (max-width: 359px) {
  .ytm-ind-filter-bar,
  .ytm-corp-filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/*--------------------------------------------------------------
# Services — indicador de filtro activo en rejilla
  El subrayado del botón activo funciona en una fila (se lee como
  pestaña), pero en rejilla cae sobre el icono de la fila de abajo.
  Se sustituye por color: naranja de marca en icono y etiqueta.
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {

  .ytm-ind-filter-link,
  .ytm-ind-filter-link.active,
  .ytm-corp-filter-link,
  .ytm-corp-filter-link.active {
    border-bottom: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }
  .ytm-ind-filter-link.active::after,
  .ytm-ind-filter-link.active::before,
  .ytm-corp-filter-link.active::after,
  .ytm-corp-filter-link.active::before {
    display: none !important;
    content: none !important;
  }

  /* El activo se distingue por color y peso */
  .ytm-ind-filter-link.active,
  .ytm-ind-filter-link.active span,
  .ytm-corp-filter-link.active,
  .ytm-corp-filter-link.active span {
    color: #F28D23 !important;
    font-weight: 700 !important;
  }
  .ytm-ind-filter-link.active svg,
  .ytm-corp-filter-link.active svg {
    stroke: #F28D23 !important;
    color: #F28D23 !important;
  }
}

/*--------------------------------------------------------------
# CORRECCIÓN: el panel desanclado no debe verse en escritorio
  ytmDetachMobileNav() mueve el <nav> fuera de la cápsula en
  cualquier ancho, pero sus estilos de colapso viven en la media
  query de móvil. En escritorio quedaba suelto y visible.
  Elementor usa .elementor-nav-menu--main para escritorio, así que
  ocultar el dropdown aquí es su comportamiento normal.
--------------------------------------------------------------*/
@media screen and (min-width: 1025px) {
  .elementor-location-header > nav[data-ytm-detached],
  .elementor-location-header nav.elementor-nav-menu--dropdown {
    display: none !important;
  }
  .ytm-flag-strip { display: none !important; }
}

/*--------------------------------------------------------------
# Services — filtros homologados entre Individuals y Business
  Flex con celdas de 25%: mismas medidas, misma tipografía y mismo
  espaciado en ambas páginas. Con 5 filtros el quinto queda
  centrado en su fila en vez de huérfano a la izquierda.
  Se quita hyphens/anywhere: partía "CORPO-RATE MO-BILITY".
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {

  .ytm-ind-filter-bar,
  .ytm-corp-filter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 18px 4px !important;
    grid-template-columns: none !important;
  }

  .ytm-ind-filter-link,
  .ytm-corp-filter-link {
    flex: 0 0 calc(25% - 3px) !important;
    max-width: calc(25% - 3px) !important;
    width: auto !important;
  }

  /* Parte entre palabras, nunca dentro de una */
  .ytm-ind-filter-link span,
  .ytm-corp-filter-link span {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
  }
}

/*--------------------------------------------------------------
# Escritorio — submenú del header con el estilo de la cápsula
  Al retirar el bloque 5 de Site Settings, el desplegable de
  Services volvió al blanco por defecto de Elementor.
  Va opaco: al vivir dentro de la cápsula (que ya tiene
  backdrop-filter) un blur anidado no compondría la página.
--------------------------------------------------------------*/
@media screen and (min-width: 1025px) {

  .elementor-location-header ul.sub-menu {
    background: rgba(20, 20, 30, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35) !important;
    padding: 8px 0 !important;
    margin-top: 14px !important;
    overflow: hidden !important;
  }

  .elementor-location-header ul.sub-menu li {
    background: transparent !important;
  }

  .elementor-location-header ul.sub-menu a,
  .elementor-location-header ul.sub-menu .elementor-sub-item {
    color: #ffffff !important;
    background: transparent !important;
    padding: 11px 24px !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    transition: background .22s ease, padding-left .22s ease !important;
  }

  .elementor-location-header ul.sub-menu a:hover,
  .elementor-location-header ul.sub-menu .elementor-sub-item:hover,
  .elementor-location-header ul.sub-menu .elementor-sub-item.highlighted {
    background: rgba(255, 255, 255, 0.09) !important;
    color: #ffffff !important;
    padding-left: 30px !important;
  }

  .elementor-location-header ul.sub-menu .elementor-sub-item.elementor-item-active,
  .elementor-location-header ul.sub-menu li.current-menu-item > a {
    color: #F28D23 !important;
  }
}

/*--------------------------------------------------------------
# Filtros — misma rejilla en Individuals y Business (especificidad)
  El <style> del widget vive en el <body> y gana a este archivo a
  igualdad de especificidad. Se repite la clase para superarlo.
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {

  .ytm-ind-filter-bar.ytm-ind-filter-bar.ytm-ind-filter-bar,
  .ytm-corp-filter-bar.ytm-corp-filter-bar.ytm-corp-filter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 18px 4px !important;
    grid-template-columns: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .ytm-ind-filter-bar.ytm-ind-filter-bar .ytm-ind-filter-link,
  .ytm-corp-filter-bar.ytm-corp-filter-bar .ytm-corp-filter-link {
    flex: 0 0 calc(25% - 3px) !important;
    max-width: calc(25% - 3px) !important;
    min-width: 0 !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    padding: 4px 2px !important;
    text-align: center !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  .ytm-ind-filter-bar.ytm-ind-filter-bar .ytm-ind-filter-link span,
  .ytm-corp-filter-bar.ytm-corp-filter-bar .ytm-corp-filter-link span {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.2px !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
  }
}

@media screen and (max-width: 767px) {
  /* El ancho del botón necesita más peso: la regla del widget usa
     3 clases, así que aquí van 4 en el propio botón. */
  .ytm-ind-filter-link.ytm-ind-filter-link.ytm-ind-filter-link.ytm-ind-filter-link,
  .ytm-corp-filter-link.ytm-corp-filter-link.ytm-corp-filter-link.ytm-corp-filter-link {
    flex: 0 0 calc(25% - 3px) !important;
    max-width: calc(25% - 3px) !important;
    min-width: calc(25% - 3px) !important;
    width: calc(25% - 3px) !important;
    box-sizing: border-box !important;
  }
}

/*--------------------------------------------------------------
# Filtros — la barra debe ocupar todo el ancho disponible
  El wrapper es flex, así que la barra era un ítem que se encogía
  a su contenido (208px). El 25% de los botones se calculaba sobre
  ese ancho reducido y salían de 49px en vez de ~78px.
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .ytm-ind-filter-wrapper.ytm-ind-filter-wrapper,
  .ytm-corp-filter-wrapper.ytm-corp-filter-wrapper {
    display: block !important;
    width: 100% !important;
  }
  .ytm-ind-filter-bar.ytm-ind-filter-bar.ytm-ind-filter-bar,
  .ytm-corp-filter-bar.ytm-corp-filter-bar.ytm-corp-filter-bar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/*--------------------------------------------------------------
# Filtros — el widget contenedor debe ocupar el ancho completo
  El widget de Elementor que aloja el shortcode es un ítem flex
  que se encogía a su contenido (249px de 355 disponibles). Todo
  lo de dentro heredaba ese ancho, y por eso el 25% de los botones
  daba 49px. Se corrige en el widget con :has().
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .elementor-widget:has(.ytm-ind-filter-bar),
  .elementor-widget:has(.ytm-corp-filter-bar),
  .elementor-element:has(> .elementor-widget-container > .elementor-shortcode > .ytm-ind-filter-wrapper),
  .elementor-element:has(> .elementor-widget-container > .elementor-shortcode > .ytm-corp-filter-wrapper) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    align-self: stretch !important;
  }
}

@media screen and (max-width: 767px) {
  /* Filtro activo en naranja. Clase repetida: la regla del widget
     usa 2 clases y se declara después que este archivo. */
  .ytm-ind-filter-link.ytm-ind-filter-link.ytm-ind-filter-link.active,
  .ytm-ind-filter-link.ytm-ind-filter-link.ytm-ind-filter-link.active span,
  .ytm-corp-filter-link.ytm-corp-filter-link.ytm-corp-filter-link.active,
  .ytm-corp-filter-link.ytm-corp-filter-link.ytm-corp-filter-link.active span {
    color: #F28D23 !important;
    font-weight: 700 !important;
  }
  .ytm-ind-filter-link.ytm-ind-filter-link.ytm-ind-filter-link.active svg,
  .ytm-corp-filter-link.ytm-corp-filter-link.ytm-corp-filter-link.active svg {
    stroke: #F28D23 !important;
    color: #F28D23 !important;
  }
  /* Y la línea indicadora, que en rejilla cae sobre la fila de abajo */
  .ytm-ind-filter-link.ytm-ind-filter-link.ytm-ind-filter-link::after,
  .ytm-corp-filter-link.ytm-corp-filter-link.ytm-corp-filter-link::after {
    display: none !important;
    content: none !important;
  }
}

/*--------------------------------------------------------------
# Filtros — indicador de selección en gris, no en naranja
  El naranja es el distintivo de Smart Deals: usarlo también para
  el activo le resta protagonismo. Se recupera la línea gris.
  Va como bloque en flujo dentro del botón (que es flex column),
  no posicionada con bottom negativo: así ocupa su propio alto y
  no puede invadir la fila de abajo, que era el problema en rejilla.
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {

  /* Se anula el naranja que había puesto en el activo */
  .ytm-ind-filter-link.ytm-ind-filter-link.ytm-ind-filter-link.active,
  .ytm-ind-filter-link.ytm-ind-filter-link.ytm-ind-filter-link.active span,
  .ytm-corp-filter-link.ytm-corp-filter-link.ytm-corp-filter-link.active,
  .ytm-corp-filter-link.ytm-corp-filter-link.ytm-corp-filter-link.active span {
    color: #1a1a1a !important;
    font-weight: 700 !important;
  }
  .ytm-ind-filter-link.ytm-ind-filter-link.ytm-ind-filter-link.active svg,
  .ytm-corp-filter-link.ytm-corp-filter-link.ytm-corp-filter-link.active svg {
    stroke: #1a1a1a !important;
    color: #1a1a1a !important;
  }

  /* Smart Deals conserva su naranja aunque esté activo */
  .ytm-ind-filter-link.ytm-filter-smart-deals.ytm-filter-smart-deals svg,
  .ytm-ind-filter-link.ytm-filter-smart-deals.ytm-filter-smart-deals.active svg,
  .ytm-corp-filter-link.ytm-filter-smart-deals.ytm-filter-smart-deals svg,
  .ytm-corp-filter-link.ytm-filter-smart-deals.ytm-filter-smart-deals.active svg {
    stroke: #F28D23 !important;
    color: #F28D23 !important;
  }

  /* Línea gris de selección, en flujo */
  .ytm-ind-filter-link.ytm-ind-filter-link.ytm-ind-filter-link.active::after,
  .ytm-corp-filter-link.ytm-corp-filter-link.ytm-corp-filter-link.active::after {
    content: '' !important;
    display: block !important;
    position: static !important;
    width: 26px !important;
    height: 2px !important;
    margin: 5px auto 0 !important;
    background-color: #4B5563 !important;
    border-radius: 2px !important;
    bottom: auto !important;
    left: auto !important;
  }
}

/*--------------------------------------------------------------
# Business — subtítulo centrado y filtros en 3+2
  Los iconos (22px) y el texto (9.5px) ya eran idénticos a los de
  Individuals; se veían menores porque los botones medían 49px y
  las etiquetas partían en dos líneas. Con 3 columnas de ~103px
  quedan al mismo tamaño visual y sin huérfano abajo.
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {

  /* Subtítulo del hero, centrado como el título */
  .elementor-element-3d3b286.elementor-element-3d3b286.elementor-element-3d3b286.elementor-element-3d3b286.elementor-element-3d3b286.elementor-element-3d3b286,
  .elementor-element-3d3b286.elementor-element-3d3b286.elementor-element-3d3b286.elementor-element-3d3b286.elementor-element-3d3b286.elementor-element-3d3b286 p,
  .elementor-element-3d3b286.elementor-element-3d3b286.elementor-element-3d3b286.elementor-element-3d3b286.elementor-element-3d3b286.elementor-element-3d3b286 .elementor-widget-container {
    text-align: center !important;
  }

  /* Business: 5 filtros en 3 + 2 */
  .ytm-corp-filter-link.ytm-corp-filter-link.ytm-corp-filter-link.ytm-corp-filter-link {
    flex: 0 0 calc(33.333% - 3px) !important;
    max-width: calc(33.333% - 3px) !important;
    min-width: calc(33.333% - 3px) !important;
    width: calc(33.333% - 3px) !important;
  }

  /* Mismo tamaño de icono en ambas páginas, por si acaso */
  .ytm-ind-filter-link.ytm-ind-filter-link svg,
  .ytm-corp-filter-link.ytm-corp-filter-link svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/*--------------------------------------------------------------
# Contact Us — formulario responsivo
#
# El form medía 29px de ancho en móvil. Cadena del problema:
#   ecd8e1f (flex)  281px  -> 5556fa7 (flex) 131px
#   -> 3339c70 (padding 40px) 111px -> form 29px
# Contenedores flex que se encogen a su contenido, y un padding
# de 40px sobre una caja ya estrecha.
#
# Se usa :has() para no depender de los IDs de esta página: sirve
# para cualquier formulario de Elementor que caiga en lo mismo.
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {

  /* Todo ancestro que contenga un formulario ocupa el ancho */
  .elementor-element:has(.elementor-form) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    align-self: stretch !important;
  }

  /* La tarjeta del formulario: padding proporcional a la pantalla */
  .elementor-element:has(> .elementor-widget-container .elementor-form) {
    padding: 26px 20px !important;
    box-sizing: border-box !important;
  }

  /* El formulario y sus campos, a una columna */
  .elementor-form,
  .elementor-form .elementor-form-fields-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }

  .elementor-form .elementor-field-group {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
  }

  .elementor-form .elementor-field,
  .elementor-form .elementor-field-textual,
  .elementor-form input.elementor-field,
  .elementor-form textarea.elementor-field,
  .elementor-form select.elementor-field {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .elementor-form textarea.elementor-field {
    min-height: 130px !important;
  }

  /* Botón a lo ancho: en móvil un botón corto se toca peor */
  .elementor-form .elementor-field-type-submit {
    margin-bottom: 0 !important;
  }
  .elementor-form .elementor-field-type-submit button,
  .elementor-form button[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
  }
}

/*--------------------------------------------------------------
# Contact Us — corrección: apilar la fila y ajustar el padding
  El contenedor del formulario es una fila flex de dos columnas
  que seguía lado a lado en móvil, así que el form se quedaba con
  la mitad. Y la tarjeta mantenía padding:40px porque el form es
  hijo directo suyo, sin .elementor-widget-container en medio.
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {

  /* Las filas que contienen el formulario se apilan */
  .elementor-element:has(.elementor-form) {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }

  /* Tarjeta contenedora directa del form */
  .elementor-element:has(> .elementor-form) {
    padding: 26px 20px !important;
    box-sizing: border-box !important;
  }
}

/*--------------------------------------------------------------
# Contact — título y descripción del bloque del formulario
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .elementor-element-aafa897.elementor-element-aafa897.elementor-element-aafa897.elementor-element-aafa897.elementor-element-aafa897.elementor-element-aafa897,
  .elementor-element-aafa897.elementor-element-aafa897.elementor-element-aafa897.elementor-element-aafa897.elementor-element-aafa897.elementor-element-aafa897 h2,
  .elementor-element-aafa897.elementor-element-aafa897.elementor-element-aafa897.elementor-element-aafa897.elementor-element-aafa897.elementor-element-aafa897 .elementor-heading-title,
  .elementor-element-b9142d0.elementor-element-b9142d0.elementor-element-b9142d0.elementor-element-b9142d0.elementor-element-b9142d0.elementor-element-b9142d0,
  .elementor-element-b9142d0.elementor-element-b9142d0.elementor-element-b9142d0.elementor-element-b9142d0.elementor-element-b9142d0.elementor-element-b9142d0 p,
  .elementor-element-b9142d0.elementor-element-b9142d0.elementor-element-b9142d0.elementor-element-b9142d0.elementor-element-b9142d0.elementor-element-b9142d0 .elementor-widget-container {
    text-align: center !important;
  }
}

/*--------------------------------------------------------------
# GUTTER ÚNICO EN MÓVIL
#
# Antes cada nivel sumaba su propio padding: los bloques de primer
# nivel traen 10px, los anidados otros 10px y las tarjetas 20-40px.
# Resultado: la cápsula del header a 8px, el hero a 20, la barra de
# filtros a 30 y el mapa a 0.
#
# Aquí se fija un único margen lateral y se anula el de los
# contenedores anidados, que es el que producía la acumulación.
# El header queda fuera a propósito: su cápsula flotante usa 2.5vw
# por diseño y el panel del menú está alineado a ella.
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {

  :root { --ytm-gutter: 20px; }

  /* Contenedores de primer nivel del contenido de la página */
  body .elementor:not(.elementor-location-header):not(.elementor-location-footer) > .elementor-element {
    padding-left: var(--ytm-gutter) !important;
    padding-right: var(--ytm-gutter) !important;
    box-sizing: border-box !important;
  }

  /* Anidados: sin margen lateral propio, para que no se acumule */
  body .elementor:not(.elementor-location-header):not(.elementor-location-footer) > .elementor-element .e-con,
  body .elementor:not(.elementor-location-header):not(.elementor-location-footer) > .elementor-element .elementor-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/*--------------------------------------------------------------
# Quick Buy — el modal abría invisible en las páginas de detalle
#
# En "Related Services" (páginas de producto) el bloque CSS del
# modal se imprime duplicado, y la segunda copia de la regla base
# (.ytm-quick-modal-overlay { opacity: 0 }) pisa al estado activo.
# El modal recibía la clase .active y capturaba eventos, pero se
# quedaba en opacity:0: el usuario pulsaba y no veía nada, con una
# capa activa encima de la página.
#
# Sin media query: el fallo es de la plantilla de producto, no del
# ancho de pantalla.
--------------------------------------------------------------*/
.ytm-quick-modal-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.ytm-quick-modal-overlay.active .ytm-quick-modal-window {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

/*--------------------------------------------------------------
# Quick Buy — el formulario del modal se ocultaba en las páginas
# de producto
#
# El form del modal lleva class="cart", la misma que usa el
# formulario de compra por defecto de WooCommerce. En las páginas
# de producto hay una regla que oculta form.cart (porque se usa un
# flujo propio) y arrastraba también al del modal: se veía el
# título y debajo un hueco blanco, sin selector de ciudad ni botón.
# En el listado no existe esa regla, por eso ahí sí funcionaba.
--------------------------------------------------------------*/
.ytm-quick-modal-overlay form.cart,
.ytm-quick-modal-window form.cart,
.ytm-quick-modal-content form.cart {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  opacity: 1 !important;
}
.ytm-quick-modal-overlay form.cart .ytm-quick-selector {
  display: flex !important;
}
.ytm-quick-modal-overlay form.cart .ytm-modal-submit {
  display: flex !important;
}

/*--------------------------------------------------------------
# Quick Buy — overlays inactivos fuera del render
#
# El CSS original los dejaba en display:flex con opacity:0 y
# pointer-events:none. Funcionaba mientras su contenido estaba
# oculto, pero al restaurar los formularios quedaron tres capas
# fijas a pantalla completa con backdrop-filter recomponiéndose
# en cada scroll: parpadeo y contenido que desaparece.
#
# Con display:none el navegador no las pinta ni las compone.
--------------------------------------------------------------*/
.ytm-quick-modal-overlay:not(.active) {
  display: none !important;
}
.ytm-quick-modal-overlay.active {
  display: flex !important;
}

/*--------------------------------------------------------------
# Checkout — tarjetas homologadas
#
# Había cuatro radios distintos: resumen 5px, fila del producto y
# caja del total 3px, Billing 16px y Payment 24px. Además la
# tarjeta del resumen había perdido su fondo blanco, así que la
# fila del producto —que sí lo tenía— se leía como un rectángulo
# suelto en vez de formar parte de la tarjeta.
#
# Se unifica en el lenguaje de Billing: blanco, radio 16, borde
# gris claro y la misma sombra.
--------------------------------------------------------------*/
.elementor-element-94d4e46 .ea-woo-checkout-order-review,
.elementor-element-94d4e46 .woocommerce-billing-fields,
.elementor-element-94d4e46 .woo-checkout-payment {
  background-color: #ffffff !important;
  border: 1px solid var(--ytm-secondary, #E5E7EB) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .10) !important;
}

/* La fila del producto vive dentro de la tarjeta: sin caja propia */
.elementor-element-94d4e46 .ea-order-review-table .table-row,
.elementor-element-94d4e46 .ea-order-review-table .table-header {
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* La caja del total mantiene su acento naranja, con radio coherente */
.elementor-element-94d4e46 .footer-content {
  border-radius: 12px !important;
  background-color: rgba(242, 141, 35, .05) !important;
  border: 1px dashed rgba(242, 141, 35, .4) !important;
  box-shadow: none !important;
}

/*--------------------------------------------------------------
# Checkout — hueco entre el header y "Order Details"
#
# El contenedor traía margin-top:200px para librar el header
# flotante, más 10px de padding propio y 40px del widget: el
# título caía en el píxel 250 cuando el header termina en el 98.
# Sobraban ~100px y el título quedaba flotando solo.
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .elementor-element-3b8ccbc {
    margin-top: 112px !important;
  }
  .elementor-element-94d4e46 {
    padding-top: 8px !important;
    padding-bottom: 40px !important;
  }
}

/*--------------------------------------------------------------
# Header móvil — fuera la sombra del texto
  Se añadió cuando el panel era translúcido (0.55) y el texto
  competía con la foto de fondo. Con 0.78 ya no hace falta y
  ensucia la tipografía.
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .elementor-location-header > nav[data-ytm-detached] .elementor-item,
  .elementor-location-header > nav[data-ytm-detached] .sub-menu .elementor-sub-item {
    text-shadow: none !important;
  }
}

/*--------------------------------------------------------------
# Tarjetas de servicio — precios y botones a todo el ancho
#
# .ytm-ind-pricing y .ytm-ind-btn-group traen ancho fijo de 280px,
# heredado de la columna de acciones del diseño de escritorio.
# Apilados en móvil dejan un hueco a la derecha proporcional al
# ancho de la tarjeta: 44px en el listado (pasa desapercibido) y
# 84px en Related Services, donde la tarjeta es más ancha y se
# lee como descentrado.
#
# Estirándolos, ambas vistas quedan idénticas sea cual sea el
# ancho de la tarjeta.
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {

  .ytm-ind-pricing,
  .ytm-ind-btn-group,
  .ytm-corp-pricing,
  .ytm-corp-btn-group {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Las dos mitades reparten el espacio por igual */
  .ytm-ind-pricing > *,
  .ytm-ind-btn-group > *,
  .ytm-corp-pricing > *,
  .ytm-corp-btn-group > * {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/*--------------------------------------------------------------
# Listado de servicios — mismo ancho de tarjeta que Related Services
  .ytm-ind-list-container añadía padding:0 20px propio, encima del
  gutter de 20px de la página: las tarjetas quedaban a 40px del
  borde (350px de ancho) mientras que en Related Services quedan
  a 20px (390px). Se elimina el padding duplicado.
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .ytm-ind-list-container,
  .ytm-corp-list-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/*--------------------------------------------------------------
# Blog — hero con ancho real y filtros como los de servicios
#
# El título estaba limitado a 273px y el subtítulo a 195px de los
# 430 disponibles: se leían comprimidos al centro, con el título
# partido en cuatro líneas cortas.
#
# Los filtros son solo texto (sin icono) a propósito: las
# categorías del blog son conceptuales y un icono sería arbitrario.
# Comparten con servicios la tipografía en versalitas, el color y
# la línea gris de selección.
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {

  /* Hero: usar todo el ancho disponible */
  .elementor-element-bf9cb6f.elementor-element-bf9cb6f.elementor-element-bf9cb6f.elementor-element-bf9cb6f,
  .elementor-element-f041433.elementor-element-f041433.elementor-element-f041433.elementor-element-f041433 {
    width: 100% !important;
    max-width: 100% !important;
    /* Ojo: el contenedor es flex en COLUMNA, así que flex-basis se
       aplica a la altura. Con 1 1 100% cada bloque se estiraba a la
       mitad del hero y el texto flotaba en su centro. */
    flex: 0 0 auto !important;
    align-self: stretch !important;
  }
  .elementor-element-bf9cb6f.elementor-element-bf9cb6f.elementor-element-bf9cb6f h1,
  .elementor-element-bf9cb6f.elementor-element-bf9cb6f.elementor-element-bf9cb6f .elementor-heading-title,
  .elementor-element-f041433.elementor-element-f041433.elementor-element-f041433 p,
  .elementor-element-f041433.elementor-element-f041433.elementor-element-f041433 .elementor-widget-container {
    width: auto !important;
    max-width: none !important;
    text-align: center !important;
  }

  /* Filtros: fuera el padding duplicado, igual que en el listado */
  .ytm-clean-filter-wrapper.ytm-clean-filter-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
    width: 100% !important;
  }

  .ytm-clean-filter-bar.ytm-clean-filter-bar.ytm-clean-filter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px 20px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  /* Misma tipografía y color que los filtros de servicios */
  .ytm-filter-link.ytm-filter-link.ytm-filter-link {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: .6px !important;
    text-transform: uppercase !important;
    color: #555555 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 8px 2px !important;
    min-height: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  /* Fuera la línea naranja flotante heredada */
  .ytm-filter-link.ytm-filter-link.ytm-filter-link::after {
    display: none !important;
    content: none !important;
  }

  /* Activo: mismo lenguaje que servicios — texto oscuro y línea gris */
  .ytm-filter-link.ytm-filter-link.ytm-filter-link.active {
    color: #1a1a1a !important;
    font-weight: 700 !important;
  }
  .ytm-filter-link.ytm-filter-link.ytm-filter-link.active::after {
    display: block !important;
    content: '' !important;
    position: static !important;
    width: 22px !important;
    height: 2px !important;
    margin: 4px auto 0 !important;
    background-color: #4B5563 !important;
    border-radius: 2px !important;
  }
}

/*--------------------------------------------------------------
# Blog — composición del hero
#
# Título y subtítulo son ítems flex que se repartían la altura del
# contenedor: 205px cada uno para ~90px de texto. El texto quedaba
# centrado en su mitad y entre ambos aparecía un vacío de 300px,
# con el subtítulo cayendo justo sobre los pasaportes.
#
# Se colapsan a su contenido, se agrupan con un gap normal y se
# centra el encuadre de la foto. El velo degradado da contraste
# sin oscurecer la imagen de forma pareja.
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {

  .elementor-element-b3783d5 {
    position: relative !important;
    min-height: 420px !important;
    padding: 108px 20px 44px !important;
    justify-content: center !important;
    gap: 14px !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  /* Cada bloque ocupa lo que necesita, no la mitad del hero */
  .elementor-element-b3783d5 > .elementor-element {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    position: relative;
    z-index: 2;
  }

  /* Velo para legibilidad sobre la foto */
  /* El hero del blog ya trae su propio velo del 12% en el fondo de
     Elementor, igual que Individuals y About Us. Un ::before extra
     lo duplicaba y apagaba la foto. Se retira. */

  .elementor-element-b3783d5 h1,
  .elementor-element-b3783d5 p {
    text-shadow: 0 1px 8px rgba(0,0,0,.35) !important;
  }
}

/*--------------------------------------------------------------
# Heroes — velo uniforme al 12% en todas las páginas
#
# Estaban dispares: Individuals, About y Blog al 12%; Business al
# 26% (apagado); Contact Us y Work Process sin velo (texto blanco
# sobre zonas claras de la foto).
#
# Se añade el 12% donde faltaba. Business sigue al 26% porque su
# valor vive en el fondo del propio widget de Elementor y comparte
# clase con Individuals: hay que bajarlo desde el editor.
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {

  .elementor-element-5e4bb98,
  .elementor-element-adabf68 {
    position: relative !important;
    overflow: hidden !important;
  }

  .elementor-element-5e4bb98::before,
  .elementor-element-adabf68::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background: rgba(0, 0, 0, .12) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .elementor-element-5e4bb98 > .elementor-element,
  .elementor-element-adabf68 > .elementor-element {
    position: relative;
    z-index: 2;
  }
}

/*--------------------------------------------------------------
# Heroes — curva inferior proporcional en móvil
#
# Todos traen border-radius: 0 0 100px 100px, pensado para
# escritorio. A 430px de ancho esas dos curvas consumen 200px —
# casi la mitad de la pantalla— y el recorte se come la imagen.
# 36px mantiene el gesto de diseño en proporción.
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .elementor-element-a8f8f13,
  .elementor-element-a0d581e,
  .elementor-element-b3783d5,
  .elementor-element-5e4bb98,
  .elementor-element-adabf68,
  .elementor-element-d3ca5b9 {
    border-radius: 0 0 36px 36px !important;
    background-position: center center !important;
    background-size: cover !important;
  }
}

/*--------------------------------------------------------------
# Home — carrusel del hero con la misma curva que el resto
#
# El hero de la home es un Background Slideshow de Elementor, no
# un fondo simple, así que quedó fuera de la regla anterior. El
# radio vive en dos sitios: la sección y el propio carrusel.
#
# Las imágenes ya están a 1600px y centradas: no requieren cambio.
# El valor original era 0px 1px 100px 100px — ese 1px en la esquina
# superior derecha parece una errata, se normaliza a 0.
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .elementor-element-41c8c4f,
  .elementor-element-41c8c4f .elementor-background-slideshow,
  .elementor-element-41c8c4f .elementor-background-slideshow__slide,
  .elementor-element-41c8c4f .elementor-background-slideshow__slide__image {
    border-radius: 0 0 36px 36px !important;
  }
  .elementor-element-41c8c4f .elementor-background-slideshow__slide__image {
    background-position: center center !important;
    background-size: cover !important;
  }
}

/*--------------------------------------------------------------
# Heroes — la capa de superposición también debe seguir la curva
#
# Elementor dibuja la superposición de fondo con el ::before de la
# sección, y ese pseudo-elemento conserva su propio border-radius.
# Al bajar la sección y el carrusel a 36px, el ::before se quedó
# en 100px y su curva asomaba encima de la imagen como un borde
# fantasma.
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .elementor-element-41c8c4f::before,
  .elementor-element-a8f8f13::before,
  .elementor-element-a0d581e::before,
  .elementor-element-b3783d5::before,
  .elementor-element-5e4bb98::before,
  .elementor-element-adabf68::before,
  .elementor-element-d3ca5b9::before {
    border-radius: 0 0 36px 36px !important;
  }
}

/*--------------------------------------------------------------
# Heroes — altura proporcionada en móvil (y menos ampliación)
#
# La caja mide 430x540: vertical. Las fotos son apaisadas
# (1400x934, 1600x1067...). Con background-size:cover el ajuste
# lo manda la ALTURA: para llenar 1620px @3x con una imagen de
# 934 el navegador amplía un 73%, y de ahí la pixelación.
#
# Bajando la caja a 420px, la ampliación cae a ~1.35x @3x y a
# 1x en pantallas @2x. Además un hero de 540px se comía el 60%
# de la pantalla antes de mostrar contenido.
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .elementor-element-a8f8f13,
  .elementor-element-a0d581e,
  .elementor-element-b3783d5,
  .elementor-element-5e4bb98,
  .elementor-element-adabf68,
  .elementor-element-d3ca5b9 {
    min-height: 420px !important;
    height: auto !important;
  }

  .elementor-element-41c8c4f,
  .elementor-element-41c8c4f .elementor-background-slideshow,
  .elementor-element-41c8c4f .elementor-background-slideshow__slide,
  .elementor-element-41c8c4f .elementor-background-slideshow__slide__image {
    min-height: 460px !important;
  }
}

/*--------------------------------------------------------------
# About Us — fotos del equipo: anillo suave en vez de borde duro
#
# Lo que se leía como una sombra recortada era un borde blanco
# sólido de 6px sobre la imagen. Contra el fondo claro de la
# tarjeta marcaba un contorno rígido.
#
# Se sustituye por una sombra difusa y un aro apenas perceptible,
# que da profundidad sin delimitar.
--------------------------------------------------------------*/
.e-link-in-bio__identity-image-element,
.e-link-in-bio__identity-image img {
  border: 0 !important;
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .18),
              0 0 0 1px rgba(0, 0, 0, .05) !important;
  background: transparent !important;
}

.e-link-in-bio__identity-image {
  overflow: visible !important;
}



/*--------------------------------------------------------------
# About Us — fotos del equipo sin el aro blanco rígido
  El aro de 6px lo declara el CSS del sitio con el comentario
  "Aro blanco puro y macizo de 6px", apuntando a
  .has-style-circle img. Se replica ese mismo selector para
  sustituirlo por una sombra difusa.
  Los botones "Book a meeting" se dejan ocultos: están así por
  decisión de diseño en el CSS del sitio.
--------------------------------------------------------------*/
.elementor-1255 .elementor-element.elementor-element-5cf95b5 .has-style-circle img,
.elementor-1255 .elementor-element.elementor-element-a2ff37a .has-style-circle img,
.elementor-1255 .elementor-element.elementor-element-55dbbb4 .has-style-circle img,
.elementor-1255 .elementor-element.elementor-element-acc3793 .has-style-circle img,
.elementor-1255 .elementor-element.elementor-element-cc11e3e .has-style-circle img {
  border: 0 !important;
  border-width: 0 !important;
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .18),
              0 0 0 1px rgba(0, 0, 0, .05) !important;
  background: transparent !important;
}

/*--------------------------------------------------------------
# About Us — centrar la última fila incompleta del equipo
  El grid nativo de Elementor (.e-con-inner con
  grid-template-columns) acomoda las tarjetas empezando por la
  izquierda, así que con 5 personas en 3 columnas la última fila
  (2 tarjetas) queda pegada a la izquierda. Se convierte ese
  mismo contenedor a flexbox con wrap + justify-content: center,
  manteniendo el mismo ancho de tarjeta (mismo tamaño), para que
  cualquier fila incompleta quede centrada automáticamente.
--------------------------------------------------------------*/
.elementor-1255 .elementor-element-f843520 > .e-con-inner {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

.elementor-1255 .elementor-element-f843520 > .e-con-inner > .e-con {
  flex: 0 1 calc(33.333% - 26.667px) !important;
}

@media (max-width: 767px) {
  .elementor-1255 .elementor-element-f843520 > .e-con-inner > .e-con {
    flex: 0 1 100% !important;
  }
}