/* =============================================================================
   COSMO BEAUTY BOLIVIA — ACABADO DE HEADER Y FOOTER
   Child theme Astra · capa de presentación sobre Elementor Pro Theme Builder.

   ARCHIVO: wp-content/themes/astra-cosmo/assets/css/cosmo-header-footer.css
   CARGA:   DESPUÉS de cosmo-redesign.css (dependencia declarada en functions.php).
            Todo el archivo va prefijado con .cosmo-redesign (clase del <body>
            que inyecta functions.php) y anclado a los wrappers reales
            .elementor-location-header / .elementor-location-footer.

   ÍNDICE
   ------
   00. Tokens locales (--cp-hf-*)
   01. Aislamiento: neutraliza el ritmo vertical de cosmo-redesign
   02. HEADER · barras (desktop a8427c6 / tablet 8a46dd1)
   03. HEADER · logo
   04. HEADER · navegación principal (hover / activo / indicador)
   05. HEADER · submenús desplegables
   06. HEADER · CTA (WhatsApp verde · Suscríbete dorado)
   07. HEADER · estado sticky (.cosmo-header--scrolled + Elementor Sticky)
   08. HEADER · hamburguesa (por si se reactiva la barra superior móvil)
   09. MÓVIL · bottom bar app-like (.icon-menu) + burbuja del template
   10. FOOTER · fondo, estructura y columnas
   11. FOOTER · titulares de columna
   12. FOOTER · listas de iconos (contacto / legales)
   13. FOOTER · iconos sociales (hover con color de marca)
   14. FOOTER · legal / copyright
   15. Accesibilidad (foco visible, reduced-motion)
   16. RESPONSIVE 1024 / 767.98 / 544 / 480

   CONTRATO CON EL MARKUP REAL (no tocar sin revisar estos IDs)
   -----------------------------------------------------------
   Header 471  contenedores raíz:
     .elementor-element-8a46dd1  barra TABLET   (768–1024, no sticky)
     .elementor-element-a8427c6  barra DESKTOP  (>=1025, sticky top)
     .elementor-element-a114a16  .icon-menu     (<=767, fixed bottom)
   Columnas internas:
     .elementor-element-ce9b22f / .elementor-element-02e91cc  logo
     .elementor-element-8f336aa / .elementor-element-8dea4df  nav
     .elementor-element-1cb8d4a / .elementor-element-97df043  CTAs
   Footer 467:
     .elementor-element-3703f1f  sección raíz (fondo)
     .elementor-element-92d6bee  fila de 3 columnas
     .elementor-element-6250622  fila social + copyright
     .elementor-element-4063bfe  titular de copyright
   ============================================================================= */

/* =============================================================================
   00. TOKENS LOCALES
   Reutiliza las custom properties de marca de cosmo-redesign.css
   (--cosmo-primary, --cosmo-accent, --cosmo-gold-*, ...) y añade solo las
   que son exclusivas de esta capa.
   ============================================================================= */
:root {
  /* Altura real de la bottom bar. La sobrescribe cosmo-header-footer.js con
     el valor medido en píxeles; el fallback ya contempla el safe-area. */
  --cp-hf-bar-h: calc(62px + env(safe-area-inset-bottom, 0px));

  /* Cristal del header sticky */
  --cp-hf-glass:        rgba(255, 255, 255, 0.86);
  --cp-hf-glass-border: rgba(113, 12, 126, 0.10);
  --cp-hf-header-h:     76px;

  /* Bottom bar (oscura, tipo app) */
  --cp-hf-bar-bg:       rgba(36, 2, 42, 0.88);
  --cp-hf-bar-border:   rgba(255, 255, 255, 0.10);
  --cp-hf-bar-ink:      rgba(255, 255, 255, 0.72);
  --cp-hf-bar-shadow:   0 -10px 34px rgba(20, 2, 24, 0.30);

  /* Footer */
  --cp-hf-foot-top:     #4A0653;
  --cp-hf-foot-mid:     #350439;
  --cp-hf-foot-deep:    #24022A;
  --cp-hf-foot-text:    rgba(255, 255, 255, 0.80);
  --cp-hf-hairline:     rgba(255, 255, 255, 0.10);

  --cp-hf-ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =============================================================================
   01. AISLAMIENTO
   cosmo-redesign.css aplica --cosmo-section-pad (72px) a TODO .e-con y
   .elementor-section, incluidos los del header y el footer. En vez de pelear
   con padding-block, bajamos la variable en el ámbito correcto: es el mismo
   mecanismo que usa el archivo original, así que no hay !important ni
   duplicación de reglas.
   ============================================================================= */
.cosmo-redesign .elementor-location-header .e-con,
.cosmo-redesign .elementor-location-header .elementor-section,
.cosmo-redesign .elementor-location-footer .e-con,
.cosmo-redesign .elementor-location-footer .elementor-section {
  --cosmo-section-pad: 0px;
}

/* El contenedor sticky de Elementor no debe heredar el ritmo de sección. */
.cosmo-redesign .elementor-location-header .elementor-sticky {
  --cosmo-section-pad: 0px;
}

/* =============================================================================
   02. HEADER · BARRAS
   Las tres barras son .e-con-full: Elementor les da width:100% y flex.
   Fijamos la geometría a mano (logo | nav flexible | CTAs) para que la
   alineación sea exacta y no dependa de los ajustes del editor.
   ============================================================================= */

/* Estructura común: contenido centrado a 1140px, barra a sangre completa. */
.cosmo-redesign .elementor-location-header .elementor-element-a8427c6,
.cosmo-redesign .elementor-location-header .elementor-element-8a46dd1 {
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 18px;
  min-height: var(--cp-hf-header-h);
  padding-block: 10px;
  /* Centra el contenido a 1140px sin wrapper extra; el fondo sigue a sangre. */
  padding-inline: max(20px, calc((100% - var(--cosmo-container)) / 2));
  background-color: var(--cosmo-surface);
  border-bottom: 1px solid var(--cosmo-border);
  transition:
    background-color var(--cosmo-transition),
    box-shadow var(--cosmo-transition),
    border-color var(--cosmo-transition);
}

/* Columna LOGO: nunca se estruja. */
.cosmo-redesign .elementor-location-header .elementor-element-ce9b22f,
.cosmo-redesign .elementor-location-header .elementor-element-02e91cc {
  flex: 0 0 auto;
  width: auto;
}

/* Columna NAV: ocupa el espacio libre y centra el menú. */
.cosmo-redesign .elementor-location-header .elementor-element-8f336aa,
.cosmo-redesign .elementor-location-header .elementor-element-8dea4df {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;                 /* permite encoger sin desbordar */
  justify-content: center;
}

/* Columna CTAs: ancho por contenido, botones en fila (no apilados).
   Nota: en el editor los botones llevan elementor-widget-tablet__width-inherit
   (width:100% en tablet). Se anula aquí para que queden en línea. */
.cosmo-redesign .elementor-location-header .elementor-element-1cb8d4a,
.cosmo-redesign .elementor-location-header .elementor-element-97df043 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  width: auto;
}

