/* themes/mundo-electronico/theme.css
 * Estilos del tema Mundo Electrónico. Aplica al container + descendientes.
 * Compone con los tokens (tokens.css) y las primitivas (_shared/primitives.css).
 *
 * Identidad: warm paper, acento coral, titulares Bricolage Grotesque, cuerpo Hanken Grotesk,
 * botones pill, líneas finas de 1px y sombras cálidas suaves. La GEOMETRÍA de cada sección vive
 * en su módulo (frontend/assets/*.css); acá va el color/tipografía/forma (§5).
 *
 * Reglas CLAUDE.md §11: cero !important salvo utilidades atómicas; cero overrides defensivos.
 */

.lcl-container.theme-mundo-electronico {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--label-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.lcl-container.theme-mundo-electronico body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--label-primary);
}

/* Apariencia por sección: el wrapper con esquema forzado pinta su propio fondo/texto (las secciones
   de contenido son transparentes y heredan del container). Los tokens del subárbol ya los recalcula
   tokens.css vía data-color-scheme. */
.lcl-container.theme-mundo-electronico .lcl-section-appearance {
  background: var(--bg-primary);
  color: var(--label-primary);
}

/* ─── Tipografía ─── */
.lcl-container.theme-mundo-electronico h1,
.lcl-container.theme-mundo-electronico h2,
.lcl-container.theme-mundo-electronico h3,
.lcl-container.theme-mundo-electronico h4,
.lcl-container.theme-mundo-electronico .lcl-h1,
.lcl-container.theme-mundo-electronico .lcl-h2,
.lcl-container.theme-mundo-electronico .lcl-h3 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  color: var(--label-primary);
}

.lcl-container.theme-mundo-electronico h1,
.lcl-container.theme-mundo-electronico .lcl-h1 {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.lcl-container.theme-mundo-electronico h2,
.lcl-container.theme-mundo-electronico .lcl-h2 {
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.lcl-container.theme-mundo-electronico h3,
.lcl-container.theme-mundo-electronico .lcl-h3 {
  font-size: var(--fs-title-1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.lcl-container.theme-mundo-electronico p,
.lcl-container.theme-mundo-electronico .lcl-body {
  font-size: var(--fs-body);
  color: var(--label-secondary);
}

.lcl-container.theme-mundo-electronico .lcl-lead {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--label-secondary);
  line-height: var(--lh-relaxed);
}

/* Eyebrow = la etiqueta "mono" de Mundo Electrónico: mayúsculas, tracking ancho, coral. El 80% del look. */
.lcl-container.theme-mundo-electronico .lcl-eyebrow {
  font-size: var(--fs-footnote);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-pressed);
}

/* Énfasis inline: el texto entre *asteriscos* del subtítulo (HeroRenderer::render_emphasis). */
.lcl-container.theme-mundo-electronico .lcl-em {
  color: var(--accent);
  font-weight: var(--fw-semibold);
  font-style: normal;
}

/* Links */
.lcl-container.theme-mundo-electronico a {
  color: var(--accent);
  transition: color var(--dur-fast) var(--ease);
}
.lcl-container.theme-mundo-electronico a:hover { color: var(--accent-hover); }

/* ─── Botones (pill) — el componente más reusado de una landing. ─── */
.lcl-container.theme-mundo-electronico .lcl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 24px;
  font-family: var(--font-sans);
  font-size: var(--fs-callout);
  font-weight: var(--fw-bold);
  line-height: 1;
  border: 1.5px solid transparent;
  border-radius: var(--r-full);
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--dur-mid) var(--ease),
    box-shadow var(--dur-mid) var(--ease);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
}

/* En Mundo Electrónico el CTA primario es WhatsApp (verde de canal), no el acento azul (que se
   reserva para eyebrows, links y resaltes). Por eso el primario usa --wa. */
