/** Shopify CDN: Minification failed

Line 722:9 Expected identifier but found whitespace
Line 722:10 Unexpected "24px"

**/
/* ==========================================================================
   METALGAMA — Ajustes adicionales (archivo nuevo, evita el theme.css bloqueado)
   Cualquier cambio nuevo de aquí en adelante se agrega en este archivo.
   ========================================================================== */

/* Fix: el grid de 2 columnas del Quick View iba en .quick-view__panel,
   pero los hijos reales (imagen + info) están dentro de .quick-view__content */
.quick-view__panel {
  display: block;
}
.quick-view__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.quick-view__loading {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  .quick-view__content { grid-template-columns: 1fr; }
}
.page-intro {
  text-align: center;
}
.page-intro p {
  margin-left: auto;
  margin-right: auto;
}
.page-intro__actions {
  justify-content: center;
}
/* Evitar scroll horizontal accidental en cualquier pantalla */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
/* Forzar centrado del encabezado de pagina (Lo Nuevo, etc.) */
.section .page-width .page-intro {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
.section .page-width .page-intro p {
  margin-left: auto !important;
  margin-right: auto !important;
}
.section .page-width .page-intro__actions {
  justify-content: center !important;
}
/* Fix real del desborde horizontal: las tarjetas de producto no se encogian
   lo suficiente porque el texto interno tenia un ancho minimo mayor al de
   la columna. Esto permite que se acomoden sin desbordar el grid. */
.product-grid > * {
  min-width: 0;
}
.product-card__meta {
  flex-wrap: wrap;
}
.product-card__title span {
  word-break: break-word;
}
/* Mismo fix de encogimiento, aplicado a la pagina de producto y al carrito,
   donde se repetia el mismo problema (texto/botones que no se encogian). */
.product-page,
.product-page > div,
.product-info,
.product-gallery {
  min-width: 0;
}
.product-form__add-row > * {
  min-width: 0;
  flex: 1 1 0;
}
.product-info__desc,
.product-info__desc * {
  overflow-wrap: break-word;
}
.cart-page > *,
.cart-line {
  min-width: 0;
}
/* ==========================================================================
   Colección: banner automático + filtros laterales + badge "Personalizar"
   ========================================================================== */

.collection-page-heading { padding: 24px 0 0; }
.collection-page-heading h1 { font-size: clamp(26px, 3vw, 38px); margin: 0 0 20px; }

.collection-banner {
  position: relative;
  display: block;
  min-height: 220px;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 32px;
  background: var(--color-primary);
}
.collection-banner img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.collection-banner__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,11,12,.15) 0%, rgba(10,11,12,.78) 78%);
}
.collection-banner__text {
  position: absolute; right: 0; top: 0; bottom: 0;
  z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 380px;
  padding: 32px 36px;
  color: #fff;
  text-align: right;
}
.collection-banner__text h2 { color: #fff; font-size: 22px; text-transform: none; margin: 0 0 8px; }
.collection-banner__text p { color: #d6d8da; font-size: 13.5px; margin: 0 0 12px; }
.collection-banner__cta { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 700px) {
  .collection-banner__text { max-width: 100%; align-items: flex-start; text-align: left; background: rgba(10,11,12,.15); }
  .collection-banner__overlay { background: linear-gradient(180deg, rgba(10,11,12,.1) 30%, rgba(10,11,12,.85) 100%); }
}

.collection-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
  padding-bottom: 64px;
}
.collection-results { min-width: 0; }

.collection-filters__toggle {
  display: none;
  align-items: center; gap: 8px;
  width: 100%;
  background: #fff;
  border: 1px solid var(--color-border);
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.filter-group { padding: 18px 0; border-bottom: 1px solid var(--color-border); }
.filter-group:first-child { padding-top: 0; }
.filter-group h4 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 12px; }

.filter-list { display: flex; flex-direction: column; gap: 10px; }
.filter-checkbox {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px;
  cursor: pointer;
}
.filter-checkbox input { width: 16px; height: 16px; accent-color: var(--color-accent); }
.filter-checkbox__count { color: #9a9ea1; font-size: 12px; }

.filter-price { display: flex; align-items: center; gap: 8px; }
.filter-price input {
  width: 100%;
  border: 1px solid var(--color-border);
  padding: 8px 10px;
  font-size: 13px;
  border-radius: var(--radius);
}

.filter-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; }
.filter-toggle input { display: none; }
.filter-toggle__switch {
  width: 36px; height: 20px;
  border-radius: 20px;
  background: var(--color-border);
  position: relative;
  transition: background .2s ease;
  flex-shrink: 0;
}
.filter-toggle__switch::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s ease;
}
.filter-toggle input:checked + .filter-toggle__switch { background: var(--color-accent); }
.filter-toggle input:checked + .filter-toggle__switch::after { transform: translateX(16px); }