.cosmo-redesign .elementor-location-header .elementor-element-1cb8d4a > .elementor-element,
.cosmo-redesign .elementor-location-header .elementor-element-97df043 > .elementor-element {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

/* =============================================================================
   03. HEADER · LOGO
   ============================================================================= */
.cosmo-redesign .elementor-location-header .elementor-widget-image {
  line-height: 0;               /* elimina el hueco de inline-block */
}

.cosmo-redesign .elementor-location-header .elementor-widget-image img,
.cosmo-redesign .elementor-location-header .custom-logo-link img {
  display: block;
  width: auto;
  max-height: 46px;
  object-fit: contain;
  transition: opacity var(--cosmo-transition);
}

.cosmo-redesign .elementor-location-header .elementor-widget-image a:hover img {
  opacity: 0.86;
}

/* =============================================================================
   04. HEADER · NAVEGACIÓN PRINCIPAL
   Sustituye el subrayado de cosmo-redesign por un indicador degradado
   centrado, y añade estado activo real (WP emite current-menu-*).
   ============================================================================= */
.cosmo-redesign .elementor-location-header .elementor-nav-menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.cosmo-redesign .elementor-location-header .elementor-nav-menu > li > .elementor-item {
  position: relative;
  padding: 12px 14px;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--cosmo-ink-soft);
  border-radius: 10px;
  transition: color var(--cosmo-transition);
}

/* Indicador: píldora degradada que crece desde el centro. */
.cosmo-redesign .elementor-location-header .elementor-nav-menu > li > .elementor-item::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--cosmo-primary) 0%, var(--cosmo-accent) 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--cosmo-transition), opacity var(--cosmo-transition);
  opacity: 0.9;
}

.cosmo-redesign .elementor-location-header .elementor-nav-menu > li > .elementor-item:hover,
.cosmo-redesign .elementor-location-header .elementor-nav-menu > li > .elementor-item:focus {
  color: var(--cosmo-primary);
}

.cosmo-redesign .elementor-location-header .elementor-nav-menu > li > .elementor-item:hover::after,
.cosmo-redesign .elementor-location-header .elementor-nav-menu > li > .elementor-item:focus-visible::after,
.cosmo-redesign .elementor-location-header .elementor-nav-menu > li.current-menu-item > .elementor-item::after,
.cosmo-redesign .elementor-location-header .elementor-nav-menu > li.current_page_item > .elementor-item::after,
.cosmo-redesign .elementor-location-header .elementor-nav-menu > li.current-menu-ancestor > .elementor-item::after,
.cosmo-redesign .elementor-location-header .elementor-nav-menu > li.current-menu-parent > .elementor-item::after,
.cosmo-redesign .elementor-location-header .elementor-nav-menu > li.current-menu-ancestor > .elementor-item::after {
  transform: scaleX(1);
}

/* Ítem activo: texto en color primario y algo más de peso. */
.cosmo-redesign .elementor-location-header .elementor-nav-menu > li.current-menu-item > .elementor-item,
.cosmo-redesign .elementor-location-header .elementor-nav-menu > li.current-menu-ancestor > .elementor-item,
.cosmo-redesign .elementor-location-header .elementor-nav-menu > li.current-menu-parent > .elementor-item {
  color: var(--cosmo-primary);
  font-weight: 600;
}

/* El ítem destacado ("CosmoBeauty Bolivia 2026") lleva un <span> con estilos
   inline desde el editor: no lo pisamos, solo aseguramos que no desborde. */
.cosmo-redesign .elementor-location-header .elementor-nav-menu .elementor-item > span {
  max-width: 100%;
}

.cosmo-redesign .elementor-location-header .elementor-nav-menu .elementor-item img {
  height: 1em;
  width: auto;
}

/* Caret del submenú: gira al desplegar. */
.cosmo-redesign .elementor-location-header .elementor-nav-menu .sub-arrow {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  color: currentColor;
}

.cosmo-redesign .elementor-location-header .elementor-nav-menu .sub-arrow svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
  transition: transform var(--cosmo-transition);
}

.cosmo-redesign .elementor-location-header .menu-item-has-children:hover > .elementor-item .sub-arrow svg,
.cosmo-redesign .elementor-location-header .menu-item-has-children > .elementor-item[aria-expanded="true"] .sub-arrow svg {
  transform: rotate(180deg);
}

/* =============================================================================
   05. HEADER · SUBMENÚS
   Ojo: Elementor reutiliza .elementor-nav-menu--dropdown tanto para los
   submenús de escritorio como para el desplegable móvil. Aquí solo tocamos
   los que cuelgan de un <li> (submenú real), no el contenedor móvil.
   ============================================================================= */