.lcl-container.theme-mundo-electronico .lcl-btn--primary {
  background: var(--wa);
  border-color: var(--wa);
  color: #fff;
  box-shadow: 0 8px 22px -10px var(--wa);
}
.lcl-container.theme-mundo-electronico .lcl-btn--primary:hover {
  background: var(--wa-hover);
  border-color: var(--wa-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px var(--wa);
}
.lcl-container.theme-mundo-electronico .lcl-btn--primary:active { transform: translateY(0); }

.lcl-container.theme-mundo-electronico .lcl-btn--ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--label-primary);
}
.lcl-container.theme-mundo-electronico .lcl-btn--ghost:hover {
  background: var(--label-primary);
  border-color: var(--label-primary);
  color: var(--bg-primary);
}

.lcl-container.theme-mundo-electronico .lcl-btn--link {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
  padding-inline: 0;
  min-height: auto;
  box-shadow: none;
}

/* ─── Card: superficie agrupadora base. ─── */
.lcl-container.theme-mundo-electronico .lcl-card {
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  padding: var(--space-6);
  transition: border-color var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.lcl-container.theme-mundo-electronico .lcl-card:hover {
  border-color: var(--line-2);
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
}

/* Badge */
.lcl-container.theme-mundo-electronico .lcl-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 7px 13px;
  font-size: var(--fs-footnote);
  font-weight: var(--fw-bold);
  background: var(--fill-2);
  color: var(--label-primary);
  border-radius: var(--r-full);
}
.lcl-container.theme-mundo-electronico .lcl-badge--accent {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* Divider */
.lcl-container.theme-mundo-electronico .lcl-divider {
  height: 1px;
  background: var(--separator);
  width: 100%;
}

/* ─── Header (navegación superior) — identidad. Geometría en el módulo Header. ─── */
.lcl-container.theme-mundo-electronico .lcl-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg-primary) 82%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--separator);
}
.lcl-container.theme-mundo-electronico .lcl-header--static { position: static; }

/* Estilo 'Transparente' (overlay): flota fijo sobre el hero, sin caja; al bajar (is-scrolled, lo
   togglea theme.js) gana el fondo translúcido + blur para que los links se lean. */
.lcl-container.theme-mundo-electronico .lcl-header--overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.lcl-container.theme-mundo-electronico .lcl-header--overlay.is-scrolled {
  background: color-mix(in oklab, var(--bg-primary) 82%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--separator);
}

/* Menú móvil abierto: fondo OPACO para que el panel (nav + acciones) se lea, también en overlay
   (transparente sobre el hero). El colapso/geometría lo maneja el módulo Header. */
.lcl-container.theme-mundo-electronico .lcl-header.is-open {
  background: var(--bg-primary);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--separator);
}

.lcl-container.theme-mundo-electronico .lcl-header__brand {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  color: var(--label-primary);
}

/* Links de nav con subrayado que crece al hover (detalle de identidad de Mundo Electrónico). */
.lcl-container.theme-mundo-electronico .lcl-header__nav a {
  position: relative;
  color: var(--label-secondary);
  font-size: var(--fs-callout);
  font-weight: var(--fw-semibold);
}
.lcl-container.theme-mundo-electronico .lcl-header__nav a:hover { color: var(--label-primary); }
.lcl-container.theme-mundo-electronico .lcl-header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 0;
  background: var(--accent);
  border-radius: 2px;
  transition: width var(--dur-mid) var(--ease);
}
.lcl-container.theme-mundo-electronico .lcl-header__nav a:hover::after { width: 100%; }

/* Botón de acción del header (pill coral). Le da peso a la barra, como en el mockup. Reusa
   .lcl-btn--primary pero más compacto: el header pide un botón liviano, no el grande del hero. */
.lcl-container.theme-mundo-electronico .lcl-header__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.lcl-container.theme-mundo-electronico .lcl-header__cta {
  padding: 10px 18px;
  min-height: 0;
  font-size: var(--fs-callout);
}

/* ─── Footer ─── */
.lcl-container.theme-mundo-electronico .lcl-footer {
  border-top: 1px solid var(--separator);
  padding-block: var(--space-8);
  background: var(--surface);
  color: var(--label-tertiary);
  font-size: var(--fs-callout);
}

