/* Tecnophone — identidad clara con acentos tecnológicos. */
:root {
  --tec-navy: var(--loq-secondary, #0b1023);
  --tec-blue: var(--loq-primary, #2563ff);
  --tec-violet: var(--loq-primary-hover, #7b5cff);
  --tec-pink: #ff4dcc;
  --tec-cyan: var(--loq-primary, #00d4ff);
  --tec-gradient: linear-gradient(135deg, var(--loq-primary, #2563ff) 0%, var(--loq-primary-hover, #7b5cff) 100%);
}

/* El menu automatico comparte exactamente el contenedor global en desktop.
   Los elementos internos no reconstruyen un segundo gutter. */
@media (min-width: 768px) {
  body.home .loq-auto-submenu:not(.hero-menu-scene__menu .loq-auto-submenu) {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--loq-container, 1376px);
    margin-inline: auto;
    padding-inline: var(--loq-gutter-desktop, 24px);
  }

  body.home .loq-auto-submenu:not(.hero-menu-scene__menu .loq-auto-submenu) .loq-auto-submenu__head,
  body.home .loq-auto-submenu:not(.hero-menu-scene__menu .loq-auto-submenu) .loq-auto-submenu__rail {
    padding-inline: 0;
  }
}

/* Menú automático Tecnophone: la card se reconoce por imagen y nombre;
   las descripciones variables agregaban ruido y alturas inconsistentes. */
body.home .loq-auto-submenu :is(
  .loq-auto-submenu__desc,
  .loq-auto-submenu__subcats-text
) {
  display: none !important;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--loq-font) !important;
}

body {
  background: var(--loq-bg, #ffffff);
  color: var(--loq-text);
}

.loq-trust-bar {
  background-color: var(--tec-navy);
}

.loq-footer-shell,
.site-footer {
  background:
    radial-gradient(circle at 18% 8%, rgb(var(--loq-primary-rgb, 37 99 255) / 0.12) 0, transparent 34%),
    radial-gradient(circle at 82% 92%, rgba(255, 77, 204, 0.075) 0, transparent 30%),
    var(--tec-navy);
}

.loq-trust-bar {
  border-bottom: 1px solid rgba(123, 92, 255, 0.35);
}

a:hover,
.woocommerce a:hover {
  color: var(--tec-violet);
}

.button,
button.button,
input.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button:not(.is-link) {
  background: var(--tec-gradient) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgb(var(--loq-primary-rgb, 37 99 255) / 0.2);
}

.button:hover,
button.button:hover,
input.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-components-button:not(.is-link):hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

input:focus,
select:focus,
textarea:focus,
.loq-searchbar__input:focus {
  border-color: var(--tec-blue) !important;
  box-shadow: 0 0 0 3px rgb(var(--loq-primary-rgb, 37 99 255) / 0.14) !important;
  outline: none;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.loq-product-card__price {
  color: var(--tec-blue) !important;
}

::selection {
  background: rgb(var(--loq-primary-rgb, 37 99 255) / 0.24);
  color: var(--tec-navy);
}

/* Home product rails keep readable cards and a clear next-card cue on small screens. */
body.home .loq-block--simple-grid {
  --loq-simple-grid-card-width: clamp(136px, 39vw, 156px);
}

@media (min-width: 480px) and (max-width: 767px) {
  body.home .loq-block--simple-grid {
    --loq-simple-grid-card-width: clamp(144px, 30vw, 168px);
  }
}

@media (min-width: 768px) {
  body.home .loq-block--simple-grid {
    --loq-simple-grid-card-width: 188px;
  }
}

/* Storefront benefits: one quiet, readable row between hero and catalog. */
.loq-infobar-s--compact {
  padding-block: var(--loq-space-2);
}

.loq-infobar-s--compact .loq-infobar-s__grid {
  gap: var(--loq-space-2);
}

.loq-infobar-s--compact .loq-infobar-s__card {
  min-height: 40px;
  height: auto;
  padding-inline: var(--loq-space-2);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--loq-text);
}

.loq-infobar-s--compact .loq-infobar-s__title {
  color: var(--loq-text);
  font-size: var(--loq-text-sm);
  font-weight: var(--loq-font-medium);
  line-height: 1.25;
  letter-spacing: 0;
  white-space: normal;
}

.loq-infobar-s--compact .loq-infobar-s__icon,
.loq-infobar-s--compact .loq-infobar-s__card--color-2 .loq-infobar-s__icon,
.loq-infobar-s--compact .loq-infobar-s__card--color-3 .loq-infobar-s__icon {
  width: 18px;
  height: 18px;
  color: var(--loq-primary);
}

.loq-infobar-s--compact .loq-infobar-s__icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
}

@media (max-width: 767px) {
  .loq-infobar-s--compact {
    padding-block: var(--loq-space-1);
  }

  .loq-infobar-s--compact .loq-infobar-s__grid {
    gap: 2px;
  }

  .loq-infobar-s--compact .loq-infobar-s__card {
    min-height: 46px;
    padding-inline: 3px;
    gap: 4px;
  }

  .loq-infobar-s--compact .loq-infobar-s__title {
    display: -webkit-box;
    overflow: hidden;
    font-size: 10px;
    text-align: left;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .loq-infobar-s--compact .loq-infobar-s__icon {
    width: 14px;
    height: 14px;
  }

  .loq-infobar-s--compact .loq-infobar-s__icon svg {
    width: 13px;
    height: 13px;
  }
}

/* Hero desktop: baja la foto para evitar que el encuadre corte su parte superior. */
@media (min-width: 1024px) {
  .hero-menu-scene.has-no-menu .hero-menu__img {
    object-position: center 42%;
  }
}