.cosmo-redesign .elementor-location-header .elementor-nav-menu > li > .sub-menu {
  min-width: 232px;
  padding: 8px;
  margin-top: 6px;
  border: 1px solid var(--cp-hf-glass-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 20px 48px rgba(43, 3, 49, 0.16);
  /* El primer submenú tiene 12 ítems: nunca debe salirse del viewport. */
  max-height: min(66vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(113, 12, 126, 0.28) transparent;
}

.cosmo-redesign .elementor-location-header .elementor-nav-menu > li > .sub-menu::-webkit-scrollbar {
  width: 6px;
}

.cosmo-redesign .elementor-location-header .elementor-nav-menu > li > .sub-menu::-webkit-scrollbar-thumb {
  background: rgba(113, 12, 126, 0.28);
  border-radius: 6px;
}

.cosmo-redesign .elementor-location-header .elementor-nav-menu > li > .sub-menu :is(.elementor-item, .elementor-sub-item) {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--cosmo-ink-soft);
  transition:
    background-color var(--cosmo-transition),
    color var(--cosmo-transition),
    transform var(--cosmo-transition);
}

.cosmo-redesign .elementor-location-header .elementor-nav-menu > li > .sub-menu :is(.elementor-item, .elementor-sub-item):hover,
.cosmo-redesign .elementor-location-header .elementor-nav-menu > li > .sub-menu :is(.elementor-item, .elementor-sub-item):focus {
  background: var(--cosmo-primary-soft);
  color: var(--cosmo-primary);
  transform: translateX(3px);
}

/* Submenú del ítem activo: acento lateral. */
.cosmo-redesign .elementor-location-header .elementor-nav-menu > li > .sub-menu .current-menu-item > :is(.elementor-item, .elementor-sub-item) {
  color: var(--cosmo-primary);
  font-weight: 600;
  background: var(--cosmo-primary-soft);
}

/* =============================================================================
   06. HEADER · CTA
   Los dos botones salen del editor con el mismo estilo genérico (dorado), así
   que se distinguen por su destino real, sin tocar Elementor:
     · WhatsApp  -> https://wa.me/...  => verde de marca
     · Suscríbete-> popup id 150       => dorado de marca (por defecto)
   Ambos usan texto oscuro (--cosmo-ink) sobre fondo claro: mismo lenguaje
   visual y contraste >= 4.5:1 en todos los extremos del degradado.
   ============================================================================= */
.cosmo-redesign .elementor-location-header .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  border-radius: var(--cosmo-radius-pill);
  white-space: nowrap;
  transition:
    transform var(--cosmo-transition),
    box-shadow var(--cosmo-transition),
    background-color var(--cosmo-transition),
    color var(--cosmo-transition);
}

/* La clase elementor-animation-grow del editor se neutraliza con nuestro
   propio hover (mayor especificidad), evitando el scale brusco. */
.cosmo-redesign .elementor-location-header .elementor-button-elementor-animation-grow,
.cosmo-redesign .elementor-location-header .elementor-button:hover,
.cosmo-redesign .elementor-location-header .elementor-button:focus {
  transform: translateY(-2px);
}

.cosmo-redesign .elementor-location-header .elementor-button:active {
  transform: translateY(0);
}

.cosmo-redesign .elementor-location-header .elementor-button-icon {
  font-size: 1.05em;
  line-height: 0;
  display: inline-flex;
}

.cosmo-redesign .elementor-location-header .elementor-button-icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* --- WhatsApp: verde de marca, texto oscuro --- */
.cosmo-redesign .elementor-location-header a.elementor-button[href*="wa.me"] {
  background: linear-gradient(135deg, #8FD35B 0%, #5E9636 100%);
  color: var(--cosmo-ink);
  box-shadow: 0 6px 16px rgba(94, 150, 54, 0.26);
}

.cosmo-redesign .elementor-location-header a.elementor-button[href*="wa.me"]:hover,
.cosmo-redesign .elementor-location-header a.elementor-button[href*="wa.me"]:focus {
  background: linear-gradient(135deg, #9BDD69 0%, #54892F 100%);
  color: var(--cosmo-ink);
  box-shadow: 0 10px 22px rgba(94, 150, 54, 0.34);
}

/* --- Suscríbete: dorado de marca (refuerza el estilo base de cosmo-redesign) --- */
.cosmo-redesign .elementor-location-header a.elementor-button[href*="popup"] {
  background: var(--cosmo-gold-grad);
  color: var(--cosmo-ink);
  box-shadow: 0 6px 16px rgba(194, 134, 15, 0.26);
}

.cosmo-redesign .elementor-location-header a.elementor-button[href*="popup"]:hover,
.cosmo-redesign .elementor-location-header a.elementor-button[href*="popup"]:focus {
  background: var(--cosmo-gold-grad-hover);
  color: var(--cosmo-ink);
  box-shadow: 0 10px 22px rgba(194, 134, 15, 0.34);
}

/* =============================================================================
   07. HEADER · ESTADO STICKY
   Dos disparadores, ambos reales:
     · .cosmo-header--scrolled  -> lo añade cosmo.js al hacer scroll (fiable)
     · .elementor-sticky--*     -> lo añade el módulo Sticky de Elementor
   ============================================================================= */
.cosmo-redesign .elementor-location-header.cosmo-header--scrolled .elementor-element-a8427c6,
.cosmo-redesign .elementor-location-header .elementor-element-a8427c6.elementor-sticky--active,
.cosmo-redesign .elementor-location-header .elementor-element-a8427c6.elementor-sticky--effects,
.cosmo-redesign .elementor-location-header .elementor-sticky--effects > .elementor-element-a8427c6,
.cosmo-redesign .elementor-location-header .elementor-sticky--active > .elementor-element-a8427c6 {
  background-color: var(--cp-hf-glass);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--cp-hf-glass-border);
  box-shadow: 0 6px 24px rgba(43, 3, 49, 0.10);
}

/* Fallback para navegadores sin backdrop-filter (Safari antiguo / Firefox con
   la función desactivada): fondo casi opaco en lugar de cristal transparente. */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .cosmo-redesign .elementor-location-header.cosmo-header--scrolled .elementor-element-a8427c6,
  .cosmo-redesign .elementor-location-header .elementor-element-a8427c6.elementor-sticky--active,
  .cosmo-redesign .elementor-location-header .elementor-element-a8427c6.elementor-sticky--effects {
    background-color: rgba(255, 255, 255, 0.98);
  }
}