/* ─── CTA de scroll por sección (core: SectionCta) ─── */
.lcl-container.theme-mundo-electronico .lcl-cta-cue {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 3;
  display: flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  text-decoration: none;
  box-shadow: var(--shadow-accent);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.2s var(--ease);
}
.lcl-container.theme-mundo-electronico .lcl-cta-cue:hover {
  background: var(--accent-hover);
  color: var(--accent-contrast);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -12px var(--accent);
}
.lcl-container.theme-mundo-electronico .lcl-cta-cue__arrow {
  width: 22px;
  height: 22px;
  flex: none;
  animation: lcl-cta-bounce 1.6s ease-in-out infinite;
}
.lcl-container.theme-mundo-electronico .lcl-cta-cue:hover .lcl-cta-cue__arrow {
  animation-play-state: paused;
  transform: translateY(2px);
}
@keyframes lcl-cta-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* Ancla invisible que emite el core (id de la instancia y ancla nombrada). El descuento del
   header al saltar lo da scroll-padding-top del scroll root (themes/_shared/reset.css). */
.lcl-container.theme-mundo-electronico .lcl-section-anchor {
  display: block;
  height: 0;
}

/* ─── Reveal on scroll (lo dispara theme.js sobre [data-lcl-reveal]). Identidad de Mundo Electrónico:
   aparición sutil hacia arriba. El estado final visible es la base con reduced-motion. ─── */