.filter-empty { font-size: 12.5px; color: #6b6e71; line-height: 1.6; }
.filter-clear { display: inline-block; margin-top: 16px; font-size: 12.5px; text-decoration: underline; color: var(--color-accent); }

@media (max-width: 900px) {
  .collection-layout { grid-template-columns: 1fr; }
  .collection-filters__toggle { display: flex; }
  .collection-filters__panel { display: none; }
  .collection-filters__panel.is-open { display: block; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: 20px; }
}

.product-card__personalize-badge {
  position: absolute; top: 10px; left: 10px;
  z-index: 4;
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 20px;
}
/* ==========================================================================
   Filtros estilo acordeón (con flechita), igual a la referencia
   ========================================================================== */

.filter-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 16px 0;
}

.filter-group {
  border-bottom: 1px solid var(--color-border);
  padding: 6px 0;
}
.filter-group:last-of-type { border-bottom: none; }

.filter-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  padding: 12px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.filter-group summary::-webkit-details-marker { display: none; }
.filter-group__chevron { transition: transform .2s ease; flex-shrink: 0; }
.filter-group[open] .filter-group__chevron { transform: rotate(180deg); }

.filter-group__content { padding-bottom: 14px; }

.filter-show-more {
  background: none;
  border: none;
  padding: 8px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-accent);
  cursor: pointer;
}
/* ==========================================================================
   Página de contacto
   ========================================================================== */

.contact-heading { max-width: 640px; padding: 24px 0 40px; }
.contact-heading h1 { font-size: clamp(28px, 3.6vw, 42px); margin: 10px 0 14px; }
.contact-heading p { color: #4b4d50; font-size: 15.5px; margin: 0; }

.contact-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  padding-bottom: 72px;
}

.contact-form-card,
.contact-info-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
}
.contact-form-card h3,
.contact-info-card h3 {
  font-size: 14px;
  letter-spacing: .04em;
  margin-bottom: 18px;
}

.contact-form__row { margin-bottom: 18px; }
.contact-form__row label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #4b4d50;
}
.contact-form__row input,
.contact-form__row textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 11px 13px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}
.contact-form__success {
  background: rgba(31,157,85,.1);
  color: #1f9d55;
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 13.5px;
  margin-bottom: 18px;
}

.contact-info-card {
  background: var(--color-surface);
}
.contact-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.contact-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  color: var(--color-text);
}
.contact-info-list svg { flex-shrink: 0; margin-top: 1px; color: var(--color-accent); }
.contact-hours { font-size: 14.5px; color: var(--color-text); margin: 0; white-space: pre-line; }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; gap: 24px; }
}
/* ==========================================================================
   Página de cotización
   ========================================================================== */

.contact-form-card select {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 11px 13px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}

.quote-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quote-list li {
  font-size: 14.5px;
  padding-left: 22px;
  position: relative;
}
.quote-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}
/* ==========================================================================
   Página normal de producto: resumen de opciones + link de cotización
   ========================================================================== */

.product-options-summary {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #5b5f63;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}
.product-options-summary strong { color: var(--color-text); }

.quote-inline-link {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  text-decoration: underline;
  color: var(--color-accent);
}

/* ==========================================================================
   Vista completa del configurador (product.configurador)
   ========================================================================== */

.configurator-page {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  min-height: calc(100vh - 140px);
}

.configurator-page__stage-col {
  background: var(--color-surface);
  padding: 28px 40px;
  position: relative;
}
.configurator-page__back {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--color-text);
}
.configurator-page__back:hover { color: var(--color-accent); }

.configurator-page__view-toggle {
  position: absolute;
  top: 28px; right: 40px;
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.configurator-page__view-toggle button {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #9a9ea1;
}
.configurator-page__view-toggle button.is-active { background: var(--color-primary); color: #fff; }
.configurator-page__view-toggle button:disabled { cursor: not-allowed; opacity: .5; }

.configurator-page__stage {
  aspect-ratio: 1/1;
  max-width: 620px;
  margin: 40px auto 24px;
  display: flex; align-items: center; justify-content: center;
}
.configurator-page__stage img { width: 100%; height: 100%; object-fit: contain; }

.configurator-page__thumbs {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.configurator-page__thumbs img {
  width: 70px; height: 70px; object-fit: contain;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 6px;
  cursor: pointer;
}
.configurator-page__thumbs img.is-active { border-color: var(--color-accent); }

.configurator-page__panel {
  background: #fff;
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 140px);
  position: sticky;
  top: 140px;
}
.configurator-page__panel-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 36px 36px 16px;
}
.configurator-page__panel-scroll h1 { font-size: 24px; margin: 8px 0 18px; }

.configurator-page__bar {
  border-top: 1px solid var(--color-border);
  padding: 18px 36px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
}
.configurator-page__bar-price { font-size: 19px; font-weight: 700; }
.configurator-page__bar-label { font-size: 11.5px; color: #9a9ea1; }
.configurator-page__bar .btn { margin-left: auto; padding: 13px 28px; }

@media (max-width: 989px) {
  .configurator-page { grid-template-columns: 1fr; min-height: auto; }
  .configurator-page__panel { position: static; height: auto; }
  .configurator-page__stage-col { padding: 20px; }
  .configurator-page__view-toggle { top: 20px; right: 20px; }
  .configurator-page__bar { position: sticky; bottom: 0; flex-wrap: wrap; }
}
/* ==========================================================================
   Modo de capas 2D (base fija + overlay de color)
   ========================================================================== */

.configurator-page__stage {
  position: relative;
}
.configurator-page__stage-base,
.configurator-page__stage-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.configurator-page__stage-base { z-index: 1; }
.configurator-page__stage-overlay {
  z-index: 2;
  transition: opacity .2s ease;
}
/* Banner de colección — más grande y la imagen sin deformarse */
.collection-banner {
  display: block;
  position: relative;
  height: 460px;
  overflow: hidden;
}

.collection-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Versión más baja en celular, para que no ocupe toda la pantalla */
@media (max-width: 749px) {
  .collection-banner {
    height: 260px;
  }
}
/* ===== Footer mejorado (site-footer--v2) ===== */
.site-footer--v2 { position: relative; }

.site-footer__accent-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary, #1b3a5c), var(--color-accent, #2e5fa3));
}

.site-footer--v2 .site-footer__brand-name {
  font-size: 19px;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}

.site-footer--v2 .site-footer__about {
  font-size: 13.5px;
  line-height: 1.6;
  opacity: 0.75;
  max-width: 320px;
}

.site-footer--v2 .site-footer__col-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-accent, #2e5fa3);
  display: inline-block;
}