/* =============================================================================
   08. HEADER · HAMBURGUESA
   Hoy la barra superior móvil está oculta en Elementor
   (elementor-hidden-desktop -tablet -mobile en la sección efb2150), así que
   estas reglas son inertes. Se dejan listas para que, si se reactiva, el
   toggle no vuelva a verse "de plantilla".
   ============================================================================= */
.cosmo-redesign .elementor-location-header .elementor-menu-toggle {
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 46px;
  padding: 10px;
  border: 1px solid var(--cosmo-border);
  border-radius: 14px;
  background: var(--cosmo-surface);
  color: var(--cosmo-primary);
  cursor: pointer;
  transition:
    background-color var(--cosmo-transition),
    border-color var(--cosmo-transition),
    color var(--cosmo-transition);
}

.cosmo-redesign .elementor-location-header .elementor-menu-toggle svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.cosmo-redesign .elementor-location-header .elementor-menu-toggle:hover,
.cosmo-redesign .elementor-location-header .elementor-menu-toggle:focus {
  background: var(--cosmo-primary-soft);
  border-color: rgba(113, 12, 126, 0.35);
}

.cosmo-redesign .elementor-location-header .elementor-menu-toggle[aria-expanded="true"] {
  background: var(--cosmo-primary);
  border-color: var(--cosmo-primary);
  color: #fff;
}

/* Desplegable móvil (solo si se reactiva la barra superior móvil). */
.cosmo-redesign .elementor-location-header .elementor-nav-menu--dropdown {
  border-radius: 16px;
  box-shadow: var(--cosmo-shadow-lg);
}

.cosmo-redesign .elementor-location-header .elementor-nav-menu--dropdown .elementor-item {
  min-height: 48px;
  padding: 14px 18px;
  font-size: 16px;
  border-bottom: 1px solid var(--cosmo-border);
}

/* =============================================================================
   09. MÓVIL · BOTTOM BAR APP-LIKE (.icon-menu)
   El widget es un contenedor Elementor con posición fija y 5 Icon Box +
   1 Divisor. El JS de la plantilla mueve el Divisor con translateX y añade
   las clases .active (al Icon Box), .bubbling / .bubble / .transition /
   .hidden (al contenedor). Diseñamos SOBRE esas clases, no contra ellas.

   Geometría de la burbuja: el divisor es un elemento absoluto con left:0; el
   script lo desplaza (centro_activo - centro_primero). Para que su centro
   coincida con el del primer ítem en reposo, su ancho debe ser
   padding*2 + ancho_item = 16px + (100% - 16px)/5 = 20% + 12.8px.
   ============================================================================= */
.cosmo-redesign .elementor-location-header .icon-menu {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  overflow: hidden;
  margin: 0;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--cp-hf-bar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 0;
  border-top: 1px solid var(--cp-hf-bar-border);
  border-radius: 22px 22px 0 0;
  /* Sin pseudo-elementos: en los contenedores Elementor .e-con::before lo usa
     el overlay de fondo. La línea superior va como box-shadow interior. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--cp-hf-bar-shadow);
  transition:
    transform 0.34s var(--cp-hf-ease),
    opacity 0.34s var(--cp-hf-ease);
}

@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .cosmo-redesign .elementor-location-header .icon-menu {
    background: #2B0331;
  }
}

/* La plantilla oculta la barra al acercarse al final de la página. */
.cosmo-redesign .elementor-location-header .icon-menu.hidden {
  transform: translateY(calc(100% + 28px));
  opacity: 0;
  pointer-events: none;
}

/* --- Ítems: anulan la tarjeta que cosmo-redesign aplica a TODO icon-box --- */
.cosmo-redesign .elementor-location-header .icon-menu > .elementor-widget-icon-box {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: none;
}

.cosmo-redesign .elementor-location-header .icon-menu .elementor-widget-container {
  height: 100%;
}

.cosmo-redesign .elementor-location-header .icon-menu .elementor-icon-box-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  min-height: 52px;
  padding: 4px 2px;
  background: none;
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  color: var(--cp-hf-bar-ink);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--cosmo-transition), transform 0.18s var(--cp-hf-ease);
}

/* Desactiva la barra de acento superior que cosmo-redesign añade a las tarjetas. */
.cosmo-redesign .elementor-location-header .icon-menu .elementor-icon-box-wrapper::before {
  content: none;
}

.cosmo-redesign .elementor-location-header .icon-menu .elementor-icon-box-wrapper:active {
  transform: scale(0.95);
}

.cosmo-redesign .elementor-location-header .icon-menu .elementor-icon-box-icon {
  margin: 0;
  line-height: 0;
}

.cosmo-redesign .elementor-location-header .icon-menu .elementor-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  transition: fill var(--cosmo-transition), transform var(--cosmo-transition);
}

/* Etiqueta: legible, sin recortes raros y con elipsis si no cabe. */
.cosmo-redesign .elementor-location-header .icon-menu .elementor-icon-box-content {
  min-width: 0;
  max-width: 100%;
}

.cosmo-redesign .elementor-location-header .icon-menu .elementor-icon-box-title {
  margin: 0;
  max-width: 100%;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: currentColor;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cosmo-redesign .elementor-location-header .icon-menu .elementor-icon-box-title a {
  color: currentColor;
  text-decoration: none;
}

/* Tap target real: el enlace del título se estira sobre todo el ítem.
   Los dos <a> de cada ítem apuntan al mismo destino; el del icono lleva
   tabindex="-1", así que el foco de teclado cae siempre aquí. */
.cosmo-redesign .elementor-location-header .icon-menu .elementor-icon-box-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
}