.lcl-container.theme-mundo-electronico [data-lcl-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.lcl-container.theme-mundo-electronico [data-lcl-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Audience como FRANJA DE GARANTÍAS (look propio de Mundo Electrónico): banda navy fina con
   checks azules sin pill ni borde. El módulo aporta la geometría (fila centrada de items); el
   tema redefine el look (§5/§6), scopeado a este tema. */
.lcl-container.theme-mundo-electronico .lcl-audience {
  background: color-mix(in oklab, var(--dark-bg) 90%, #fff); /* navy2 ~#0C2F57 */
  padding-block: 18px;
}
.lcl-container.theme-mundo-electronico .lcl-audience__pills {
  gap: 14px 40px;
}
.lcl-container.theme-mundo-electronico .lcl-audience__pill {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  color: color-mix(in oklab, #fff 82%, var(--dark-bg));
  font-weight: var(--fw-medium);
}
.lcl-container.theme-mundo-electronico .lcl-audience__pill-icon {
  color: var(--accent);
  font-size: 17px;
}

/* Servicios: grilla fluida (auto-fit) como el mockup — las 5 cards entran en una fila en desktop
   y bajan solas en pantallas chicas. El min 210px es el del mockup: da el ancho justo para que
   "Electrodomésticos" (el título más largo) entre en una línea sin partirse. Gap 20px como el
   mockup. Gana por especificidad (3 clases) a .lcl-grid--N. */
.lcl-container.theme-mundo-electronico .lcl-services__grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
  max-width: none;
}
/* El inner de Servicios usa el ancho del mockup (wrap 1180px), no el --container-base (1080px): es
   el ancho exacto que deja entrar las 5 cards de 210px en una sola fila, como en el diseño. */
.lcl-container.theme-mundo-electronico .lcl-services .lcl-section__inner {
  max-width: 1180px;
}
/* Con 5 cards de 210px, el título más largo ("Electrodomésticos", 180px a 19px) no entra en 1 línea.
   Bajamos el título a 16px y ajustamos el padding lateral de la card: "Electrodomésticos" (~152px)
   entra holgado en el ancho útil (~166px) sin partirse, y los 5 títulos quedan uniformes en 1 línea. */
.lcl-container.theme-mundo-electronico .lcl-services__grid .lcl-services__item h3,
.lcl-container.theme-mundo-electronico .lcl-services__grid .lcl-services__item .lcl-h3 {
  font-size: 16px;
}
.lcl-container.theme-mundo-electronico .lcl-services__grid .lcl-services__item {
  padding-inline: 22px;
}
/* El microondas es una ilustración SVG (a color); el resto son emojis que se pintan a 28px. El CSS
   base capa el svg a 26px, así que acá lo subimos un poco para que iguale el peso visual de la fila. */
.lcl-container.theme-mundo-electronico .lcl-services__icon svg {
  width: 30px;
  height: 30px;
}

/* Pasos (variante cards, sin flecha): ícono arriba + número grande tenue en la esquina superior
   derecha de cada tarjeta, como el mockup. Gana por especificidad al CSS base de la variante. */
.lcl-container.theme-mundo-electronico .lcl-steps__step {
  position: relative;
}
.lcl-container.theme-mundo-electronico .lcl-steps__n {
  position: absolute;
  top: 26px;
  right: 30px;
  margin: 0;
  padding: 0;
  background: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 46px;
  line-height: 1;
  color: color-mix(in oklab, var(--accent) 16%, var(--bg-secondary));
}
.lcl-container.theme-mundo-electronico .lcl-steps__icon {
  display: block;
  margin-bottom: 20px;
}
.lcl-container.theme-mundo-electronico .lcl-steps__icon img {
  width: 52px;
  height: 52px;
  display: block;
}

/* Pie oscuro: fondo navy (el texto ya floten a claro por data-color-scheme="dark" del módulo) +
   logo invertido a blanco. */
.lcl-container.theme-mundo-electronico .lcl-footer[data-color-scheme="dark"] {
  background: var(--dark-bg);
}
.lcl-container.theme-mundo-electronico .lcl-footer[data-color-scheme="dark"] .lcl-footer__brand-link img {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

@media (prefers-reduced-motion: reduce) {
  .lcl-container.theme-mundo-electronico .lcl-cta-cue__arrow { animation: none; }
  .lcl-container.theme-mundo-electronico .lcl-cta-cue { transition: none; }
  .lcl-container.theme-mundo-electronico [data-lcl-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ─── Hero split-aside: valores exactos del mockup del cliente (Rediseño Mundo Electrónico) ─── */
/* La ESTRUCTURA la da el módulo Hero (variante split-aside, editable por campos); acá el tema fija
   el look 1:1 de ESTE cliente, scopeado al container (regla 6). */

/* Suavizado de fuente como el mockup: el reset base usa antialiased y adelgaza el texto. Scopeado a
   todo el tema para que el peso coincida en TODA la landing (el mockup no toca el suavizado). */
.lcl-container.theme-mundo-electronico {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* Lienzo: gradiente navy exacto. El ALTO lo controla el preset del operador (compact/standard/full):
   no lo forzamos acá, así "pantalla completa" (100vh) y los demás altos funcionan. El padding solo
   marca un mínimo cómodo cuando el alto es por contenido. */
.lcl-container.theme-mundo-electronico .lcl-hero--split-aside {
  background: linear-gradient(160deg, #0A2A50 0%, #08213F 55%, #061a31 100%);
  padding-block: clamp(48px, 7vw, 92px);
}
/* Ancho 1200 + columnas por flex (texto más ancho que la tarjeta), como el mockup. */
.lcl-container.theme-mundo-electronico .lcl-hero--split-aside .lcl-hero__inner {
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}
/* Columna de texto a la izquierda (la variante es texto + tarjeta, no centrada). */
.lcl-container.theme-mundo-electronico .lcl-hero--split-aside .lcl-hero__content {
  flex: 1 1 440px;
  min-width: 0;
  text-align: left;
  align-items: flex-start;
  margin-inline: 0;
}
/* Título y métricas ocupan toda la columna (quiebre del h1 y línea superior como el mockup). */
.lcl-container.theme-mundo-electronico .lcl-hero--split-aside .lcl-hero__title,
.lcl-container.theme-mundo-electronico .lcl-hero--split-aside .lcl-hero__stats {
  align-self: stretch;
}
.lcl-container.theme-mundo-electronico .lcl-hero--split-aside .lcl-hero__title {
  font-size: clamp(36px, 5.4vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 900;
}
.lcl-container.theme-mundo-electronico .lcl-hero--split-aside .lcl-hero__subtitle {
  max-width: 560px;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  color: #cdd9e6;
}

/* Badge: pastilla azul translúcida con punto verde (el renderer emite el punto en split-aside),
   en mayúsculas. */
.lcl-container.theme-mundo-electronico .lcl-hero--split-aside .lcl-hero__eyebrow--badge {
  background: rgba(59, 143, 224, .16);
  border: 1px solid rgba(59, 143, 224, .4);
  box-shadow: none;
  color: #bfe0ff;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* CTAs: esquinas 12px (no la pastilla del botón base) + fantasma con leve relleno claro. */
.lcl-container.theme-mundo-electronico .lcl-hero--split-aside .lcl-hero__ctas .lcl-btn { border-radius: 12px; }
.lcl-container.theme-mundo-electronico .lcl-hero--split-aside .lcl-hero__ctas .lcl-btn--ghost {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
}
.lcl-container.theme-mundo-electronico .lcl-hero--split-aside .lcl-hero__ctas .lcl-btn--ghost:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}
/* Pulse del CTA primario de WhatsApp, como el mockup (respeta reduced-motion). */
@keyframes lcl-me-wa-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 195, 94, .45); }
  50%      { box-shadow: 0 0 0 14px rgba(34, 195, 94, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .lcl-container.theme-mundo-electronico .lcl-hero--split-aside .lcl-hero__ctas .lcl-btn--primary {
    animation: lcl-me-wa-pulse 2.6s var(--ease, ease) infinite;
  }
}

/* Métricas: línea superior blanca translúcida exacta. */
.lcl-container.theme-mundo-electronico .lcl-hero--split-aside .lcl-hero__stats {
  border-top-color: rgba(255, 255, 255, .12);
}

/* Tarjeta de contacto: cristal blanco translúcido exacto (no el fill azulado por token). */
.lcl-container.theme-mundo-electronico .lcl-hero--split-aside .lcl-hero__aside {
  flex: 1 1 300px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
}
.lcl-container.theme-mundo-electronico .lcl-hero--split-aside .lcl-hero__aside-rows {
  border-top-color: rgba(255, 255, 255, .12);
}
.lcl-container.theme-mundo-electronico .lcl-hero--split-aside .lcl-hero__aside-icon {
  background: rgba(59, 143, 224, .18);
}
/* El CTA de la tarjeta es un <a>: la regla de link del tema (a { color: accent }) le ganaba al
   #fff del botón y lo pintaba celeste. Lo forzamos a blanco (también en hover). */
.lcl-container.theme-mundo-electronico .lcl-hero--split-aside .lcl-hero__aside-cta,
.lcl-container.theme-mundo-electronico .lcl-hero--split-aside .lcl-hero__aside-cta:hover {
  color: #fff;
}

/* ─── Botón "Enviar" del formulario de contacto ───
   El CTA primario del tema es verde (WhatsApp). El botón de enviar el correo NO debe usar ese verde
   para no confundirse con los CTAs de WhatsApp: va en el azul de marca (--accent). Gana por
   especificidad (3 clases) a .theme-… .lcl-btn--primary (2 clases). */
.lcl-container.theme-mundo-electronico .lcl-contact__form .lcl-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 8px 22px -10px var(--accent);
}
.lcl-container.theme-mundo-electronico .lcl-contact__form .lcl-btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-contrast);
}

/* ─── Muro de marcas: 5 por fila, logos más grandes, última fila centrada ───
   El módulo trae una grilla fluida (auto-fill) que alinea la última fila a la izquierda. Para
   "5 por fila + última fila centrada" usamos flex-wrap + justify-content:center e ítems fijados a
   1/5 del ancho (descontando los 4 gaps). Sobrescribe por especificidad (theme scope), sin
   !important. box-sizing:border-box (reset) → el 1/5 es exacto con padding+borde. Responsivo:
   5 en desktop, 3 en tablet, 2 en móvil (5 apretados no se leen en pantallas chicas). */
.lcl-container.theme-mundo-electronico .lcl-brands__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.lcl-container.theme-mundo-electronico .lcl-brands__logo {
  flex: 0 0 calc((100% - 4 * 18px) / 5);
  height: 116px;
  padding: 20px;
}
.lcl-container.theme-mundo-electronico .lcl-brands__logo img {
  max-height: 66px;
}
@media (max-width: 900px) {
  .lcl-container.theme-mundo-electronico .lcl-brands__logo {
    flex-basis: calc((100% - 2 * 18px) / 3); /* 3 por fila */
  }
}
@media (max-width: 560px) {
  .lcl-container.theme-mundo-electronico .lcl-brands__logo {
    flex-basis: calc((100% - 18px) / 2); /* 2 por fila */
    height: 96px;
  }
}