.site-footer--v2 .site-footer__link-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer--v2 .site-footer__link-list li { margin-bottom: 11px; }
.site-footer--v2 .site-footer__link-list a {
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s ease, padding-left 0.2s ease;
}
.site-footer--v2 .site-footer__link-list a:hover {
  opacity: 1;
  padding-left: 3px;
}

.site-footer--v2 .site-footer__contact-list {
  list-style: none;
  margin: 18px 0 22px;
  padding: 0;
}
.site-footer--v2 .site-footer__contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  opacity: 0.85;
  margin-bottom: 10px;
  line-height: 1.4;
}
.site-footer--v2 .site-footer__contact-list svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--color-accent, #2e5fa3);
}

.site-footer--v2 .site-footer__follow-label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 12px;
}

.site-footer--v2 .site-footer__social {
  display: flex;
  gap: 10px;
}
.site-footer--v2 .site-footer__social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.site-footer--v2 .site-footer__social a:hover {
  background: var(--color-accent, #2e5fa3);
  border-color: var(--color-accent, #2e5fa3);
  transform: translateY(-2px);
}

.site-footer--v2 .site-footer__newsletter-text {
  font-size: 13.5px;
  opacity: 0.75;
  margin-bottom: 16px;
}

.site-footer--v2 .site-footer__newsletter {
  display: flex;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  overflow: hidden;
}
.site-footer--v2 .site-footer__newsletter input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 11px 14px;
  color: inherit;
  font-size: 13.5px;
}
.site-footer--v2 .site-footer__newsletter input::placeholder { opacity: 0.5; }
.site-footer--v2 .site-footer__newsletter button {
  background: var(--color-accent, #2e5fa3);
  border: 0;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}
.site-footer--v2 .site-footer__newsletter button:hover {
  background: var(--color-primary, #1b3a5c);
}
.site-footer--v2 .site-footer__newsletter-success {
  font-size: 13px;
  color: var(--color-accent, #2e5fa3);
}

.site-footer--v2 .site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 8px;
}
/* ===== Tablas en artículos de blog ===== */
/* ===== Tablas en artículos de blog ===== */
.article-page__body .table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 24px 0;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.article-page__body table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.article-page__body table thead tr {
  background: var(--color-primary, #1b3a5c);
  color: #fff;
}
.article-page__body table thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.article-page__body table tbody tr {
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s ease;
}
.article-page__body table tbody tr:nth-child(even) {
  background: #f7f9fc;
}
.article-page__body table tbody tr:last-child { border-bottom: 0; }
.article-page__body table tbody tr:hover { background: #eef3fa; }
.article-page__body table tbody td {
  padding: 11px 16px;
  color: var(--color-text, #1a1a1a);
  vertical-align: top;
}

@media (max-width: 749px) {
  .article-page__body table { font-size: 13.5px; }
  .article-page__body table thead th,
  .article-page__body table tbody td { padding: 10px 12px; }
}
  margin: 24px 0;
  font-size: 14.5px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.article-page__body table thead tr {
  background: var(--color-primary, #1b3a5c);
  color: #fff;
}
.article-page__body table thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.article-page__body table tbody tr {
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s ease;
}
.article-page__body table tbody tr:nth-child(even) {
  background: #f7f9fc;
}
.article-page__body table tbody tr:last-child { border-bottom: 0; }
.article-page__body table tbody tr:hover { background: #eef3fa; }
.article-page__body table tbody td {
  padding: 11px 16px;
  color: var(--color-text, #1a1a1a);
  vertical-align: top;
}