/* --- Estado activo --- */
.cosmo-redesign .elementor-location-header .icon-menu .elementor-widget-icon-box.active {
  color: #fff;
}

.cosmo-redesign .elementor-location-header .icon-menu .elementor-widget-icon-box.active .elementor-icon-box-title {
  color: var(--cosmo-gold-1);
  font-weight: 600;
}

.cosmo-redesign .elementor-location-header .icon-menu .elementor-widget-icon-box.active .elementor-icon svg {
  fill: #3A0442; /* el icono cae sobre la píldora dorada */
}

/* El icono central (widget 5fca7b0, "CosmoBeauty") trae fill blanco en un
   style inline del propio <path>, lo que lo hace invisible sobre fondos
   claros y rompe el estado activo. Es el ÚNICO !important del archivo: un
   estilo inline solo se puede anular así (no hay selector que lo gane). */
.cosmo-redesign .elementor-location-header .icon-menu .elementor-icon svg path[style] {
  fill: currentColor !important;
}

/* --- Burbuja deslizante: el Divisor que mueve el script de la plantilla --- */
.cosmo-redesign .elementor-location-header .icon-menu > .elementor-widget-divider {
  position: absolute;
  top: 9px;
  left: 0;
  width: calc(20% + 12.8px); /* centra la burbuja sobre el 1.er ítem */
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  transition: none; /* la plantilla añade .transition tras el primer render */
}

/* Solo animamos cuando la plantilla lo autoriza (clase .transition). */
.cosmo-redesign .elementor-location-header .icon-menu.transition > .elementor-widget-divider {
  transition: transform 0.34s var(--cp-hf-ease);
}

.cosmo-redesign .elementor-location-header .icon-menu .elementor-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.cosmo-redesign .elementor-location-header .icon-menu .elementor-divider-separator {
  display: block;
  width: 46px;
  height: 32px;
  margin: 0;
  border: 0;
  border-radius: var(--cosmo-radius-pill);
  background: linear-gradient(135deg, var(--cosmo-gold-1) 0%, var(--cosmo-gold-2) 100%);
  box-shadow: 0 6px 16px rgba(194, 134, 15, 0.35);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.2s var(--cp-hf-ease), transform 0.26s var(--cp-hf-ease);
}

.cosmo-redesign .elementor-location-header .icon-menu.bubble .elementor-divider-separator {
  opacity: 1;
  transform: scale(1);
}

/* Reserva de espacio para que la barra no tape el final del contenido.
   --cp-hf-bar-h lo fija el JS con la altura real medida (que ya incluye el
   safe-area); el fallback también lo contempla. */
@media (max-width: 767.98px) {
  html body.cosmo-redesign {
    padding-bottom: var(--cp-hf-bar-h, calc(62px + env(safe-area-inset-bottom, 0px)));
  }
}

@media (min-width: 768px) {
  html body.cosmo-redesign {
    padding-bottom: 0;
  }
}

/* La barra inferior solo existe por debajo de 768px (clases de Elementor).
   Redundante a propósito: si alguien quita elementor-hidden-* del widget,
   esto impide que aparezca en escritorio. */
@media (min-width: 1025px) {
  .cosmo-redesign .elementor-location-header .icon-menu {
    display: none;
  }
}

/* Barra superior móvil reutilizable: la sección efb2150 está oculta por
   Elementor. Si la reactivas (quitando las clases elementor-hidden-*),
   estas reglas dejan una fila limpia: logo | WhatsApp | Suscríbete.
   La hamburguesa se oculta porque la bottom bar ya es la navegación. */
@media (max-width: 767.98px) {
  .cosmo-redesign .elementor-location-header .elementor-element-efb2150 .elementor-col-25 {
    width: 33.3333%;
  }
  .cosmo-redesign .elementor-location-header .elementor-element-0a2e3f9 {
    display: none;
  }
  .cosmo-redesign .elementor-location-header .elementor-element-458a59f > .elementor-container {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding-inline: 14px;
  }
  .cosmo-redesign .elementor-location-header .elementor-element-efb2150 .elementor-widget-image img {
    max-height: 40px;
  }
}

/* =============================================================================
   10. FOOTER · FONDO, ESTRUCTURA Y COLUMNAS
   ============================================================================= */

/* Base oscura bajo el degradado (evita cualquier destello del morado plano
   que define cosmo-redesign por defecto). */
.cosmo-redesign .elementor-location-footer {
  background-color: var(--cp-hf-foot-deep);
  color: var(--cp-hf-foot-text);
}

/* Degradado morado profundo + dos resplandores de marca muy suaves. */
.cosmo-redesign .elementor-location-footer > .elementor-element-3703f1f {
  background-color: var(--cp-hf-foot-mid);
  background-image:
    radial-gradient(120% 90% at 10% 0%, rgba(113, 12, 126, 0.55) 0%, rgba(113, 12, 126, 0) 58%),
    radial-gradient(90% 80% at 94% 100%, rgba(129, 184, 80, 0.16) 0%, rgba(129, 184, 80, 0) 62%),
    linear-gradient(165deg, var(--cp-hf-foot-top) 0%, var(--cp-hf-foot-mid) 48%, var(--cp-hf-foot-deep) 100%);
  padding-block: 64px 0;
}

/* La columna raíz trae su propio degradado desde el editor: se neutraliza
   para que mande el del footer. */
.cosmo-redesign .elementor-location-footer > .elementor-element-3703f1f > .elementor-container > .elementor-element-3bc9777 {
  background-color: transparent;
  background-image: none;
}

/* El overlay de esa sección se reaprovecha como filete degradado superior:
   cero DOM extra y sin tocar la configuración del editor. */
.cosmo-redesign .elementor-location-footer > .elementor-element-3703f1f > .elementor-background-overlay {
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  height: 3px;
  opacity: 1;
  background: linear-gradient(90deg, var(--cosmo-gold-1) 0%, var(--cosmo-accent) 48%, var(--cosmo-primary) 100%);
  pointer-events: none;
}

/* --- Fila de 3 columnas -> flex propio para controlar el colapso --- */
.cosmo-redesign .elementor-location-footer .elementor-element-92d6bee > .elementor-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px 48px;
  max-width: var(--cosmo-container);
  margin-inline: auto;
  padding-inline: var(--cosmo-gutter);
}

/* El gap del contenedor sustituye al padding de columna del editor. */
.cosmo-redesign .elementor-location-footer .elementor-element-92d6bee .elementor-element-populated {
  padding: 0;
}

.cosmo-redesign .elementor-location-footer .elementor-element-92d6bee > .elementor-container > .elementor-column {
  width: auto;
  min-width: 0;
}

/* Marca (columna 1) */
.cosmo-redesign .elementor-location-footer .elementor-element-92d6bee > .elementor-container > .elementor-column:nth-child(1) {
  flex: 0 0 236px;
}

/* Columnas de enlaces (2 y 3) */
.cosmo-redesign .elementor-location-footer .elementor-element-92d6bee > .elementor-container > .elementor-column:nth-child(2),
.cosmo-redesign .elementor-location-footer .elementor-element-92d6bee > .elementor-container > .elementor-column:nth-child(3) {
  flex: 1 1 200px;
}

/* Logo del footer: cuadrado, contenido y con un halo suave. */
.cosmo-redesign .elementor-location-footer .elementor-widget-image {
  line-height: 0;
}

.cosmo-redesign .elementor-location-footer .elementor-widget-image img {
  display: block;
  width: auto;
  max-width: 150px;
  max-height: 150px;
  object-fit: contain;
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

/* El editor oculta el logo del footer en móvil (elementor-hidden-mobile).
   En un footer de agencia la marca debe estar siempre; lo reincorporamos
   acotado y centrado. Si no lo quieres, borra este bloque. */
@media (max-width: 767.98px) {
  .cosmo-redesign .elementor-location-footer .elementor-element-2d964cd {
    display: block;
    margin-inline: auto;
    text-align: center;
  }
  .cosmo-redesign .elementor-location-footer .elementor-element-2d964cd .elementor-widget-container {
    display: flex;
    justify-content: center;
  }
  .cosmo-redesign .elementor-location-footer .elementor-widget-image img {
    max-width: 118px;
    max-height: 118px;
  }
}

/* =============================================================================
   11. FOOTER · TITULARES DE COLUMNA ("Información", "Políticas")
   ============================================================================= */
.cosmo-redesign .elementor-location-footer .elementor-element-92d6bee .elementor-heading-title {
  position: relative;
  margin: 0 0 20px;
  padding-bottom: 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.cosmo-redesign .elementor-location-footer .elementor-element-92d6bee .elementor-heading-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--cosmo-gold-1) 0%, var(--cosmo-gold-2) 100%);
}

/* =============================================================================
   12. FOOTER · LISTAS DE ICONOS
   ============================================================================= */
.cosmo-redesign .elementor-location-footer .elementor-icon-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cosmo-redesign .elementor-location-footer .elementor-icon-list-item {
  margin: 0 0 2px;
  font-size: 15px;
  line-height: 1.6;
}

.cosmo-redesign .elementor-location-footer .elementor-icon-list-item a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 0;
  color: var(--cp-hf-foot-text);
  text-decoration: none;
  transition: color var(--cosmo-transition), transform var(--cosmo-transition);
}

.cosmo-redesign .elementor-location-footer .elementor-icon-list-item a:hover,
.cosmo-redesign .elementor-location-footer .elementor-icon-list-item a:focus {
  color: var(--cosmo-gold-1);
  transform: translateX(3px);
}

.cosmo-redesign .elementor-location-footer .elementor-icon-list-icon {
  flex: 0 0 auto;
  color: var(--cosmo-gold-1);
  line-height: 0;
}

.cosmo-redesign .elementor-location-footer .elementor-icon-list-icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.cosmo-redesign .elementor-location-footer .elementor-icon-list-text {
  color: inherit;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* =============================================================================
   13. FOOTER · ICONOS SOCIALES
   El editor los sirve con forma círculo + animación "grow". Se pasa a
   squircle (más actual) y el hover usa el color de cada red sobre fondo
   oscuro. Los glifos son componentes, no texto: basta con >= 3:1 (WCAG 1.4.11).
   ============================================================================= */
.cosmo-redesign .elementor-location-footer .elementor-social-icons-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.cosmo-redesign .elementor-location-footer .elementor-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  margin: 0;
  border: 1px solid var(--cp-hf-hairline);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition:
    background-color 0.26s var(--cp-hf-ease),
    border-color 0.26s var(--cp-hf-ease),
    color 0.26s var(--cp-hf-ease),
    transform 0.26s var(--cp-hf-ease),
    box-shadow 0.26s var(--cp-hf-ease);
}

.cosmo-redesign .elementor-location-footer .elementor-social-icon svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

/* Neutraliza elementor-animation-grow con nuestro propio realce. */
.cosmo-redesign .elementor-location-footer .elementor-social-icon:hover,
.cosmo-redesign .elementor-location-footer .elementor-social-icon:focus {
  color: #fff;
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.30);
}

.cosmo-redesign .elementor-location-footer .elementor-social-icon-facebook:hover,
.cosmo-redesign .elementor-location-footer .elementor-social-icon-facebook:focus {
  background-color: #1877F2;
}

.cosmo-redesign .elementor-location-footer .elementor-social-icon-youtube:hover,
.cosmo-redesign .elementor-location-footer .elementor-social-icon-youtube:focus {
  background-color: #FF0000;
}

.cosmo-redesign .elementor-location-footer .elementor-social-icon-instagram:hover,
.cosmo-redesign .elementor-location-footer .elementor-social-icon-instagram:focus {
  background-color: #C13584;
  background-image: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
}

.cosmo-redesign .elementor-location-footer .elementor-social-icon-pinterest:hover,
.cosmo-redesign .elementor-location-footer .elementor-social-icon-pinterest:focus {
  background-color: #E60023;
}

.cosmo-redesign .elementor-location-footer .elementor-social-icon-linkedin:hover,
.cosmo-redesign .elementor-location-footer .elementor-social-icon-linkedin:focus {
  background-color: #0A66C2;
}

.cosmo-redesign .elementor-location-footer .elementor-social-icon-tiktok:hover,
.cosmo-redesign .elementor-location-footer .elementor-social-icon-tiktok:focus {
  background-color: #010101;
}

/* =============================================================================
   14. FOOTER · LEGAL / COPYRIGHT
   El editor lo emite como <h2 class="elementor-heading-title"> dentro del
   widget 4063bfe. Se rebaja a texto legal: peso, tamaño y color de nota.
   ============================================================================= */
.cosmo-redesign .elementor-location-footer .elementor-element-6250622 {
  border-top: 1px solid var(--cp-hf-hairline);
  padding-block: 30px 34px;
}

.cosmo-redesign .elementor-location-footer .elementor-element-6250622 .elementor-container {
  max-width: var(--cosmo-container);
  margin-inline: auto;
  padding-inline: var(--cosmo-gutter);
}

.cosmo-redesign .elementor-location-footer .elementor-element-0cd5c2d {
  margin-bottom: 20px;
}

.cosmo-redesign .elementor-location-footer .elementor-element-4063bfe .elementor-heading-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.72);
}

.cosmo-redesign .elementor-location-footer .elementor-element-4063bfe .elementor-heading-title b {
  color: #fff;
  font-weight: 600;
}

/* =============================================================================
   15. ACCESIBILIDAD
   ============================================================================= */

/* Foco visible propio sobre fondos oscuros (la regla global de
   cosmo-redesign usa verde #81B850, válido pero poco visible sobre el
   morado profundo; aquí se refuerza con dorado + offset). */
.cosmo-redesign .elementor-location-footer a:focus-visible,
.cosmo-redesign .elementor-location-footer .elementor-social-icon:focus-visible {
  outline: 3px solid var(--cosmo-gold-1);
  outline-offset: 3px;
  border-radius: 12px;
}

.cosmo-redesign .elementor-location-header .icon-menu .elementor-icon-box-title a:focus-visible::after {
  outline: 3px solid var(--cosmo-gold-1);
  outline-offset: 2px;
}

/* Respeto por "reducir movimiento": la burbuja se recoloca sin animación y
   el estado oculto de la barra deja de deslizarse. */
@media (prefers-reduced-motion: reduce) {
  .cosmo-redesign .elementor-location-header .icon-menu,
  .cosmo-redesign .elementor-location-header .icon-menu.transition > .elementor-widget-divider,
  .cosmo-redesign .elementor-location-header .icon-menu .elementor-divider-separator,
  .cosmo-redesign .elementor-location-footer .elementor-social-icon,
  .cosmo-redesign .elementor-location-footer .elementor-icon-list-item a {
    transition-duration: 0.001ms;
  }
  .cosmo-redesign .elementor-location-header .icon-menu .elementor-icon-box-wrapper:active,
  .cosmo-redesign .elementor-location-footer .elementor-social-icon:hover {
    transform: none;
  }
}

/* =============================================================================
   16. RESPONSIVE
   Se usa 767.98px (no 768px) para alinear exactamente con el breakpoint móvil
   de Elementor (max-width:767px), que es el que gobierna elementor-hidden-*.
   ============================================================================= */

/* ---------- ≤ 1024px : tablet (barra 8a46dd1) ---------- */
@media (max-width: 1024px) {

  /* La barra tablet se parte en dos filas: logo + CTAs arriba, menú debajo. */
  .cosmo-redesign .elementor-location-header .elementor-element-8a46dd1 {
    flex-wrap: wrap;
    row-gap: 4px;
    padding-block: 10px 4px;
    min-height: 0;
  }

  .cosmo-redesign .elementor-location-header .elementor-element-8f336aa {
    order: 3;
    flex: 1 0 100%;
    justify-content: center;
  }

  .cosmo-redesign .elementor-location-header .elementor-element-1cb8d4a {
    gap: 8px;
  }

  .cosmo-redesign .elementor-location-header .elementor-element-8a46dd1 .elementor-nav-menu > li > .elementor-item {
    padding: 10px 10px;
    font-size: 14px;
  }

  .cosmo-redesign .elementor-location-header .elementor-element-8a46dd1 .elementor-nav-menu > li > .elementor-item::after {
    left: 10px;
    right: 10px;
    bottom: 1px;
    height: 2px;
  }

  .cosmo-redesign .elementor-location-header .elementor-widget-image img {
    max-height: 40px;
  }

  .cosmo-redesign .elementor-location-header .elementor-button {
    min-height: 42px;
    padding: 9px 16px;
    font-size: 14px;
  }

  /* Footer: la marca pasa a fila completa y las dos columnas de enlaces
     se reparten el ancho. */
  .cosmo-redesign .elementor-location-footer .elementor-element-92d6bee > .elementor-container {
    gap: 34px 32px;
  }

  .cosmo-redesign .elementor-location-footer .elementor-element-92d6bee > .elementor-container > .elementor-column:nth-child(1) {
    flex: 1 1 100%;
  }

  .cosmo-redesign .elementor-location-footer .elementor-element-92d6bee > .elementor-container > .elementor-column:nth-child(2),
  .cosmo-redesign .elementor-location-footer .elementor-element-92d6bee > .elementor-container > .elementor-column:nth-child(3) {
    flex: 1 1 200px;
  }

  .cosmo-redesign .elementor-location-footer > .elementor-element-3703f1f {
    padding-block: 52px 0;
  }
}

/* ---------- ≤ 767.98px : móvil (bottom bar .icon-menu) ---------- */
@media (max-width: 767.98px) {

  /* La bottom bar es la única navegación: el foco y el contraste mandan. */
  .cosmo-redesign .elementor-location-header .icon-menu .elementor-icon-box-wrapper {
    min-height: 54px;
  }

  .cosmo-redesign .elementor-location-header .icon-menu .elementor-icon svg {
    width: 23px;
    height: 23px;
  }

  .cosmo-redesign .elementor-location-header .icon-menu .elementor-icon-box-title {
    font-size: 10.5px;
  }

  .cosmo-redesign .elementor-location-header .icon-menu .elementor-divider-separator {
    width: 48px;
    height: 34px;
  }

  /* Footer: todo apilado, marca primero, luego Información y Políticas. */
  .cosmo-redesign .elementor-location-footer .elementor-element-92d6bee > .elementor-container {
    flex-direction: column;
    gap: 30px;
    padding-inline: 22px;
  }

  .cosmo-redesign .elementor-location-footer .elementor-element-92d6bee > .elementor-container > .elementor-column {
    flex: 0 0 auto;
    width: 100%;
  }

  .cosmo-redesign .elementor-location-footer .elementor-element-92d6bee .elementor-heading-title {
    font-size: 14px;
    margin-bottom: 14px;
  }

  .cosmo-redesign .elementor-location-footer .elementor-icon-list-item a {
    min-height: 44px;
  }

  .cosmo-redesign .elementor-location-footer > .elementor-element-3703f1f {
    padding-block: 42px 0;
  }

  .cosmo-redesign .elementor-location-footer .elementor-element-6250622 {
    padding-block: 26px 30px;
  }

  /* El ancho completo de las columnas en móvil evita el scroll horizontal. */
  .cosmo-redesign .elementor-location-footer .elementor-icon-list-text {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* ---------- ≤ 544px : móvil estándar ---------- */
@media (max-width: 544px) {

  .cosmo-redesign .elementor-location-header .icon-menu {
    padding-inline: 6px;
  }

  /* Recalcula el ancho de la burbuja al cambiar el padding (6px*2 = 12px):
     12px + (100% - 12px)/5 = 20% + 9.6px */
  .cosmo-redesign .elementor-location-header .icon-menu > .elementor-widget-divider {
    width: calc(20% + 9.6px);
  }

  .cosmo-redesign .elementor-location-header .icon-menu .elementor-icon svg {
    width: 22px;
    height: 22px;
  }

  .cosmo-redesign .elementor-location-header .icon-menu .elementor-icon-box-title {
    font-size: 10px;
  }

  .cosmo-redesign .elementor-location-header .icon-menu .elementor-divider-separator {
    width: 44px;
    height: 32px;
  }

  .cosmo-redesign .elementor-location-footer .elementor-social-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 14px;
  }

  .cosmo-redesign .elementor-location-footer .elementor-element-4063bfe .elementor-heading-title {
    font-size: 13px;
  }
}

/* ---------- ≤ 480px : móvil pequeño ---------- */
@media (max-width: 480px) {

  /* En pantallas muy estrechas el ítem central ("CosmoBeauty") es el más
     largo: se reduce un punto para que no se corte con elipsis. */
  .cosmo-redesign .elementor-location-header .icon-menu .elementor-icon-box-title {
    font-size: 9.5px;
    letter-spacing: 0;
  }

  .cosmo-redesign .elementor-location-header .icon-menu .elementor-icon svg {
    width: 21px;
    height: 21px;
  }

  .cosmo-redesign .elementor-location-footer .elementor-widget-image img {
    max-width: 104px;
    max-height: 104px;
  }
}
/* =============================================================================
   FIX 17. Contenedores internos del header con fondo blanco de Elementor
   -----------------------------------------------------------------------------
   Los contenedores internos de la barra desktop (02e91cc = logo, 8dea4df = menú,
   97df043 = CTAs) traían background blanco sólido desde el editor, lo que:
     · creaba "cajas" blancas dentro de la barra,
     · volvía invisible el logo claro (blanco sobre blanco),
     · rompía el look de barra única.
   Se neutralizan a transparente para que el fondo de la barra (morado) se vea
   continuo. Mismo tratamiento para la barra tablet (8a46dd1) por consistencia.
   ============================================================================= */
.cosmo-redesign .elementor-location-header .elementor-element-02e91cc,
.cosmo-redesign .elementor-location-header .elementor-element-8dea4df,
.cosmo-redesign .elementor-location-header .elementor-element-97df043,
.cosmo-redesign .elementor-location-header .elementor-element-8a46dd1 > .elementor-element {
  background-color: transparent;
  border-bottom-width: 0;
  box-shadow: none;
}

/* =============================================================================
   FIX 20. Menú desplegable móvil con bajo contraste
   -----------------------------------------------------------------------------
   Elementor (post-471) pinta el desplegable con verde #14A52E / #81B850 y el
   texto blanco al 72% → contraste 1.64:1 (ilegible). Se sustituye por el morado
   profundo de marca, texto blanco pleno y estado resaltado en morado.
   ============================================================================= */
@media (max-width: 1024px) {
  .cosmo-redesign .elementor-location-header .elementor-nav-menu--dropdown {
    background-color: #2B0433;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 18px 40px rgba(20, 1, 24, 0.45);
  }

  .cosmo-redesign .elementor-location-header .elementor-nav-menu--dropdown .elementor-item,
  .cosmo-redesign .elementor-location-header .elementor-nav-menu--dropdown .elementor-sub-item {
    color: #ffffff;
  }

  .cosmo-redesign .elementor-location-header .elementor-nav-menu--dropdown .elementor-item:hover,
  .cosmo-redesign .elementor-location-header .elementor-nav-menu--dropdown .elementor-item:focus,
  .cosmo-redesign .elementor-location-header .elementor-nav-menu--dropdown a.highlighted {
    background-color: rgba(113, 12, 126, 0.55);
    color: #ffffff;
  }

  .cosmo-redesign .elementor-location-header .elementor-nav-menu--dropdown .elementor-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}