/* =========================================================
   Metales Concepción — sistema de diseño
   Paleta oficial: paleta de colores.png · Tipografía: Saira (cuerpo) · Saira Condensed (títulos)
   ========================================================= */

:root {
  --mc-negro: #0A0A0A;
  --mc-grafito: #17191C;
  --mc-acero: #2B2E33;
  --mc-gris-claro: #9EA3A8;
  --mc-plata: #E5E7E9;
  --mc-rojo: #E50914;
  --mc-rojo-oscuro: #8F0008;
  /* Tinte claro del rojo de marca, solo para texto chico sobre superficie oscura:
     el #E50914 sobre negro da 3,97:1 y no llega al 4,5:1 de WCAG AA. Este da 5,41:1. */
  --mc-rojo-claro: #FF3B47;
  --mc-blanco: #FFFFFF;
  --mc-gradiente-metalico: linear-gradient(135deg, #3D4046, #696D73);

  /* Saira: grotesca de formas cuadradas, en eco con la geometría del isotipo.
     La condensada queda para títulos —ocupa menos ancho y sostiene mejor los
     tamaños grandes—; la normal, para texto corrido, donde la condensada cansa. */
  --mc-font: "Saira", system-ui, -apple-system, sans-serif;
  --mc-font-display: "Saira Condensed", "Saira", system-ui, sans-serif;

  --mc-radius: 10px;
  --mc-radius-lg: 16px;
  --mc-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  --mc-container: 1240px;

  --mc-header-h: 100px;

  /* Superficies "dark glass" (componente 02 del liquid-glass-ui-kit),
     con los tokens del kit reexpresados en la paleta de la marca. */
  --mc-glass-fill: rgba(255, 255, 255, 0.10);
  --mc-glass-fill-dark: rgba(10, 10, 10, 0.42);
  --mc-glass-fill-dark-hover: rgba(10, 10, 10, 0.52);
  --mc-glass-border: rgba(255, 255, 255, 0.10);
  --mc-glass-border-bright: rgba(255, 255, 255, 0.24);
  --mc-glass-blur: blur(18px);
  --mc-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --mc-glass-float: 0 20px 60px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.30);
  --mc-glass-reflection: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 52%);
  --mc-glass-ease: cubic-bezier(0.22, 0.68, 0, 1.2);
  --mc-glass-dur: 360ms;
}

/* ---------- Reset base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--mc-font);
  color: var(--mc-negro);
  background: var(--mc-blanco);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
/* En una condensada el 800 se empasta y el tracking negativo cierra de más los
   contraformas: 700 y tracking neutro dan el mismo peso visual, más legibles. */
h1, h2, h3, h4 {
  font-family: var(--mc-font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.6em;
  letter-spacing: 0;
}
p { margin: 0 0 1em; }

.mc-container {
  width: min(var(--mc-container), calc(100% - 2.5rem));
  margin-inline: auto;
}
.mc-main { min-height: 50vh; }
.mc-section { padding: clamp(2.5rem, 5vw, 5rem) 0; }
.mc-section--dark { background: var(--mc-negro); color: var(--mc-plata); }
.mc-section--grafito { background: var(--mc-grafito); color: var(--mc-plata); }
.mc-section--plata { background: var(--mc-plata); color: var(--mc-negro); }

.mc-eyebrow {
  display: inline-block;
  color: var(--mc-rojo);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.6em;
}
/* El eyebrow es texto chico (0.8rem) en rojo de marca: sobre cualquier superficie
   oscura queda por debajo del contraste AA, así que ahí usa el tinte claro. */
.mc-section--dark .mc-eyebrow,
.mc-section--grafito .mc-eyebrow,
body.mc-metal .mc-eyebrow,
body.mc-quote .mc-eyebrow,
body.mc-auth .mc-eyebrow { color: var(--mc-rojo-claro); }
.mc-section-title { font-size: clamp(1.6rem, 3vw, 2.4rem); }
/* El gris claro está pensado para superficie oscura: sobre blanco da 2,5:1 y no
   se lee. El valor por defecto pasa a ser el gris oscuro (7,4:1 sobre blanco) y
   son las superficies oscuras las que lo aclaran. */
.mc-section-lead { color: #4b5157; max-width: 60ch; }
.mc-section--dark .mc-section-lead,
.mc-section--grafito .mc-section-lead,
body.mc-metal .mc-section-lead,
body.mc-quote .mc-section-lead,
body.mc-auth .mc-section-lead { color: var(--mc-gris-claro); }
.mc-rule { width: 56px; height: 4px; background: var(--mc-rojo); border: 0; margin: 0.8em 0 1.4em; }

/* ---------- Botones ---------- */
.mc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.6em;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  white-space: nowrap;
}
.mc-btn:active { transform: translateY(1px); }
.mc-btn--primary { background: var(--mc-rojo); color: #fff; }
.mc-btn--primary:hover { background: var(--mc-rojo-oscuro); }
.mc-btn--outline { background: transparent; border-color: var(--mc-plata); color: var(--mc-plata); }
.mc-btn--outline:hover { background: var(--mc-plata); color: var(--mc-negro); }
.mc-btn--outline-dark { background: transparent; border-color: var(--mc-acero); color: var(--mc-negro); }
.mc-btn--outline-dark:hover { background: var(--mc-negro); color: #fff; border-color: var(--mc-negro); }
.mc-btn--ghost { background: transparent; color: var(--mc-rojo); padding-inline: 0.2em; }
.mc-btn--ghost:hover { color: var(--mc-rojo-oscuro); }
.mc-btn--block { width: 100%; }
.mc-btn--lg { padding: 1em 2em; font-size: 1.05rem; }
.mc-btn[disabled], .mc-btn.disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Header ---------- */
.mc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--mc-negro);
  border-bottom: 1px solid var(--mc-acero);
}
.mc-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--mc-header-h);
}
.mc-logo img { height: 74px; width: auto; }
.mc-logo { display: inline-flex; align-items: center; }

.mc-nav { display: flex; }
.mc-nav__list { display: flex; align-items: center; gap: 1.9rem; }
.mc-nav__list > li { position: relative; }
.mc-nav__list a {
  color: var(--mc-plata);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.5em 0;
  display: inline-block;
}
.mc-nav__list a:hover,
.mc-nav__list li.current-menu-item > a { color: var(--mc-rojo); }

.mc-nav__list li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 0.5em;
}

.mc-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, calc(100vw - 2rem));
  background: var(--mc-grafito);
  border: 1px solid var(--mc-acero);
  border-radius: var(--mc-radius);
  box-shadow: var(--mc-shadow);
  padding: 1.2rem;
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem 1.2rem;
}
.mc-nav__list li.menu-item-has-children:hover .mc-mega,
.mc-nav__list li.menu-item-has-children:focus-within .mc-mega { display: grid; }
.mc-mega a {
  padding: 0.55em 0.6em;
  border-radius: 6px;
  font-size: 0.85rem;
}
.mc-mega a:hover { background: rgba(255,255,255,0.06); }
.mc-mega__desc { display: block; color: var(--mc-gris-claro); font-weight: 400; font-size: 0.76rem; margin-top: 0.15em; }

/* El panel se centra bajo "Productos" mientras haya lugar a la izquierda. Por debajo de
   ~1320px el ítem queda demasiado cerca del borde de la pantalla y el panel de 620px,
   centrado, se salía: 3px a 1280px, 62px a 1100px y 155px a 980px — con la primera columna
   de categorías cortada, que es lo que se veía. En ese rango se ancla al borde izquierdo del
   ítem, que siempre deja el panel entero adentro. Abajo de 1024px el menú ya es el
   desplegable del hamburguesa y el panel pasa a `position: static`, así que esto no aplica. */
@media (min-width: 1025px) and (max-width: 1320px) {
  .mc-mega {
    left: 0;
    transform: none;
  }
}

.mc-header__actions { display: flex; align-items: center; gap: 1.1rem; }
.mc-icon-link {
  position: relative;
  color: var(--mc-plata);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
}
.mc-icon-link:hover { background: rgba(255,255,255,0.08); }
.mc-icon-link svg { width: 20px; height: 20px; }
.mc-cart-count {
  position: absolute;
  top: -2px; right: -2px;
  background: var(--mc-rojo);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  min-width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

.mc-burger { display: none; background: none; border: 0; color: var(--mc-plata); padding: 0.4em; cursor: pointer; }
.mc-burger svg { width: 26px; height: 26px; }

/* ---------- Footer ---------- */
.mc-footer { background: var(--mc-negro); color: var(--mc-gris-claro); padding-top: 3.5rem; }
.mc-footer a:hover { color: var(--mc-rojo); }
.mc-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--mc-acero);
}
/* Última columna del pie ("Contacto"): en páginas cortas donde el pie entra sin
   scrollear (ej. /presupuestos/), es la que queda justo debajo del botón flotante
   de WhatsApp y perdía el final de la dirección y del mail. Misma reserva que el
   resto del pie; abajo de 860px la grilla pasa a una columna y manda la reserva
   vertical de .mc-footer__credit. */
.mc-footer__grid > *:last-child { padding-right: 5.5rem; }
.mc-footer__brand p { max-width: 32ch; font-size: 0.88rem; }
.mc-footer__brand .mc-logo img { height: 60px; margin-bottom: 0.8em; }
.mc-footer h4 { color: #fff; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1em; }
.mc-footer ul li { margin-bottom: 0.55em; font-size: 0.9rem; }
.mc-footer address { font-style: normal; font-size: 0.9rem; }
.mc-footer__social { display: flex; gap: 0.7rem; margin-top: 1.2em; }
.mc-footer__social a {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--mc-acero);
  display: flex; align-items: center; justify-content: center;
}
.mc-footer__social svg { width: 16px; height: 16px; }
.mc-footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.4rem 0; font-size: 0.78rem; flex-wrap: wrap; gap: 0.6rem;
  /* Espacio reservado a la derecha para el botón flotante de WhatsApp
     (48px + los 20px que lo separan del borde + los 13px que el anillo del pulso
     se sale por el lado de adentro), así "San Juan, Argentina" nunca queda tapado. */
  padding-right: 5.5rem;
}

/* Firma del desarrollador. Discreta a proposito: se lee si la buscas,
   pero no compite con el copyright del cliente. */
.mc-footer__credit {
  padding: 0 5.5rem 1.6rem 0;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--mc-gris-claro);
  opacity: 0.45;
}
.mc-footer__credit a { color: inherit; }

/* ---------- Hero (video) ---------- */
.mc-hero { position: relative; overflow: hidden; background: var(--mc-negro); color: #fff; }
.mc-hero__media { position: absolute; inset: 0; }
.mc-hero__media video, .mc-hero__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.mc-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.72) 55%, rgba(10,10,10,.92) 100%);
}
.mc-hero__content {
  position: relative;
  padding: clamp(4.5rem, 14vw, 9rem) 0 clamp(3.5rem, 8vw, 6rem);
}
.mc-hero__slogan {
  display: inline-flex;
  gap: 0.6em;
  flex-wrap: wrap;
  color: var(--mc-plata);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: clamp(0.75rem, 1.3vw, 0.95rem);
  margin-bottom: 1em;
}
.mc-hero__slogan span:not(:last-child)::after { content: "•"; margin-left: 0.6em; color: var(--mc-rojo); }
/* El tope va en `ch`, que es relativo a la fuente: al pasar a una condensada el
   mismo 18ch encogió a 550px y el título saltó a 4 renglones. 24ch devuelve los
   ~733px que ocupaba con Montserrat, y lo deja en 3. */
.mc-hero__title { font-size: clamp(2.2rem, 5.5vw, 4rem); max-width: 24ch; }
.mc-hero__lead { color: var(--mc-gris-claro); max-width: 52ch; font-size: 1.05rem; margin-bottom: 1.6em; }
.mc-hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- Tarjetas ---------- */
.mc-grid { display: grid; gap: 1.5rem; }
.mc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mc-grid--4 { grid-template-columns: repeat(4, 1fr); }

.mc-card {
  background: var(--mc-plata);
  color: var(--mc-negro);
  border-left: 4px solid var(--mc-rojo);
  border-radius: 4px;
  padding: 1.5rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mc-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.mc-card h3 { font-size: 1.05rem; margin-bottom: 0.5em; }
.mc-card p { color: #4b5157; font-size: 0.9rem; margin-bottom: 0.8em; }
.mc-card__icon { width: 42px; height: 42px; color: var(--mc-rojo); margin-bottom: 0.9em; }
.mc-card--dark { background: var(--mc-acero); color: #fff; }
.mc-card--dark p { color: var(--mc-gris-claro); }

/* Tarjeta de contacto con logo (columna lateral de Presupuestos) */
/* La caja de .mc-contact-card (fondo, filete, sombra, padding) ahora la aporta
   .mc-glass-card en page-presupuestos.php: acá quedan solo sus partes internas. */
.mc-contact-card__brand { text-align: center; }
.mc-contact-card__brand img { height: 84px; width: auto; }
.mc-contact-card__tagline {
  color: var(--mc-gris-claro);
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0.9em auto 0;
  max-width: 34ch;
}
.mc-contact-card .mc-rule { margin: 1.6rem auto; }
.mc-contact-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
.mc-contact-card__item { display: flex; align-items: flex-start; gap: 0.85rem; }
.mc-contact-card__item svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--mc-rojo); margin-top: 2px; }
.mc-contact-card__label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mc-gris-claro);
  margin-bottom: 0.15em;
}
.mc-contact-card__value { font-size: 0.95rem; line-height: 1.5; color: #fff; }
.mc-contact-card__value a { color: #fff; }
.mc-contact-card__value a:hover { color: var(--mc-rojo); }
.mc-contact-card__cta { margin-top: 1.8rem; }

.mc-cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 190px;
  border-radius: var(--mc-radius);
  overflow: hidden;
  background: var(--mc-gradiente-metalico);
  padding: 1.4rem;
  color: #fff;
}
.mc-cat-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.78) 100%);
}
.mc-cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mc-cat-card__body { position: relative; z-index: 1; }
.mc-cat-card h3 { font-size: 1.05rem; margin-bottom: 0.25em; }
.mc-cat-card p { font-size: 0.82rem; color: var(--mc-gris-claro); margin: 0; }
.mc-cat-card:hover h3 { color: var(--mc-rojo); }

/* =========================================================
   Slider de catálogo (Inicio · "Productos por familia de metal")
   Adaptación del center-mode slider: una categoría abierta y el resto
   en lomos angostos con el nombre rotado. Diferencia con el original:
   la tarjeta abierta no tiene ancho fijo (30rem), crece con `flex-grow`
   para ocupar lo que sobra. Así la fila entra siempre en el contenedor
   con las 8 categorías, sin scroll horizontal ni recorte.
   ========================================================= */
.mc-slider {
  --mc-slider-closed: 72px;
  --mc-slider-h: clamp(320px, 30vw, 416px);
  --mc-slider-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  margin-top: 2rem;
  position: relative;
}
.mc-slider__track {
  display: flex;
  gap: 14px;
  align-items: stretch;
}
.mc-slider__card {
  position: relative;
  flex: 0 1 var(--mc-slider-closed);
  min-width: var(--mc-slider-closed);
  height: var(--mc-slider-h);
  border-radius: var(--mc-radius-lg);
  overflow: hidden;
  cursor: pointer;
  background: var(--mc-grafito);
  transition: flex-grow 0.5s var(--mc-slider-ease),
              box-shadow 0.4s var(--mc-slider-ease);
}
.mc-slider__card[data-open] {
  flex-grow: 1;
  cursor: default;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}
.mc-slider__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Los lomos se ven mejor algo apagados; la abierta recupera color. */
  filter: brightness(0.6) saturate(0.8);
  transition: filter 0.45s var(--mc-slider-ease);
}
.mc-slider__card[data-open] .mc-slider__photo { filter: brightness(0.82) saturate(1); }
.mc-slider__card:hover .mc-slider__photo { filter: brightness(0.78) saturate(0.95); }
.mc-slider__card[data-open]:hover .mc-slider__photo { filter: brightness(0.82) saturate(1); }

/* El velo no es decorativo: sobre las zonas claras de la foto el texto
   blanco se cae, sobre todo en el lomo rotado. */
.mc-slider__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.15) 0%, rgba(10, 10, 10, 0.55) 45%, rgba(10, 10, 10, 0.92) 100%);
  pointer-events: none;
}

.mc-slider__spine {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 1rem 0;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  transition: opacity 0.25s;
}
.mc-slider__card[data-open] .mc-slider__spine { opacity: 0; pointer-events: none; }

.mc-slider__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem 1.7rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--mc-slider-ease), visibility 0.35s;
}
.mc-slider__card[data-open] .mc-slider__body {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.15s;
}
.mc-slider__title {
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  font-weight: 700;
  color: #fff;
  margin: 0;
  /* La tarjeta se está ensanchando mientras aparece el texto: sin esto el
     título salta de línea a mitad de la animación. */
  white-space: nowrap;
}
.mc-slider__desc {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--mc-plata);
  margin: 0;
  max-width: 42ch;
}
.mc-slider__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.5rem;
  padding: 0.62em 1.25em;
  border-radius: 6px;
  background: var(--mc-rojo);
  color: #fff;
  font-weight: 700;
  font-size: 0.86rem;
  transition: background 0.2s ease;
}
.mc-slider__link:hover { background: var(--mc-rojo-oscuro); color: #fff; }
.mc-slider__card:focus-visible,
.mc-slider__link:focus-visible {
  outline: 3px solid var(--mc-rojo);
  outline-offset: 3px;
}

.mc-slider__controls {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}
.mc-slider__controls[hidden] { display: none; }
.mc-slider__nav {
  width: 40px; height: 40px;
  border: 1px solid var(--mc-acero);
  border-radius: 50%;
  background: transparent;
  color: var(--mc-negro);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.mc-slider__nav svg { width: 20px; height: 20px; }
.mc-slider__nav:hover:not(:disabled) { background: var(--mc-rojo); border-color: var(--mc-rojo); color: #fff; }
.mc-slider__nav:disabled { opacity: 0.35; cursor: default; }

/* Sin JS los controles quedan ocultos (nacen con [hidden]) y el resto sigue
   funcionando: la primera tarjeta está abierta y las otras muestran su lomo. */

@media (max-width: 1080px) {
  .mc-slider { --mc-slider-closed: 60px; }
  .mc-slider__spine { font-size: 0.78rem; }
  .mc-slider__body { padding: 1.2rem 1.3rem; }
}

/* En vertical el center-mode no tiene sentido: 8 lomos de 60px no entran en
   375px. Se convierte en una lista apilada donde cada tarjeta muestra su
   nombre, y la abierta despliega descripción y botón. */
@media (max-width: 860px) {
  .mc-slider__track {
    flex-direction: column;
    gap: 0.7rem;
  }
  .mc-slider__card {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
    height: 84px;
    transition: height 0.45s var(--mc-slider-ease);
  }
  .mc-slider__card[data-open] { height: 300px; }
  .mc-slider__spine {
    writing-mode: horizontal-tb;
    transform: none;
    justify-content: flex-start;
    padding: 0 1.2rem;
    font-size: 1rem;
  }
  .mc-slider__body { padding: 1.2rem; }
  .mc-slider__title { white-space: normal; }
  .mc-slider__controls { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .mc-slider__card,
  .mc-slider__photo,
  .mc-slider__body,
  .mc-slider__spine { transition: none; }
}

/* ---------- Badges ---------- */
.mc-badge {
  display: inline-flex; align-items: center;
  padding: 0.3em 0.75em;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mc-badge--rojo { background: var(--mc-rojo); color: #fff; }
.mc-badge--outline { background: transparent; border: 1px solid currentColor; }
.mc-badge--plata { background: var(--mc-plata); color: var(--mc-negro); }

/* ---------- Formularios ---------- */
.mc-field { margin-bottom: 1.1rem; }
.mc-field label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.4em; }
.mc-field .mc-hint { display: block; font-size: 0.78rem; color: var(--mc-gris-claro); margin-top: 0.35em; }
.mc-field input:not([type=checkbox]):not([type=radio]),
.mc-field select,
.mc-field textarea {
  width: 100%;
  padding: 0.75em 0.9em;
  border: 1px solid var(--mc-acero);
  border-radius: 6px;
  background: #fff;
  font-size: 0.95rem;
}
.mc-section--dark .mc-field input:not([type=checkbox]):not([type=radio]),
.mc-section--dark .mc-field select,
.mc-section--dark .mc-field textarea,
.mc-section--grafito .mc-field input:not([type=checkbox]):not([type=radio]),
.mc-section--grafito .mc-field select,
.mc-section--grafito .mc-field textarea {
  background: var(--mc-grafito);
  border-color: var(--mc-acero);
  color: #fff;
}
.mc-field input:focus, .mc-field select:focus, .mc-field textarea:focus {
  outline: 2px solid var(--mc-rojo);
  outline-offset: 1px;
}
.mc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.mc-form-card {
  background: #fff;
  border: 1px solid var(--mc-plata);
  border-radius: var(--mc-radius);
  padding: 2rem;
  box-shadow: var(--mc-shadow);
}
.mc-form-card--dark { background: var(--mc-grafito); border-color: var(--mc-acero); color: #fff; }

.mc-notice {
  padding: 1em 1.2em;
  border-radius: 6px;
  font-size: 0.9rem;
  margin-bottom: 1.4em;
  border-left: 4px solid;
}
.mc-notice--info { background: rgba(158,163,168,0.15); border-color: var(--mc-gris-claro); }
.mc-notice--warning { background: rgba(229,9,20,0.08); border-color: var(--mc-rojo); }
.mc-notice--success { background: rgba(40,167,69,0.1); border-color: #2e7d32; }

/* ---------- Cabecera de página interna ---------- */
.mc-page-header { background: var(--mc-negro); color: #fff; padding: 3rem 0 2.2rem; }
.mc-page-header h1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin-bottom: 0.2em; }

/* Migas de pan: el sitio no lleva en ninguna sección — el markup se sacó de todas
   las plantillas del tema y en inc/setup.php se desengancha la miga nativa de
   WooCommerce. Esta regla es la red de contención para lo que el tema no escribe
   ni desengancha:
     .mc-breadcrumb        — markup propio, por si alguien lo reintroduce
     .woocommerce-breadcrumb — miga nativa de WooCommerce, si un plugin la imprime
                               por fuera del hook woocommerce_before_main_content
     .wp-block-breadcrumbs — bloque core/breadcrumbs de WordPress
     .wc-block-breadcrumbs — bloque de migas de WooCommerce Blocks
     nav[aria-label*=…]    — lo que suelen emitir los plugins de SEO. Va por
                             subcadena para que entre igual en singular y en
                             plural ("Breadcrumb" / "Breadcrumbs").
   Sin esto alcanza con insertar un bloque desde el editor para que reaparezca.

   La excepción de .woocommerce-review-order__meta NO es cosmética: WooCommerce
   reusa la clase .woocommerce-breadcrumb por estilo, no por semántica, en
   templates/order/customer-review-order.php, donde el <p> lleva los datos del
   pedido del cliente ("Nombre · email · Pedido #123"). Sin el :not(), activar
   esa función le escondería al cliente su propio comprobante. Hoy está apagada
   (opción woocommerce_feature_customer_review_request_enabled = no), así que
   esto es prevención, no un bug en curso. */
.mc-breadcrumb,
.woocommerce-breadcrumb:not(.woocommerce-review-order__meta),
.wp-block-breadcrumbs,
.wc-block-breadcrumbs,
nav[aria-label*="breadcrumb" i],
nav[aria-label*="ruta de navegación" i] { display: none !important; }

/* ---------- WhatsApp flotante ---------- */
/* Botón: "WhatsApp Pulse Button" de Cloud Andrade — MIT, copia completa con su
   licencia en /whatsapp-boton (https://codepen.io/datCloud/pen/ExNJMNM).
   Se respeta el diseño original (círculo verde plano de 70px y las dos animaciones
   de pulso). Tres adaptaciones al tema:
     · el icono va como SVG inline en vez de Font Awesome — el tema no carga esa
       librería y no justifica traerla entera por un solo glifo;
     · el position:fixed pasa al contenedor, para que el botón viaje junto a la
       burbuja de horario;
     · se agregan foco visible y soporte de prefers-reduced-motion.

   El contenedor no recibe clics: sólo lo hace el botón. Así la burbuja (que sigue
   presente en el DOM para poder animarse) nunca tapa el contenido de la página. */
.mc-whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  display: flex;
  align-items: center;
  /* Mayor que los 13px que el anillo del pulso se sale del botón, así no lo pisa. */
  gap: 1rem;
  pointer-events: none;
}

.mc-whatsapp-float__btn {
  pointer-events: auto;
  position: relative;
  flex-shrink: 0;
  /* 48px y no los 70px del original: a ese tamaño el botón competía con el contenido
     en cada pantalla del sitio. Todo lo que lo acompaña —el ícono, el anillo del pulso
     y el hueco que le reserva el pie— baja en la misma proporción, así que la pieza se
     achica entera y no se deforma. No baja de 48px porque 44px es el objetivo táctil
     mínimo (WCAG 2.5.5) y conviene dejar margen: es un botón que se toca con el pulgar
     y está pegado al borde de la pantalla. */
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  /* Pulso base del original: halo que se expande y se apaga. */
  animation: mc-wa-pulse 1.5s ease-out infinite;
  transition: transform 200ms ease;
}
.mc-whatsapp-float__btn svg { width: 28px; height: 28px; fill: currentColor; }
.mc-whatsapp-float__btn:hover { transform: scale(1.05); }
.mc-whatsapp-float__btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

@keyframes mc-wa-pulse {
  0%  { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  80% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
}

/* Segunda variante del original: en vez del halo, un anillo que crece y se desvanece.
   Es la que usamos (se lee mejor sobre el pie negro y sobre las fotos del catálogo);
   para volver al halo alcanza con quitar esta clase del HTML del widget. */
.mc-whatsapp-float__btn--ring { animation-play-state: paused; }
.mc-whatsapp-float__btn--ring::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  padding: 17px;
  border: 3px solid #25d366;
  opacity: 0.75;
  animation: mc-wa-pulse-border 1.5s ease-out infinite;
  /* El anillo es parte del <a>: sin esto su caja (que crece hasta 74px) se lleva
     los clics que pasen cerca del botón, y encima con un área que cambia en cada
     frame de la animación. Es decorativo, no debe recibir eventos. */
  pointer-events: none;
}
@keyframes mc-wa-pulse-border {
  0%   { padding: 17px; opacity: 0.75; }
  75%  { padding: 34px; opacity: 0; }
  100% { opacity: 0; }
}

.mc-whatsapp-float__bubble {
  order: -1;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px) scale(0.96);
  transform-origin: right center;
  background: var(--mc-glass-fill-dark);
  -webkit-backdrop-filter: var(--mc-glass-blur);
  backdrop-filter: var(--mc-glass-blur);
  color: #fff;
  border: 1px solid var(--mc-glass-border-bright);
  border-radius: var(--mc-radius);
  padding: 0.7em 0.95em;
  font-size: 0.8rem;
  line-height: 1.35;
  max-width: 230px;
  box-shadow: var(--mc-glass-shadow);
  transition:
    opacity var(--mc-glass-dur) var(--mc-glass-ease),
    transform var(--mc-glass-dur) var(--mc-glass-ease),
    visibility 0s linear var(--mc-glass-dur);
}
.mc-whatsapp-float__btn:hover + .mc-whatsapp-float__bubble,
.mc-whatsapp-float__btn:focus-visible + .mc-whatsapp-float__bubble {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s, 0s, 0s;
}
.mc-whatsapp-float__title { display: block; font-weight: 600; }
.mc-whatsapp-float__status {
  display: flex; align-items: center; gap: 0.45em;
  font-size: 0.7rem; margin-top: 0.35em;
  color: var(--mc-gris-claro);
}
.mc-whatsapp-float__status::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mc-gris-claro);
  flex-shrink: 0;
}
.mc-whatsapp-float__status.is-open { color: #4cd964; }
.mc-whatsapp-float__status.is-open::before {
  background: #4cd964;
  box-shadow: 0 0 0 3px rgba(76, 217, 100, 0.18);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mc-whatsapp-float__bubble { background: rgba(10, 10, 10, 0.92); }
}

/* ---------- Carrito: botones de pago ---------- */
.mc-cart-payment {
  background: var(--mc-plata);
  border-radius: var(--mc-radius);
  padding: 1.4rem;
  margin-top: 1.2rem;
}
.mc-cart-payment h3 { font-size: 1rem; margin-bottom: 0.9em; }
.mc-cart-payment__options { display: flex; gap: 1rem; flex-wrap: wrap; }
.mc-cart-payment__options .mc-btn { flex: 1 1 220px; }
.mc-cart-payment__note { font-size: 0.78rem; color: #4b5157; margin-top: 0.9em; margin-bottom: 0; }

/* ---------- Utilidades ---------- */
.mc-text-center { text-align: center; }
.mc-mt-0 { margin-top: 0; }
.mc-mb-0 { margin-bottom: 0; }
.mc-flex { display: flex; align-items: center; }
.mc-flex-between { display: flex; align-items: center; justify-content: space-between; }
.mc-gap-1 { gap: 0.6rem; }
.mc-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- WooCommerce: base ---------- */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; list-style: none; padding: 0; margin: 0; }
/* WooCommerce le pone a "li.product" un ancho en % (float-grid heredado) pensado para un
   contenedor sin display:grid. Si su hoja de estilos carga después de la nuestra, ese % se
   termina calculando contra el ancho de la celda del grid (no del contenedor completo) y las
   tarjetas quedan angostísimas. Lo neutralizamos de forma explícita acá — no alcanza con el
   orden de carga (mc-main ya depende de los estilos de WooCommerce en inc/setup.php), porque
   un plugin de caché/minificación podría reordenar igual el <head>. */
.woocommerce ul.products li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  list-style: none;
}
/* WooCommerce le agrega a "ul.products" un clearfix heredado del layout float (::before/::after
   con content:" "; display:table). En un contenedor display:grid esos pseudo-elementos no se
   ignoran: se "blockifican" en items de grid reales y ocupan la celda 1, corriendo cada tarjeta
   un lugar (la fila 1 queda con un hueco y un producto de menos). Los anulamos explícitamente
   para que el grid empiece limpio en la celda 1 con la primera tarjeta real. Especificidad
   igualada a la regla de WooCommerce (misma en woocommerce-layout.css) para no depender del
   orden de carga. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none;
  display: none;
}
.woocommerce span.onsale {
  background: var(--mc-rojo);
  color: #fff;
  font-family: var(--mc-font);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 0.4em 0.9em;
  text-transform: uppercase;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  min-height: auto;
  min-width: auto;
  height: auto;
  width: auto;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  z-index: 2;
}
/* WooCommerce trae su propia regla ".woocommerce ul.products li.product .onsale" (más
   específica que ".woocommerce span.onsale" de arriba), pensada para su badge circular por
   defecto: le pone top:0/right:0 y un margen negativo para que la mitad del círculo quede
   "mordiendo" la esquina de la imagen. Con nuestro badge (píldora, no círculo) ese margen
   negativo lo saca del recorte de ".mc-product-card" (overflow:hidden) y se ve cortado.
   Igualamos la especificidad de esa regla para anclarlo, contenido, en la esquina superior
   izquierda de la imagen. */
.woocommerce ul.products li.product .mc-product-card__image-wrap span.onsale {
  top: 0.9rem;
  left: 0.9rem;
  right: auto;
  margin: 0;
}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--mc-rojo); color: #fff; border-radius: 6px; font-weight: 700;
  border: 0; padding: 0.75em 1.3em;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
  background: var(--mc-rojo-oscuro); color: #fff;
}
/* ---- Paginación de la tienda -------------------------------------------------
   WooCommerce la entrega como una caja con borde y celdas separadas por filetes,
   que no dialoga con nada del resto del sitio. Se desarma la caja y cada número
   pasa a ser una píldora suelta, con el mismo lenguaje que las píldoras de
   categoría del sidebar: vidrio oscuro, filete claro y el rojo de marca para la
   página actual. Separada del último renglón de tarjetas por una línea fina, que
   es lo que la despega del grid y evita que parezca un producto más. */
.woocommerce nav.woocommerce-pagination {
  margin: 3.2rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.woocommerce nav.woocommerce-pagination ul li {
  margin: 0;
  border: 0;
  overflow: visible;
}
/* El borde transparente va en la base y no solo en la variante oscura: así la
   píldora mide igual con filete o sin él, y la fila no se descuadra. */
.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--mc-radius);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  transition: background var(--mc-glass-dur) var(--mc-glass-ease),
              color 160ms ease, transform 160ms ease;
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers {
  background: var(--mc-plata);
  color: var(--mc-grafito);
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover {
  background: var(--mc-gris-claro);
  color: var(--mc-negro);
  transform: translateY(-2px);
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:focus-visible {
  outline: 2px solid var(--mc-rojo-claro);
  outline-offset: 3px;
}
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current {
  background: var(--mc-rojo);
  color: var(--mc-blanco);
}
/* Las flechas son más angostas que un número: se les saca el relleno lateral para
   que queden cuadradas y la fila no termine con dos píldoras de distinto ancho. */
.woocommerce nav.woocommerce-pagination ul li a.page-numbers.next,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers.prev {
  padding: 0;
  font-size: 1.05rem;
}
@media (prefers-reduced-motion: reduce) {
  .woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover { transform: none; }
}

.woocommerce-result-count { margin: 0; color: var(--mc-gris-claro); font-size: 0.88rem; }
.woocommerce-ordering { margin: 0 0 1.8rem; }
@media (min-width: 700px) {
  .woocommerce-result-count { float: left; margin-bottom: 1.8rem; }
  .woocommerce-ordering { float: right; }
}
.woocommerce-ordering select.orderby {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid var(--mc-plata);
  border-radius: 6px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230A0A0A' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.85em center / 12px;
  padding: 0.65em 2.5em 0.65em 1em;
  font-family: var(--mc-font);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--mc-negro);
  cursor: pointer;
}
.woocommerce-ordering select.orderby:hover { border-color: var(--mc-gris-claro); }
.woocommerce-ordering select.orderby:focus { outline: 2px solid var(--mc-rojo); outline-offset: 1px; }

/* ---------- Tarjeta de producto (content-product.php) ---------- */
.mc-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--mc-plata);
  border-radius: var(--mc-radius-lg);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.mc-product-card:hover { box-shadow: var(--mc-shadow); transform: translateY(-4px); }
.mc-product-card__image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--mc-plata);
  overflow: hidden;
}
.mc-product-card__image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-product-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.2rem 1.3rem; }
.mc-product-card__category {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mc-rojo); margin-bottom: 0.4em;
}
/* Marca y categoría comparten la línea de contexto de la tarjeta. La marca hereda
   el rojo del contenedor; la categoría se atenúa para que no compitan. */
.mc-product-card__brand { color: inherit; }
.mc-product-card__cat {
  color: var(--mc-gris-claro); font-weight: 600;
}
.mc-product-card__brand + .mc-product-card__cat::before {
  content: "·"; margin: 0 0.4em; color: var(--mc-gris-claro);
}
.mc-product-card .woocommerce-loop-product__title {
  font-size: 0.98rem; font-weight: 700; color: var(--mc-negro); margin: 0 0 0.5em;
  line-height: 1.3;
}
.mc-product-card__price { margin: 0; font-weight: 700; color: var(--mc-rojo); font-size: 1.05rem; }
.mc-product-card__price del { color: var(--mc-gris-claro); font-weight: 400; font-size: 0.85em; margin-right: 0.4em; }
.mc-product-card__price ins { text-decoration: none; }

/* margin-top:auto empuja las acciones al fondo de la tarjeta aunque el título de al lado
   ocupe más o menos líneas: .mc-product-card es flex column y .mc-product-card__actions es
   el único hermano del <a> con altura variable de sobra. */
.mc-product-card__actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.2rem 1.2rem;
}
.mc-product-card__qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--mc-plata);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.mc-product-card__qty .quantity { margin: 0; display: block; }
.mc-product-card__qty input.qty {
  width: 2.6rem;
  height: 100%;
  border: 0;
  border-left: 1px solid var(--mc-plata);
  border-right: 1px solid var(--mc-plata);
  text-align: center;
  font-family: var(--mc-font);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--mc-negro);
  padding: 0.5em 0.2em;
  -moz-appearance: textfield;
}
.mc-product-card__qty input.qty::-webkit-outer-spin-button,
.mc-product-card__qty input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.mc-qty__btn {
  width: 2rem;
  border: 0;
  background: var(--mc-plata);
  color: var(--mc-negro);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.mc-qty__btn:hover { background: var(--mc-gris-claro); }
.mc-product-card__actions .add_to_cart_button {
  width: 100%;
  text-align: center;
  white-space: nowrap;
}

.woocommerce-cart table.cart, .woocommerce-checkout table.shop_table {
  border-collapse: collapse; width: 100%;
}
.woocommerce-cart table.cart th, .woocommerce-cart table.cart td { border-bottom: 1px solid var(--mc-plata); padding: 0.9em 0.6em; }
.woocommerce-cart table.cart img { width: 72px; border-radius: 6px; }
.cart-collaterals .cart_totals { background: var(--mc-plata); padding: 1.5rem; border-radius: var(--mc-radius); }


/* ---------- Listado de productos: layout con sidebar de categorías ----------
   Estaba en un <style> inline dentro de woocommerce/archive-product.php, el único
   bloque de estilos fuera de esta hoja. Se trae acá para que el sitio tenga una
   sola fuente de estilos y para poder darle la variante sobre chapa. */
.mc-shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; }
.mc-shop-layout aside h2 { font-size: 0.95rem; margin-bottom: 0.8em; }
.mc-shop-layout__cats { display: flex; flex-direction: column; gap: 0.6rem; }
.mc-shop-layout__cats a {
  display: flex; justify-content: space-between; align-items: center; gap: 0.6rem;
  padding: 0.75em 0.9em; border-radius: 6px; background: var(--mc-plata);
  border-left: 4px solid transparent; font-weight: 600; font-size: 0.86rem; color: var(--mc-negro);
}
.mc-shop-layout__cats a:hover,
.mc-shop-layout__cats a.is-active { border-left-color: var(--mc-rojo); background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.1); }
.mc-shop-layout__cats a span { color: var(--mc-gris-claro); font-weight: 700; font-size: 0.76rem; flex-shrink: 0; }
/* Subcategorías: sólo se despliegan las de la rama abierta, así el menú no crece
   a diecinueve entradas cuando apenas hay dos ramas con hijas. */
.mc-shop-layout__cats a.mc-shop-layout__subcat {
  margin-left: 0.9rem; padding: 0.5em 0.8em; font-size: 0.8rem; font-weight: 500;
  background: transparent; color: var(--mc-gris);
}
.mc-shop-layout__cats a.mc-shop-layout__subcat::before { content: "·"; margin-right: 0.45em; opacity: 0.45; }
.mc-shop-layout__cats a.mc-shop-layout__subcat:hover,
.mc-shop-layout__cats a.mc-shop-layout__subcat.is-active { background: #fff; color: var(--mc-negro); }
@media (max-width: 860px) { .mc-shop-layout { grid-template-columns: 1fr; } }

/* ---------- Carrito ----------
   Mismo lenguaje que Presupuestos y el alta: la tabla y el bloque de pago viven
   dentro de tarjetas de vidrio sobre la chapa, en dos columnas en escritorio. */
/* Las dos columnas son un par de tarjetas gemelas, así que la grilla las estira a la
   misma altura (align-items: stretch) en vez de dejarlas colgando de arriba. El reparto
   1.4 / 1 es lo más parejo que tolera la tabla: por debajo de ~1100px de viewport la
   columna de productos deja el nombre en menos de 140px y las filas se parten feo, así
   que ahí la grilla pasa a una sola columna. */
.mc-cart-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(330px, 1fr); gap: clamp(1rem, 2vw, 1.8rem); align-items: stretch; }
/* Flex y no grid: si algún día se activan los cross-sells, esos toman su alto natural
   y la tarjeta de totales (flex: 1) se queda con el resto en vez de partir la columna
   en dos mitades iguales. */
.mc-cart-layout__aside { display: flex; flex-direction: column; gap: 1.2rem; }
@media (max-width: 1100px) { .mc-cart-layout { grid-template-columns: 1fr; } }

/* La fila de acciones de WooCommerce mete cupón y "actualizar" sueltos en un <td>
   con floats heredados: quedaban pisados entre sí y el campo se salía de la celda.
   Se ordenan en una fila flex, con el cupón a la izquierda y el botón a la derecha. */
.mc-cart-actions { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.mc-cart-actions::before,
.mc-cart-actions::after { content: none; display: none; }
.mc-cart-actions__update { flex: 0 0 auto; }
/* Con JavaScript el carrito se actualiza solo al cambiar una cantidad, así que el botón
   deja de tener trabajo a la vista: un control que hay que apretar para que pase lo que ya
   pasó solo es ruido, y peor todavía, hace dudar de si hizo falta. Se esconde, no se saca:
   sigue siendo el que dispara la actualización por debajo (ver assets/js/cart.js) y el
   único camino cuando no hay JavaScript. La clase la pone ese mismo script, de modo que
   sin él el botón queda a la vista, que es cuando de verdad hace falta. */
body.mc-cart--auto .mc-cart-actions__update { display: none; }

.mc-cart-coupon { flex: 1 1 320px; min-width: 0; margin: 0; }
.mc-cart-coupon label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mc-gris-claro);
  margin-bottom: 0.45em;
}
.mc-cart-coupon__row { display: flex; gap: 0.6rem; align-items: stretch; }
/* min-width:0 es lo que evita que el input desborde la celda de la tabla: sin él
   un flex item usa su ancho intrínseco como mínimo y no se deja encoger. */
.mc-cart-coupon__row input.input-text {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.7em 0.9em;
  border: 1px solid var(--mc-acero);
  border-radius: 6px;
  background: rgba(23, 25, 28, 0.85);
  color: var(--mc-blanco);
  font-size: 0.92rem;
}
.mc-cart-coupon__row input.input-text::placeholder { color: var(--mc-plata); opacity: 0.45; }
.mc-cart-coupon__row input.input-text:focus { outline: 2px solid var(--mc-rojo); outline-offset: 1px; }
.mc-cart-coupon__row .mc-btn { flex: 0 0 auto; padding-inline: 1.2em; }
@media (max-width: 560px) {
  .mc-cart-actions { flex-direction: column; align-items: stretch; }
  .mc-cart-actions__update { width: 100%; }
}
.mc-shop .mc-page-header { margin-bottom: 0; }

/* =========================================================
   Superficie "Dark Glass" — usada en Alta de empresa y en Presupuestos
   Adaptación del componente 02 (.glass.glass--dark.glass-card) del
   liquid-glass-ui-kit: relleno oscuro translúcido + desenfoque de fondo,
   filete blanco, reflejo diagonal superior y destello al hover. Los blobs
   del "scene" del kit se reemplazan por la paleta de la marca (rojo/acero),
   y hacen falta: sin algo con color detrás, backdrop-filter no se ve.
   ========================================================= */
.mc-glass-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--mc-radius-lg);
  padding: clamp(1.4rem, 3.5vw, 3rem);
  background: var(--mc-negro);
  color: var(--mc-plata);
}

.mc-glass-stage__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.mc-glass-stage__blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: mc-blob-drift var(--dur, 18s) ease-in-out infinite alternate;
}
.mc-glass-stage__blob--1 {
  width: 620px; height: 620px;
  background: radial-gradient(circle, var(--mc-rojo), var(--mc-rojo-oscuro));
  top: -260px; left: -180px;
  --dur: 22s;
}
.mc-glass-stage__blob--2 {
  width: 540px; height: 540px;
  background: radial-gradient(circle, #696D73, var(--mc-acero));
  bottom: -240px; right: -140px;
  --dur: 17s;
  animation-delay: -8s;
}
.mc-glass-stage__blob--3 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, #3D4046, var(--mc-grafito));
  top: 38%; left: 46%;
  --dur: 25s;
  animation-delay: -13s;
}

@keyframes mc-blob-drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(60px, -40px) scale(1.08); }
  66%  { transform: translate(-40px, 60px) scale(0.94); }
  100% { transform: translate(30px, 30px) scale(1.04); }
}

/* Rejilla de tarjetas sobre el lienzo. z-index la deja por encima del scene. */
.mc-glass-stage__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.8rem);
  align-items: start;
}
/* Alta de empresa: la columna de registro lleva 9 campos contra 2 del login,
   así que se le da más ancho para que los pares (cargo/teléfono, CUIT/condición
   fiscal) no queden apretados. */
.mc-alta__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
/* Presupuestos: al revés — el formulario manda y la ficha de contacto acompaña. */
/* Las dos tarjetas miden exactamente lo mismo: mismo ancho y mismo alto.
   Antes la grilla repartía 1.15fr / 0.85fr —el formulario mandaba y la tarjeta de
   contacto acompañaba—, así que quedaban 675px contra 499px y una diferencia de
   alto de 7px que se leía como un desprolijo, no como una jerarquía.

   `align-items: stretch` pisa el `start` que trae .mc-glass-stage__grid: sin eso
   cada tarjeta mide lo que mide su contenido. Con stretch, la más alta —la de
   cotización, que lleva el formulario— fija el alto y la de contacto la acompaña.
   Es el mismo criterio que ya usa .mc-contacto__grid más abajo.

   Nota sobre el ancho: no se pueden dejar las dos en los 675px que tenía la de
   cotización porque 675 + 675 + el gap dan 1376px y el contenedor del sitio topa
   en 1240px. Iguales quiere decir mitad y mitad. */
.mc-presupuestos__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
/* `.woocommerce .col2-set .col-1` (0,3,0) le gana a `.mc-alta__grid > .col-1`
   (0,2,0), así que hay que igualar la especificidad para desarmar el float. */
.woocommerce .mc-alta__grid > .col-1,
.woocommerce .mc-alta__grid > .col-2 { float: none; width: auto; margin: 0; }
/* WooCommerce le pone un clearfix a .col2-set (::before/::after con content:" ").
   En un contenedor grid esos pseudoelementos cuentan como ítems: el ::before
   ocupaba la primera celda y empujaba las tarjetas a una grilla de 2x2. */
.woocommerce .mc-alta__grid::before,
.woocommerce .mc-alta__grid::after { content: none; display: none; }
.mc-alta--solo-login .mc-glass-card__inner { position: relative; z-index: 3; }
/* Recuperar contraseña y definir contraseña nueva: una sola tarjeta. La grilla de dos
   columnas del alta dejaría la mitad vacía, así que se centra y se acota el ancho. */
.mc-recuperar__grid {
  grid-template-columns: minmax(0, 520px);
  justify-content: center;
}


/* ---------- Lienzo de chapa (login/alta y Presupuestos) ----------
   Sin esto las tarjetas oscuras quedan recortadas sobre el blanco del body. Se
   pinta todo el <main> con la paleta: la foto de chapa de fondo, halo rojo
   arriba a la izquierda, halo acero abajo a la derecha y un velo oscuro encima. */
body.mc-auth,
body.mc-quote,
body.mc-metal { background: var(--mc-negro); }
/* La foto va fija (`fixed`) para que no se repita ni se estire cuando el <main>
   es más alto que ella: queda como telón de chapa detrás del vidrio. El velo
   oscuro final no es decorativo —la foto tiene zonas claras y sin él el vidrio
   pierde contraste. */
body.mc-auth .mc-main,
body.mc-quote .mc-main,
body.mc-metal .mc-main {
  background-color: var(--mc-negro);
  background-image:
    radial-gradient(1100px 620px at 12% -8%, rgba(229, 9, 20, 0.16), transparent 62%),
    radial-gradient(900px 560px at 92% 108%, rgba(105, 109, 115, 0.18), transparent 64%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.86) 0%, rgba(10, 10, 10, 0.78) 45%, rgba(10, 10, 10, 0.90) 100%),
    url("../img/fondo-metal.jpg");
  background-size: auto, auto, auto, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed, fixed;
}
/* El header de página ya es negro: se le saca el corte para que el telón siga. */
body.mc-auth .mc-page-header,
body.mc-quote .mc-page-header,
body.mc-metal .mc-page-header { background: transparent; }
/* Sobre la foto la isla no lleva relleno propio: si lo llevara taparía la chapa
   y el desenfoque de las tarjetas no tendría nada que desenfocar. */
body.mc-auth .mc-alta,
body.mc-quote .mc-glass-stage {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

/* Presupuestos respira más ancho que el resto del sitio.
   Con el contenedor estándar de 1240px, dos tarjetas iguales quedan en 587px cada
   una: menos de lo que medía la de cotización antes de emparejarlas (675px). Para
   devolverle ese ancho hacen falta 675 + 675 + el espacio entre ellas ≈ 1376px.

   Se sube el token --mc-container en ESTE contenedor y no en el body: si se pusiera
   en el body, el header y el pie —que también son .mc-container— se ensancharían
   solo en esta página, y al navegar el logo y el menú saltarían de lugar.

   Es un techo, no un ancho fijo: la regla base sigue siendo
   min(var(--mc-container), 100% - 2.5rem), así que en pantallas más angostas manda
   el viewport y las tarjetas se achican parejas, sin desbordar. */
body.mc-quote .mc-main > .mc-container {
  --mc-container: 1376px;
}

/* ---------- Alta de empresa: modo compacto ----------
   El alta tiene 9 campos y en el layout normal la tarjeta medía 1117px, más que
   el viewport: había que scrollear para ver el formulario entero al entrar. Acá
   se comprime todo lo que rodea al formulario (cabecera, padding, tipografía) y
   los campos pasan a dos columnas, para que el bloque completo entre en pantalla.
   Solo aplica a esta página: el resto del sitio conserva su respiro. */
body.mc-auth .mc-page-header { padding: 0.9rem 0 0.7rem; }
/* El h1 "Mi cuenta" repite lo que ya dicen los títulos de las dos tarjetas, y son
   ~30px que necesitamos. Se oculta a la vista pero sigue en el DOM para SEO y
   lectores de pantalla — mismo criterio que la cabecera de Presupuestos. */
body.mc-auth .mc-page-header h1 {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
body.mc-auth .mc-section { padding: 0.8rem 0 1.6rem; }
body.mc-auth .mc-alta { padding: clamp(0.85rem, 1.2vw, 1.05rem); }
body.mc-auth .mc-glass-card { padding: clamp(0.95rem, 1.3vw, 1.2rem); }
body.mc-auth .mc-glass-card__title { font-size: clamp(1.05rem, 1.6vw, 1.3rem); margin-bottom: 0.15em; }
body.mc-auth .mc-glass-card__body { font-size: 0.78rem; line-height: 1.45; margin-bottom: 0.75em; }
body.mc-auth .mc-glass-card__label { font-size: 0.64rem; margin-bottom: 0.15em; }
body.mc-auth .mc-glass-stage label { font-size: 0.75rem; margin-bottom: 0.2em; }
body.mc-auth .mc-glass-stage .form-row,
body.mc-auth .mc-glass-stage .mc-field { margin: 0 0 0.45rem; }
body.mc-auth .mc-glass-stage .mc-hint { font-size: 0.7rem; margin-top: 0.15em; }
body.mc-auth .mc-glass-stage input:not([type=checkbox]):not([type=radio]):not([type=submit]),
body.mc-auth .mc-glass-stage select,
body.mc-auth .mc-glass-stage textarea { padding: 0.45em 0.65em; font-size: 0.86rem; }
body.mc-auth .mc-glass-stage .mc-glass-btn { padding: 0.55em 1.3em; }
body.mc-auth .mc-glass-stage .lost_password { margin-top: 0.5em; font-size: 0.78rem; }

/* El formulario de alta pasa a dos columnas. `display: contents` en .mc-form-row
   disuelve ese wrapper para que sus dos campos entren como celdas propias de esta
   grilla, en vez de ocupar una sola celda con su grilla interna. */
body.mc-auth form.register {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
}
body.mc-auth form.register > .mc-form-row { display: contents; }
/* Los campos ocultos y el bloque de atribución de WooCommerce no pintan nada,
   pero como hijos directos de la grilla se llevarían una celda cada uno. */
body.mc-auth form.register > input[type="hidden"],
body.mc-auth form.register > wc-order-attribution-inputs { display: none; }
/* A ancho completo: correo (es el campo más largo y además queda solo en su fila, porque
   el alta no pide contraseña), domicilio, privacidad, botón y nota. */
body.mc-auth form.register > .mc-field:has(#reg_email),
body.mc-auth form.register > .woocommerce-privacy-policy-text,
body.mc-auth form.register > .woocommerce-form-row.form-row:last-of-type,
body.mc-auth form.register > .mc-alta__nota,
body.mc-auth form.register > .mc-field:has(#mc_domicilio_fiscal) { grid-column: 1 / -1; }
body.mc-auth .woocommerce-privacy-policy-text p { font-size: 0.68rem; line-height: 1.35; margin: 0 0 0.35em; opacity: 0.85; }
body.mc-auth .mc-alta__nota { margin-top: 0.35em; font-size: 0.72rem; }

/* Avisos sobre las tarjetas de vidrio (p. ej. "tu cuenta está en revisión"): necesitan color
   propio porque .mc-notice no lo fija y heredaría el negro del body, ilegible sobre el vidrio
   oscuro de la tarjeta. */
body.mc-auth .mc-notice {
  color: var(--mc-blanco);
  background: rgba(10, 10, 10, 0.55);
  font-size: 0.75rem;
  padding: 0.7em 1em;
  margin-bottom: 0.9em;
}
body.mc-auth .mc-notice--warning { background: rgba(229, 9, 20, 0.16); }

/* Pantallas bajas (típico portátil de 768px): con el ajuste anterior el botón
   ya entra, pero el pie de la sección queda ~100px afuera. Acá se recorta lo
   prescindible —la bajada descriptiva— para cerrar la brecha.
   El texto de privacidad no se toca: es contenido legal, no relleno. */
@media (min-width: 861px) and (max-height: 830px) {
  body.mc-auth .mc-glass-card__body { display: none; }
  body.mc-auth .mc-page-header { padding: 0.5rem 0; }
  body.mc-auth .mc-section { padding: 0.5rem 0 0.9rem; }
  body.mc-auth .mc-alta { padding: 0.7rem; }
  body.mc-auth .mc-glass-card { padding: 0.85rem; }
  body.mc-auth .mc-glass-card__title { font-size: 1.1rem; }
  body.mc-auth .mc-glass-stage .form-row,
  body.mc-auth .mc-glass-stage .mc-field { margin: 0 0 0.32rem; }
  body.mc-auth .mc-glass-stage label { font-size: 0.72rem; margin-bottom: 0.15em; }
  body.mc-auth .mc-glass-stage input:not([type=checkbox]):not([type=radio]):not([type=submit]),
  body.mc-auth .mc-glass-stage select,
  body.mc-auth .mc-glass-stage textarea { padding: 0.4em 0.6em; font-size: 0.84rem; }
  body.mc-auth .woocommerce-privacy-policy-text p { font-size: 0.64rem; }
  body.mc-auth .mc-alta__nota { font-size: 0.68rem; }
}

/* Por debajo de 860px la grilla del stage ya apila y no hay altura que ganar:
   el formulario vuelve a una columna para no dejar campos de 120px de ancho. */
@media (max-width: 860px) {
  body.mc-auth form.register { grid-template-columns: 1fr; }
  body.mc-auth form.register > .mc-form-row { display: grid; }
  body.mc-auth .mc-page-header { padding: 2rem 0 1.4rem; }
}


/* ---------- Páginas de contenido sobre chapa ----------
   Productos, Ofertas, Envíos, Contacto y Quiénes Somos comparten el lienzo de
   Presupuestos y el alta. A diferencia de esas dos, son páginas largas con
   scroll: conservan su cabecera y sus bandas, pero las bandas pasan de color
   sólido a velo translúcido para que la chapa se lea de punta a punta y el
   ritmo visual se mantenga. Todo lo que asumía fondo blanco se invierte acá. */
body.mc-metal .mc-main { color: var(--mc-plata); }
body.mc-metal .mc-main h1,
body.mc-metal .mc-main h2,
body.mc-metal .mc-main h3,
body.mc-metal .mc-main h4 { color: var(--mc-blanco); }

/* Bandas: la de base y la plata se abren del todo; grafito y negra quedan como
   velos, no como bloques opacos. */
body.mc-metal .mc-section { background: transparent; }
body.mc-metal .mc-section--plata { background: rgba(23, 25, 28, 0.42); color: var(--mc-plata); }
body.mc-metal .mc-section--grafito { background: rgba(23, 25, 28, 0.58); }
body.mc-metal .mc-section--dark { background: rgba(10, 10, 10, 0.66); }
body.mc-metal .mc-section--plata .mc-section-lead { color: var(--mc-gris-claro); }

/* Tarjetas: sobre la chapa el relleno plata se leía como un bloque encendido.
   Pasan al mismo vidrio oscuro que usan Presupuestos y el alta, conservando el
   filete rojo de la izquierda que las identifica. */
body.mc-metal .mc-card {
  background: rgba(23, 25, 28, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 4px solid var(--mc-rojo);
  border-radius: var(--mc-radius);
  color: var(--mc-plata);
  backdrop-filter: var(--mc-glass-blur);
  -webkit-backdrop-filter: var(--mc-glass-blur);
}
body.mc-metal .mc-card:hover { box-shadow: var(--mc-glass-float); }
body.mc-metal .mc-card h3 { color: var(--mc-blanco); }
body.mc-metal .mc-card p { color: var(--mc-gris-claro); }
body.mc-metal .mc-card--dark { background: rgba(10, 10, 10, 0.62); }

/* Formularios: misma lógica de vidrio, y los campos toman el tratamiento oscuro
   que hasta ahora solo se aplicaba dentro de las bandas --dark/--grafito. */
body.mc-metal .mc-form-card {
  background: rgba(10, 10, 10, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--mc-plata);
  backdrop-filter: var(--mc-glass-blur);
  -webkit-backdrop-filter: var(--mc-glass-blur);
}
body.mc-metal .mc-field input:not([type=checkbox]):not([type=radio]),
body.mc-metal .mc-field select,
body.mc-metal .mc-field textarea {
  background: rgba(23, 25, 28, 0.85);
  border-color: var(--mc-acero);
  color: var(--mc-blanco);
}
body.mc-metal .mc-field input::placeholder,
body.mc-metal .mc-field textarea::placeholder { color: var(--mc-plata); opacity: 0.45; }
body.mc-metal .mc-field select option { background: var(--mc-grafito); color: var(--mc-blanco); }

/* El botón "outline oscuro" está pensado para fondo claro: sobre la chapa su
   borde acero y su texto negro desaparecen. Toma la variante clara. */
body.mc-metal .mc-btn--outline-dark { border-color: var(--mc-plata); color: var(--mc-plata); }
body.mc-metal .mc-btn--outline-dark:hover { background: var(--mc-plata); color: var(--mc-negro); border-color: var(--mc-plata); }

/* .mc-notice no fija color y hereda el negro del body. */
body.mc-metal .mc-notice { color: var(--mc-blanco); background: rgba(10, 10, 10, 0.55); }
body.mc-metal .mc-notice a { color: var(--mc-blanco); text-decoration: underline; }
body.mc-metal .mc-notice--warning { background: rgba(229, 9, 20, 0.14); }
body.mc-metal .mc-notice--success { background: rgba(40, 167, 69, 0.16); }

/* Bloque de pago del carrito: mismo caso que las tarjetas. */
body.mc-metal .mc-cart-payment { background: rgba(23, 25, 28, 0.62); color: var(--mc-plata); }
body.mc-metal .mc-cart-payment h3 { color: var(--mc-blanco); }
body.mc-metal .mc-cart-payment__note { color: var(--mc-gris-claro); }

/* Enlaces sueltos dentro del contenido: heredan color, así que sobre la chapa
   ya se ven claros; solo se marca el hover con el rojo de marca. */
body.mc-metal .mc-main a:not(.mc-btn):not(.mc-card):not(.mc-cat-card):hover { color: var(--mc-rojo); }

/* ---------- WooCommerce sobre chapa ----------
   La tarjeta de producto y los controles del listado están construidos para
   fondo blanco. Sobre la chapa se invierten con el mismo vidrio del resto. */
body.mc-metal .mc-product-card {
  background: rgba(23, 25, 28, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: var(--mc-glass-blur);
  -webkit-backdrop-filter: var(--mc-glass-blur);
}
body.mc-metal .mc-product-card:hover { box-shadow: var(--mc-glass-float); }
/* El marco de la imagen conserva el plata: es el respaldo cuando la foto del
   producto tiene fondo transparente o no carga. */
body.mc-metal .mc-product-card .woocommerce-loop-product__title { color: var(--mc-blanco); }
body.mc-metal .mc-product-card__qty { border-color: var(--mc-acero); }
body.mc-metal .mc-product-card__qty input.qty {
  background: rgba(10, 10, 10, 0.6);
  color: var(--mc-blanco);
  border-left-color: var(--mc-acero);
  border-right-color: var(--mc-acero);
}
body.mc-metal .mc-qty__btn { background: var(--mc-acero); color: var(--mc-blanco); }
body.mc-metal .mc-qty__btn:hover { background: var(--mc-gris-claro); color: var(--mc-negro); }

/* Selector de orden y paginación. */
body.mc-metal .woocommerce-ordering select.orderby {
  background-color: rgba(23, 25, 28, 0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23E5E7E9' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border-color: var(--mc-acero);
  color: var(--mc-plata);
}
body.mc-metal.woocommerce nav.woocommerce-pagination { border-top-color: rgba(255, 255, 255, 0.08); }
body.mc-metal.woocommerce nav.woocommerce-pagination ul li a.page-numbers {
  background: rgba(23, 25, 28, 0.62);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--mc-plata);
  backdrop-filter: var(--mc-glass-blur);
  -webkit-backdrop-filter: var(--mc-glass-blur);
}
body.mc-metal.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover {
  background: rgba(43, 46, 51, 0.75);
  border-color: var(--mc-glass-border-bright);
  color: var(--mc-blanco);
}
body.mc-metal.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current {
  background: var(--mc-rojo);
  border-color: var(--mc-rojo);
  color: var(--mc-blanco);
}

/* Tablas de carrito/checkout y bloque de totales. */
body.mc-metal .woocommerce-cart table.cart th,
body.mc-metal .woocommerce-cart table.cart td { border-bottom-color: var(--mc-acero); }
/* Sidebar de categorías sobre chapa: las píldoras plata se leían como bloques
   encendidos. Pasan al vidrio oscuro; la activa se marca con el filete rojo y un
   relleno algo más claro, no con blanco. */
body.mc-metal .mc-shop-layout__cats a {
  background: rgba(23, 25, 28, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 4px solid transparent;
  color: var(--mc-plata);
  backdrop-filter: var(--mc-glass-blur);
  -webkit-backdrop-filter: var(--mc-glass-blur);
}
body.mc-metal .mc-shop-layout__cats a:hover,
body.mc-metal .mc-shop-layout__cats a.is-active {
  background: rgba(43, 46, 51, 0.75);
  border-left-color: var(--mc-rojo);
  color: var(--mc-blanco);
  box-shadow: none;
}
/* ---------- Carrito sobre chapa ----------
   Cabecera fuera: el h1 "Carrito" no aporta nada que no diga el propio contenido. El h1 se oculta a la vista pero queda en el DOM (SEO y lectores de
   pantalla), mismo criterio que Presupuestos y el listado de productos. */
body.mc-cart .mc-page-header { padding: 0; }
body.mc-cart .mc-page-header h1 {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Tabla del carrito: sin relleno propio (vive dentro de la tarjeta de vidrio) y
   con separadores de acero en vez del plata pensado para fondo blanco. */
/* La tarjeta de vidrio recorta con overflow:hidden. WooCommerce apila la tabla en
   pantallas chicas con su propio CSS de .shop_table_responsive, pero si por lo que
   sea no llegara a aplicar, sin esto la tabla quedaría cortada en vez de scrollear. */
body.mc-cart .woocommerce-cart-form { margin: 0; overflow-x: auto; }
body.mc-cart table.cart { background: transparent; }
body.mc-cart table.cart th {
  color: var(--mc-gris-claro);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 1px solid var(--mc-acero);
}
body.mc-cart table.cart td { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
body.mc-cart table.cart tr:last-child td { border-bottom: 0; }
body.mc-cart table.cart td.actions { padding-top: 1.4em; }
body.mc-cart table.cart a { color: var(--mc-blanco); }
body.mc-cart table.cart a:hover { color: var(--mc-rojo); }
body.mc-cart table.cart .product-price,
body.mc-cart table.cart .product-subtotal { color: var(--mc-blanco); font-weight: 700; }
/* La "x" de quitar producto: sobre chapa el negro heredado no se veía. */
body.mc-cart table.cart a.remove { color: var(--mc-gris-claro); font-size: 1.3rem; line-height: 1; }
body.mc-cart table.cart a.remove:hover { color: var(--mc-rojo); }
body.mc-cart table.cart input.qty {
  background: rgba(23, 25, 28, 0.85);
  border: 1px solid var(--mc-acero);
  border-radius: 6px;
  color: var(--mc-blanco);
  padding: 0.45em 0.4em;
  width: 3.4rem;
  text-align: center;
}
/* ---------- Par de tarjetas del carrito ----------
   Izquierda: .mc-cart-layout__main (tabla de productos). Derecha: .cart_totals, que
   imprime WooCommerce y no pasa por .mc-glass-card. Para que las dos se lean como una
   misma pieza, acá se le copia a .cart_totals la receta de .mc-glass + .mc-glass-card:
   mismo relleno translúcido, mismo filete, misma sombra, mismo radio y el mismo padding
   en clamp, más el reflejo diagonal y la respuesta al hover, que se definen más abajo.

   El alto lo iguala la grilla (align-items: stretch) y adentro el sobrante lo reparte
   flex, con el mismo esqueleto de tres partes en las dos: encabezado arriba, contenido
   en el medio y pie de cierre abajo. La de productos estira la tabla (el <form> es el
   ítem flexible) y deja la nota al final; la de totales deja el resumen de importes en
   su alto natural y baja el bloque de checkout + pago con margin-top: auto. En los dos
   casos el hueco queda dentro del contenido, no colgando al pie, y las dos tarjetas
   cierran en la misma línea. */
body.mc-cart .cart-collaterals .cart_totals {
  /* WooCommerce le da float: right y width: 48%: dentro de la grilla eso dejaba la
     tarjeta ocupando menos de la mitad de su columna, con el resto en blanco. */
  float: none;
  width: 100%;
  margin: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.5vw, 2.1rem);
  background: var(--mc-glass-fill-dark);
  border: 1px solid var(--mc-glass-border);
  border-radius: var(--mc-radius-lg);
  box-shadow: var(--mc-glass-shadow);
  color: var(--mc-plata);
  backdrop-filter: var(--mc-glass-blur);
  -webkit-backdrop-filter: var(--mc-glass-blur);
}
/* .cart-collaterals arrastra el clearfix de WooCommerce (::before/::after con
   content:" "). Como .mc-cart-layout__aside es flex, esos pseudoelementos contaban como
   ítems y metían dos huecos de gap: la tarjeta de totales arrancaba ~19px más abajo que
   la de productos, que es lo que rompía la simetría de la fila. */
body.mc-cart .cart-collaterals::before,
body.mc-cart .cart-collaterals::after { content: none; display: none; }

/* El <h2> nativo de cart-totals.php se reemplaza por el encabezado que imprime
   mc_render_cart_totals_head() justo antes, con la misma estructura que el de la
   tarjeta de productos. Se oculta solo el suelto, no el que va dentro del encabezado. */
body.mc-cart .cart_totals > h2 { display: none; }

/* Encabezado común a las dos tarjetas: rótulo en versalitas y filete inferior. Las
   píldoras de conteo que iban a la derecha se sacaron a pedido; el flex se conserva
   porque es lo que alinea el rótulo con el filete a la misma altura en las dos. */
.mc-cart-card__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 0.9em;
  margin-bottom: 1.1em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.mc-cart-card__title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-gris-claro);
  margin: 0;
}
/* Tarjeta de productos: el contenido se apila en columna para poder empujar la nota
   al pie. La tabla toma el alto que sobra (height: 100% contra el <form>, que es el
   flex item que se estira), así las filas reparten el sobrante en vez de dejar un
   vacío entre el cupón y la nota. */
body.mc-cart .mc-cart-layout__main .mc-glass-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
body.mc-cart .woocommerce-cart-form { flex: 1 1 auto; }
/* margin: 0 no es cosmético. .shop_table trae margin-bottom: 24px de WooCommerce, y el
   <form> es contenedor de scroll (overflow-x: auto obliga a overflow-y: auto), así que
   con la tabla a height: 100% esos 24px sobraban del alto disponible y aparecía una
   barra de scroll vertical adentro de la tarjeta. */
/* border: 0 va junto al margin: 0 y por el mismo motivo, la simetría con la tarjeta de
   totales. '.woocommerce table.shop_table' dibuja un recuadro de 1px con radio de 5px
   alrededor de la tabla; adentro de la tarjeta de vidrio eso es un segundo marco con
   esquinas distintas, y el resumen de importes de al lado no lo tiene porque su tabla
   se disuelve en filas flex. Los filetes entre filas los siguen poniendo th/td. */
body.mc-cart table.cart { height: 100%; margin: 0; border: 0; border-radius: 0; }

/* El reflejo diagonal de .mc-glass::before es lo que más se nota al comparar las dos
   tarjetas: sin él la de totales se ve plana al lado de la de productos. Se replica acá
   porque .cart_totals no puede llevar la clase .mc-glass (lo imprime el plugin). El
   contenido se sube a z-index 1 para que el velo quede por debajo y no lave el texto:
   .cart_totals no tiene un envoltorio interno como el .mc-glass-card__inner de la otra. */
body.mc-cart .cart_totals { position: relative; overflow: hidden; }
body.mc-cart .cart_totals::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--mc-glass-reflection);
  pointer-events: none;
}
body.mc-cart .cart_totals > *:not(.mc-cart-loader) { position: relative; z-index: 1; }

/* Las dos tarjetas responden igual al hover: se aclara el filete y ganan profundidad,
   pero sin el translateY que .mc-glass-card aplica en el resto del sitio. Acá adentro
   están los campos de cantidad, el cupón y los botones de pago: mover la tarjeta al
   entrar el cursor corre justo los controles que el visitante viene a tocar. */
body.mc-cart .mc-cart-layout__main,
body.mc-cart .cart_totals {
  transition: box-shadow var(--mc-glass-dur) var(--mc-glass-ease),
              border-color var(--mc-glass-dur),
              background var(--mc-glass-dur);
}
body.mc-cart .mc-cart-layout__main:hover,
body.mc-cart .mc-cart-layout__main:focus-within,
body.mc-cart .cart_totals:hover,
body.mc-cart .cart_totals:focus-within {
  transform: none;
  box-shadow: var(--mc-glass-float);
  border-color: var(--mc-glass-border-bright);
  background: var(--mc-glass-fill-dark-hover);
}

/* Pie de la tarjeta de productos, gemelo de .mc-cart-payment__note. */
body.mc-cart .mc-cart-note {
  margin: 1.3rem 0 0;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--mc-gris-claro);
  font-size: 0.74rem;
  line-height: 1.5;
}

/* ---------- Velo de carga ----------
   "Actualizar carrito", "Aplicar cupón" y la X de quitar producto no recargan la página:
   cart.js del plugin postea por AJAX y mientras tanto tapa el bloque con blockUI. Esa
   superposición viene con background:#fff y opacity:.6 inline, que sobre la chapa oscura
   es un destello blanco; y del lado izquierdo blockUI solo cubre el <form>, así que el
   encabezado y la nota quedaban sin velar mientras la tarjeta de totales se velaba entera.

   Se reemplaza por .mc-cart-loader, un velo propio que cubre la tarjeta completa en las
   dos columnas. La superposición del plugin se deja en su lugar —es la que bloquea los
   clics durante el request— pero transparente. */
body.mc-cart .mc-cart-loader {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  place-items: center;
  border-radius: inherit;
  background: rgba(10, 10, 10, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
body.mc-cart .mc-cart-loader::before {
  content: "";
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--mc-rojo);
  animation: mc-cart-spin 0.8s linear infinite;
}
@keyframes mc-cart-spin { to { transform: rotate(360deg); } }
/* No se apaga el giro: es el único indicio de que algo está pasando. Se frena para que
   no sea un estímulo agresivo. */
@media (prefers-reduced-motion: reduce) {
  body.mc-cart .mc-cart-loader::before { animation-duration: 2.6s; }
}

/* Fallback para navegadores sin :has() — la tarjeta no se puede velar entera, pero al
   menos la superposición del plugin deja de ser blanca y conserva su propio spinner. */
body.mc-cart .blockUI.blockOverlay {
  background: rgba(10, 10, 10, 0.62) !important;
  opacity: 1 !important;
}
@supports selector(:has(*)) {
  body.mc-cart .blockUI.blockOverlay { background: transparent !important; }
  body.mc-cart .blockUI.blockOverlay::before { content: none; }
  /* Izquierda: la clase .processing la lleva el <form>, que está adentro de la tarjeta.
     Derecha: la lleva el propio div.cart_totals. */
  body.mc-cart .mc-cart-layout__main:has(.processing) > .mc-cart-loader,
  body.mc-cart .cart_totals.processing > .mc-cart-loader { display: grid; }
}

/* ---------- Avisos sobre chapa ----------
   Los que quedan son los que importan: sin stock, cupón inválido, "producto eliminado
   ¿deshacer?". Con el estilo del plugin son una barra gris claro con texto oscuro, que
   sobre la chapa se lee como un recorte pegado. Se les da el mismo lenguaje que a las
   tarjetas. Va sobre .mc-metal, no solo sobre el carrito, porque el listado de productos,
   la ficha y las páginas de chapa comparten el mismo fondo y el mismo problema. */
body.mc-metal .woocommerce-error,
body.mc-metal .woocommerce-message,
body.mc-metal .woocommerce-info {
  background: rgba(10, 10, 10, 0.62);
  border: 1px solid var(--mc-glass-border);
  border-left: 4px solid var(--mc-rojo);
  border-radius: var(--mc-radius);
  box-shadow: var(--mc-glass-shadow);
  backdrop-filter: var(--mc-glass-blur);
  -webkit-backdrop-filter: var(--mc-glass-blur);
  color: var(--mc-plata);
  padding: 1em 1.2em;
  font-size: 0.88rem;
}
body.mc-metal .woocommerce-error a,
body.mc-metal .woocommerce-message a,
body.mc-metal .woocommerce-info a { color: var(--mc-blanco); text-decoration: underline; }
body.mc-metal .woocommerce-error a:hover,
body.mc-metal .woocommerce-message a:hover,
body.mc-metal .woocommerce-info a:hover { color: var(--mc-rojo-claro); }
body.mc-metal .woocommerce-error li { list-style: none; }
/* WooCommerce marca el tipo de aviso con un glifo de su fuente de iconos, posicionado
   en absolute a left: 1.5em contra un padding-left de 3.5em. Al reemplazar ese relleno
   por uno parejo el glifo se queda donde estaba y cae justo encima de las primeras
   letras del mensaje (medido: glifo en 21,12px, texto en 21px). Acá el tipo ya lo marca
   el filete rojo de la izquierda, así que el glifo se apaga en vez de reacomodarlo. */
body.mc-metal .woocommerce-error::before,
body.mc-metal .woocommerce-message::before,
body.mc-metal .woocommerce-info::before,
body.mc-auth .woocommerce-error::before,
body.mc-auth .woocommerce-message::before,
body.mc-auth .woocommerce-info::before,
.mc-glass-stage .woocommerce-error::before,
.mc-glass-stage .woocommerce-message::before,
.mc-glass-stage .woocommerce-info::before { content: none; }
/* El error de cupón no es un aviso de la bolsa de WooCommerce: cart.js lo inyecta como
   un <p class="coupon-error-notice"> debajo del campo. Viene con el rojo #a00 del
   plugin (--wc-red), pensado para fondo blanco; sobre la tarjeta oscura da 2,5:1 y no
   se lee. El selector largo no es capricho: WooCommerce lo pinta desde
   '.woocommerce-cart table.cart td.actions .coupon .coupon-error-notice' (0,5,2), así
   que hay que igualar esa especificidad para poder cambiarlo sin !important. */
body.mc-cart table.cart td.actions .coupon .coupon-error-notice {
  color: var(--mc-rojo-claro);
  font-size: 0.78rem;
  line-height: 1.45;
  margin: 0.55em 0 0;
}

/* El resumen de importes lo imprime WooCommerce como <table class="shop_table">, y
   tratarlo como tabla no funciona en una columna angosta: el reparto de columnas parte
   etiquetas al medio ("Descuent/o por/volumen"), el borde propio de .shop_table dibuja un
   recuadro que no va con el diseño, y en móvil el CSS responsive del plugin duplica cada
   rótulo con un ::before. Por eso la tabla se disuelve en filas flex: etiqueta a la
   izquierda, importe a la derecha, y cada una se acomoda al ancho que haya. */

/* Disolución de la tabla. */
body.mc-cart .cart_totals table,
body.mc-cart .cart_totals table tbody {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  background: transparent;
}
body.mc-cart .cart_totals table tr {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding: 0.7em 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: transparent;
}
body.mc-cart .cart_totals table th,
body.mc-cart .cart_totals table td {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
}
/* En móvil WooCommerce inyecta el rótulo con ::before a partir de data-title.
   Acá el <th> ya está visible, así que ese pseudo duplicaría el texto. */
body.mc-cart .cart_totals table td::before { content: none !important; }
body.mc-cart .cart_totals table th {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  color: var(--mc-gris-claro);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.35;
  /* Sin esto el navegador puede partir "Descuento" al medio en una columna angosta. */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
body.mc-cart .cart_totals table td {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
  color: var(--mc-blanco);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
}
/* Fila de envío: puede traer una lista de métodos o el calculador, así que en vez
   de ir a la derecha se apila debajo de su rótulo y ocupa todo el ancho. */
body.mc-cart .cart_totals tr.woocommerce-shipping-totals {
  flex-direction: column;
  align-items: stretch;
}
body.mc-cart .cart_totals tr.woocommerce-shipping-totals td {
  margin-left: 0;
  text-align: left;
  font-weight: 600;
  font-size: 0.88rem;
}
body.mc-cart .cart_totals .woocommerce-shipping-methods { margin: 0; padding: 0; list-style: none; }
body.mc-cart .cart_totals .woocommerce-shipping-methods li { margin-bottom: 0.35em; }
body.mc-cart .cart_totals .shipping-calculator-button { color: var(--mc-plata); text-decoration: underline; font-weight: 400; font-size: 0.82rem; }

/* Descuento: se lee como resta, no como un cargo más. */
body.mc-cart .cart_totals tr.cart-discount td { color: var(--mc-rojo-claro); }
/* Salvo cuando todavía no hay cupón: ahí la fila es un marcador de posición (ver
   mc_render_cart_coupon_row en inc/setup.php) y va apagada, para que el guion no
   compita con los importes que sí son plata. */
body.mc-cart .cart_totals tr.mc-cart-discount--vacio th,
body.mc-cart .cart_totals tr.mc-cart-discount--vacio td {
  color: var(--mc-gris-claro);
  font-weight: 400;
}
body.mc-cart .cart_totals tr.cart-discount th a {
  display: inline-block;
  color: var(--mc-gris-claro);
  text-decoration: underline;
  font-weight: 400;
  font-size: 0.76rem;
}

/* Total: cierra el resumen, sin filete y con más peso. */
body.mc-cart .cart_totals tr.order-total {
  border-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin-top: 0.3em;
  padding-top: 0.9em;
  align-items: baseline;
}
body.mc-cart .cart_totals tr.order-total th {
  color: var(--mc-blanco);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
body.mc-cart .cart_totals tr.order-total td { font-size: 1.35rem; font-weight: 800; }
body.mc-cart .cart_totals tr.order-total td small { display: block; font-size: 0.7rem; font-weight: 400; color: var(--mc-gris-claro); margin-top: 0.3em; }

/* Botones dentro de la tarjeta. El .mc-btn base lleva white-space:nowrap, pensado
   para botones en fila; acá la columna es angosta y "Pagar ahora con Mercado Pago"
   se salía de la tarjeta en vez de pasar a dos líneas. */
body.mc-cart .cart_totals .mc-btn {
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}
/* Bloque de cierre de la tarjeta. Desde que se quitó el botón "Ir a finalizar la compra"
   (ver el remove_action en inc/setup.php) este contenedor lleva únicamente las dos formas
   de pago, así que el filete que antes separaba el botón de las opciones ahora separa el
   resumen de importes de los botones — un solo divisor, no dos.
   `margin-top: auto` lo apoya contra el borde inferior cuando a esta tarjeta le sobra alto
   respecto de la de productos: el sobrante queda arriba, entre los importes y los botones,
   en vez de abrir un hueco al pie. */
body.mc-cart .wc-proceed-to-checkout {
  margin: auto 0 0;
  padding: 1.3rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Opciones de pago: sección interna, no una tarjeta aparte. El relleno y el filete los
   pone el contenedor de arriba, así que acá va a cero para no duplicar la separación. */
body.mc-cart .mc-cart-payment {
  background: transparent;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
}
body.mc-cart .mc-cart-payment h3 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-gris-claro);
  margin: 0 0 0.9em;
}
/* auto-fit: en la columna angosta del escritorio los dos botones se apilan, y cuando
   el carrito pasa a una sola columna (y la tarjeta ocupa todo el ancho) se acomodan en
   fila en vez de dejar dos botones enormes uno debajo del otro.
   `align-items: stretch` + `min-height` los deja del mismo tamaño en las dos
   disposiciones: si no, "Pagar ahora con Mercado Pago" pasa a dos renglones en la
   columna angosta y queda más alto que "Pagar en sucursal". Ahora que son los dos
   únicos botones de la tarjeta, esa diferencia se notaba. */
body.mc-cart .mc-cart-payment__options {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: stretch;
}
body.mc-cart .mc-cart-payment__options .mc-btn {
  width: 100%;
  padding-inline: 1.1em;
  min-height: 3.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.mc-cart .mc-cart-payment__note { color: var(--mc-gris-claro); font-size: 0.74rem; line-height: 1.5; margin: 1em 0 0; }
/* iOS ignora background-attachment: fixed y el telón queda estirado y saltarín. */
@media (max-width: 860px), (hover: none) {
  body.mc-auth .mc-main,
  body.mc-quote .mc-main,
  body.mc-metal .mc-main { background-attachment: scroll, scroll, scroll, scroll; }
}

/* ---------- Presupuestos: modo compacto ----------
   Mismo criterio que el alta: el formulario tiene 6 campos más un textarea y en
   el layout normal el bloque medía más que el viewport, así que había que
   scrollear para llegar al botón. Se comprime lo que rodea al formulario y los
   campos pasan a dos columnas. Solo aplica a esta página. */
/* El velo del alta (86%) tapa casi toda la textura. Acá la chapa es parte del
   pedido, así que se aclara: las tarjetas ya traen su propio relleno oscuro y
   el desenfoque, con lo que el texto conserva contraste sobre la foto visible. */
body.mc-quote .mc-main {
  background-image:
    radial-gradient(1100px 620px at 12% -8%, rgba(229, 9, 20, 0.20), transparent 62%),
    radial-gradient(900px 560px at 92% 108%, rgba(105, 109, 115, 0.20), transparent 64%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.58) 0%, rgba(10, 10, 10, 0.46) 45%, rgba(10, 10, 10, 0.66) 100%),
    url("../img/fondo-metal.jpg");
}
body.mc-quote .mc-section { padding: 1rem 0 1.8rem; }
body.mc-quote .mc-glass-stage { padding: clamp(0.9rem, 1.3vw, 1.15rem); }
body.mc-quote .mc-glass-card { padding: clamp(1rem, 1.4vw, 1.3rem); }
body.mc-quote .mc-glass-card__title { font-size: clamp(1.1rem, 1.7vw, 1.4rem); margin-bottom: 0.15em; }
body.mc-quote .mc-glass-card__body { font-size: 0.8rem; line-height: 1.45; margin-bottom: 0.8em; }
body.mc-quote .mc-glass-card__label { font-size: 0.64rem; margin-bottom: 0.15em; }
body.mc-quote .mc-glass-stage label { font-size: 0.76rem; margin-bottom: 0.2em; }
body.mc-quote .mc-glass-stage .mc-field { margin: 0 0 0.5rem; }
body.mc-quote .mc-glass-stage .mc-hint { font-size: 0.7rem; margin-top: 0.15em; }
body.mc-quote .mc-glass-stage input:not([type=checkbox]):not([type=radio]):not([type=submit]),
body.mc-quote .mc-glass-stage select,
body.mc-quote .mc-glass-stage textarea { padding: 0.45em 0.65em; font-size: 0.86rem; }
/* El textarea viene con rows="4" desde el shortcode; acá pesa más que el resto. */
body.mc-quote .mc-glass-stage textarea { min-height: 0; height: 4.2rem; resize: vertical; }

/* El formulario pasa a dos columnas. `display: contents` en .mc-form-row disuelve
   ese wrapper para que nombre y teléfono entren como celdas propias de la grilla. */
body.mc-quote .mc-glass-stage form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
}
body.mc-quote .mc-glass-stage form > .mc-form-row { display: contents; }
/* Los ocultos (nonce, flag de envío) se llevarían una celda cada uno. */
body.mc-quote .mc-glass-stage form > input[type="hidden"] { display: none; }
/* A ancho completo: comentarios y botón. */
body.mc-quote .mc-glass-stage form > .mc-field:has(textarea),
body.mc-quote .mc-glass-stage form > button { grid-column: 1 / -1; }
body.mc-quote .mc-glass-stage form > button { margin-top: 0.3rem; }

/* La ficha de contacto acompaña: se le baja el aire para que no sea ella la que
   define la altura del bloque. */
body.mc-quote .mc-contact-card__brand img { height: 64px; }
body.mc-quote .mc-contact-card__tagline { font-size: 0.8rem; margin-top: 0.6em; }
body.mc-quote .mc-contact-card .mc-rule { margin: 1rem auto; }
body.mc-quote .mc-contact-card__list { gap: 0.8rem; }
body.mc-quote .mc-contact-card__value { font-size: 0.88rem; }
body.mc-quote .mc-contact-card__cta { margin-top: 1.1rem; }
/* El aviso de abajo es contexto, no parte del formulario: no debe empujarlo. */
body.mc-quote .mc-notice { margin-top: 1.2rem !important; font-size: 0.82rem; padding: 0.8em 1em; }
/* .mc-notice no fija color y hereda el negro del body: sobre la chapa quedaba
   ilegible. Acá va en blanco, con el relleno un poco más opaco para despegarlo
   de la foto. */
body.mc-quote .mc-notice { color: var(--mc-blanco); background: rgba(10, 10, 10, 0.55); }
body.mc-quote .mc-notice a { color: var(--mc-blanco); text-decoration: underline; }

/* Pantallas bajas (portátil de ~768px): se recorta lo prescindible. */
@media (min-width: 861px) and (max-height: 830px) {
  body.mc-quote .mc-glass-card__body { display: none; }
  body.mc-quote .mc-section { padding: 0.6rem 0 1rem; }
  body.mc-quote .mc-glass-stage { padding: 0.75rem; }
  body.mc-quote .mc-glass-card { padding: 0.9rem; }
  body.mc-quote .mc-glass-card__title { font-size: 1.15rem; }
  body.mc-quote .mc-glass-stage .mc-field { margin: 0 0 0.35rem; }
  body.mc-quote .mc-glass-stage label { font-size: 0.72rem; margin-bottom: 0.15em; }
  body.mc-quote .mc-glass-stage input:not([type=checkbox]):not([type=radio]):not([type=submit]),
  body.mc-quote .mc-glass-stage select,
  body.mc-quote .mc-glass-stage textarea { padding: 0.4em 0.6em; font-size: 0.84rem; }
  body.mc-quote .mc-glass-stage textarea { height: 3.2rem; }
  body.mc-quote .mc-contact-card__brand img { height: 52px; }
  body.mc-quote .mc-contact-card__list { gap: 0.6rem; }
  body.mc-quote .mc-notice { display: none; }
}

/* Por debajo de 860px la grilla ya apila: el formulario vuelve a una columna
   para no dejar campos de 120px de ancho. */
@media (max-width: 860px) {
  body.mc-quote .mc-glass-stage form { grid-template-columns: 1fr; }
  body.mc-quote .mc-glass-stage form > .mc-form-row { display: grid; }
  body.mc-quote .mc-section { padding: 1.6rem 0 2rem; }
}

/* ---------- Finalizar compra: la misma pieza que Presupuestos ----------
   Es donde se completa "Pago en sucursal" (y también Mercado Pago), así que se viste
   con el mismo lenguaje que el formulario de Presupuestos y no con el checkout pelado
   de WooCommerce: mismo lienzo de chapa, mismo velo, misma grilla 1,15/0,85, las mismas
   tarjetas de vidrio y los mismos campos de .mc-glass-stage. El HTML lo arma
   woocommerce/checkout/form-checkout.php, que conserva todos los hooks del plugin.

   Casi todo lo que sigue es "deshacer WooCommerce": el plugin maquetó su checkout con
   floats, tablas con recuadro propio y una caja de pago gris pensada para fondo blanco. */

/* Fondo: idéntico al de Presupuestos —velo aclarado para que la chapa se lea— y no el
   86% del alta. Vale también para "pedido recibido", que cierra el mismo recorrido. */
body.mc-checkout .mc-main,
body.mc-checkout-recibido .mc-main {
  background-image:
    radial-gradient(1100px 620px at 12% -8%, rgba(229, 9, 20, 0.20), transparent 62%),
    radial-gradient(900px 560px at 92% 108%, rgba(105, 109, 115, 0.20), transparent 64%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.58) 0%, rgba(10, 10, 10, 0.46) 45%, rgba(10, 10, 10, 0.66) 100%),
    url("../img/fondo-metal.jpg");
}

/* Cabecera fuera, mismo criterio que Presupuestos y el carrito: el h1 "Finalizar compra"
   repite lo que ya dicen los títulos de las tarjetas. Queda en el DOM para SEO y
   lectores de pantalla. */
body.mc-checkout .mc-page-header { padding: 0; }
body.mc-checkout .mc-page-header h1 {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
body.mc-checkout .mc-section { padding: 1rem 0 1.8rem; }

/* Sobre la foto la isla no lleva relleno propio: si lo llevara taparía la chapa y el
   desenfoque de las tarjetas no tendría nada que desenfocar. */
body.mc-checkout .mc-glass-stage {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  padding: clamp(0.9rem, 1.3vw, 1.15rem);
}
/* El div .woocommerce que envuelve al shortcode no debe recortar el lienzo. */
body.mc-checkout .woocommerce { margin: 0; }
.mc-checkout__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
/* WooCommerce le pone position: relative y z-index al form en algunos temas; acá el
   <form> es hijo directo del lienzo y tiene que quedar por encima de los blobs. */
body.mc-checkout form.checkout,
body.mc-checkout .mc-checkout-stage__top { position: relative; z-index: 1; }

/* Tarjetas y tipografía: las mismas medidas compactas que el modo Presupuestos. */
body.mc-checkout .mc-glass-card { padding: clamp(1rem, 1.4vw, 1.3rem); }
body.mc-checkout .mc-glass-card__title { font-size: clamp(1.1rem, 1.7vw, 1.4rem); margin-bottom: 0.15em; }
body.mc-checkout .mc-glass-card__body { font-size: 0.8rem; line-height: 1.45; margin-bottom: 0.8em; }
body.mc-checkout .mc-glass-card__label { font-size: 0.64rem; margin-bottom: 0.15em; }
body.mc-checkout .mc-glass-stage label { font-size: 0.76rem; margin-bottom: 0.2em; }
body.mc-checkout .mc-glass-stage input:not([type=checkbox]):not([type=radio]):not([type=submit]),
body.mc-checkout .mc-glass-stage select,
body.mc-checkout .mc-glass-stage textarea { padding: 0.45em 0.65em; font-size: 0.86rem; }
body.mc-checkout .mc-glass-stage textarea { min-height: 0; height: 4.2rem; resize: vertical; }

/* ---- Columna de datos ----
   `.woocommerce .col2-set .col-1` (0,3,0) flota al 48%: adentro de la tarjeta las dos
   mitades tienen que apilarse a ancho completo. Y el clearfix de .col2-set imprime
   ::before/::after con content:" ", que dejaban dos renglones vacíos. */
body.mc-checkout .woocommerce .mc-checkout__customer > .col-1,
body.mc-checkout .woocommerce .mc-checkout__customer > .col-2 { float: none; width: auto; margin: 0; }
body.mc-checkout .mc-checkout__customer::before,
body.mc-checkout .mc-checkout__customer::after { content: none; display: none; }

/* Los campos van a dos columnas, como en el formulario de Presupuestos. Se hace sobre
   el contenedor de campos de cada bloque (facturación, envío, notas) y no sobre el
   <form>, que acá envuelve también el resumen del pedido. */
body.mc-checkout .woocommerce-billing-fields__field-wrapper,
body.mc-checkout .woocommerce-shipping-fields__field-wrapper,
body.mc-checkout .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.9rem;
}
/* WooCommerce reparte esos campos con float y width: 47%; dentro de la grilla sobra.
   El margen entre campos lo fija `.woocommerce form .form-row` en 6px: se lleva a los
   0,5rem del formulario de Presupuestos. */
body.mc-checkout .mc-checkout__card .form-row { float: none; width: auto; margin: 0 0 0.5rem; }
body.mc-checkout .woocommerce-billing-fields__field-wrapper > .form-row-wide,
body.mc-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-wide,
body.mc-checkout .woocommerce-additional-fields__field-wrapper > .form-row,
body.mc-checkout .woocommerce-billing-fields__field-wrapper > .notes { grid-column: 1 / -1; }
/* WooCommerce marca casi todos los campos de dirección como form-row-wide, así que con
   la regla de arriba solo Nombre/Apellidos compartían renglón y la columna de datos
   quedaba al doble de alto que la del pedido. Estos cuatro entran de a pares —ciudad
   con provincia, código postal con teléfono— igual que en Presupuestos. Se emparejan
   por id porque la clase es la misma para todos: cambiarla habría que hacerlo desde
   `woocommerce_checkout_fields`, y eso es tocar la definición del campo, no su forma. */
body.mc-checkout #billing_city_field,
body.mc-checkout #billing_state_field,
body.mc-checkout #billing_postcode_field,
body.mc-checkout #billing_phone_field,
body.mc-checkout #shipping_city_field,
body.mc-checkout #shipping_state_field,
body.mc-checkout #shipping_postcode_field { grid-column: auto; }
/* El <span> que WooCommerce mete entre la etiqueta y el campo es inline: sin esto el
   ancho del input se calcula bien pero los mensajes de validación se apilan raro. */
body.mc-checkout .woocommerce-input-wrapper { display: block; }
/* El título "Detalles de facturación" repite el de la tarjeta. Los otros dos (envío,
   información adicional) sí separan bloques: pasan a rótulo en versalitas, como el
   encabezado de las tarjetas del carrito. */
body.mc-checkout .woocommerce-billing-fields > h3 { display: none; }
body.mc-checkout .woocommerce-shipping-fields > h3,
body.mc-checkout .woocommerce-additional-fields > h3 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-gris-claro);
  margin: 1.1em 0 0.8em;
  padding-top: 0.9em;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.mc-checkout .mc-glass-stage .optional { color: var(--mc-gris-claro); font-weight: 400; }
/* El asterisco de campo obligatorio lo pinta WooCommerce en #a00 desde
   `.woocommerce form .form-row .required` (0,3,1), pensado para fondo blanco: sobre la
   tarjeta oscura da 2,4:1. Va al mismo tinte claro que usa el resto del sitio. */
body.mc-checkout .mc-glass-stage .form-row .required,
body.mc-checkout .mc-glass-stage .form-row abbr.required { color: var(--mc-rojo-claro); border: 0; text-decoration: none; }
/* País con un solo país habilitado: WooCommerce lo deja sin caja a propósito
   (`.country_to_state--single`), como dato fijo. Se respeta, pero al cuerpo de texto
   de los demás campos, que si no queda un renglón en 16px entre campos de 13,76px. */
body.mc-checkout .mc-glass-stage select.country_to_state--single { font-size: 0.86rem; padding: 0.45em 0; }

/* Select2 (provincia): el desplegable del plugin trae caja blanca y borde plata. Se le
   copian las medidas del resto de los campos para que la fila no quede escalonada. */
body.mc-checkout .select2-container--default .select2-selection--single {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  height: auto;
  min-height: 0;
  font-size: 0.86rem;
  padding: 0.45em 0.65em;
}
body.mc-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--mc-blanco);
  font-size: inherit;
  line-height: 1.25;
  padding: 0;
}
body.mc-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; height: auto; transform: translateY(-50%); }
body.mc-checkout .select2-container--default.select2-container--open .select2-selection--single {
  border-color: rgba(229, 9, 20, 0.65);
  box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.18);
}
/* El panel de resultados lo cuelga select2 del <body>, fuera del lienzo: se lo alcanza
   por la clase del body, que es la misma que viste al resto del checkout. */
body.mc-checkout .select2-dropdown {
  background: var(--mc-grafito);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: var(--mc-plata);
  overflow: hidden;
}
body.mc-checkout .select2-container--default .select2-search--dropdown .select2-search__field {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: var(--mc-blanco);
  font-size: 0.86rem;
  padding: 0.4em 0.6em;
}
body.mc-checkout .select2-container--default .select2-results__option { font-size: 0.86rem; }
body.mc-checkout .select2-container--default .select2-results__option--highlighted[aria-selected],
body.mc-checkout .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--mc-rojo); color: var(--mc-blanco); }
body.mc-checkout .select2-container--default .select2-results__option[aria-selected="true"],
body.mc-checkout .select2-container--default .select2-results__option[data-selected="true"] { background: rgba(255, 255, 255, 0.08); color: var(--mc-blanco); }

/* ---- Columna del pedido ----
   La tabla del resumen trae recuadro propio de .shop_table y celdas con relleno de
   plugin: adentro de la tarjeta de vidrio eso es un segundo marco. Se disuelve en
   filas, con el mismo lenguaje que el resumen de importes del carrito. */
body.mc-checkout table.woocommerce-checkout-review-order-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
  background: transparent;
}
body.mc-checkout .woocommerce-checkout-review-order-table th,
body.mc-checkout .woocommerce-checkout-review-order-table td {
  border: 0;
  padding: 0.6em 0;
  background: transparent;
  vertical-align: top;
}
body.mc-checkout .woocommerce-checkout-review-order-table thead th {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-gris-claro);
  text-align: left;
  padding-bottom: 0.8em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
body.mc-checkout .woocommerce-checkout-review-order-table thead th.product-total { text-align: right; }
body.mc-checkout .woocommerce-checkout-review-order-table tbody td {
  font-size: 0.86rem;
  color: var(--mc-plata);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
body.mc-checkout .woocommerce-checkout-review-order-table tbody td.product-total {
  text-align: right;
  color: var(--mc-blanco);
  font-weight: 700;
  white-space: nowrap;
}
body.mc-checkout .woocommerce-checkout-review-order-table .product-quantity { color: var(--mc-gris-claro); }
body.mc-checkout .woocommerce-checkout-review-order-table tfoot th {
  text-align: left;
  color: var(--mc-gris-claro);
  font-weight: 600;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
body.mc-checkout .woocommerce-checkout-review-order-table tfoot td {
  text-align: right;
  color: var(--mc-blanco);
  font-weight: 700;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
/* Total: cierra el resumen, sin filete y con más peso — igual que en el carrito. */
body.mc-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th,
body.mc-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td {
  border-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 0.9em;
}
body.mc-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th {
  color: var(--mc-blanco);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
body.mc-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td { font-size: 1.35rem; font-weight: 800; }
body.mc-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td small {
  display: block; font-size: 0.7rem; font-weight: 400; color: var(--mc-gris-claro); margin-top: 0.3em;
}

/* Formas de pago: cada una es una tarjetita de vidrio, y la elegida se marca con el
   filete rojo de la marca. WooCommerce las pinta como lista gris con borde punteado. */
body.mc-checkout #payment {
  background: transparent;
  border-radius: 0;
  padding: 1.3rem 0 0;
  margin: 1.3rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.mc-checkout #payment ul.payment_methods {
  display: grid;
  gap: 0.6rem;
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  border: 0;
}
body.mc-checkout #payment ul.payment_methods li {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 0.75em 0.9em;
  transition: border-color 180ms, background 180ms;
}
body.mc-checkout #payment ul.payment_methods li:has(input:checked) {
  border-color: rgba(229, 9, 20, 0.55);
  background: rgba(229, 9, 20, 0.10);
}
body.mc-checkout #payment ul.payment_methods li input[type="radio"] { accent-color: var(--mc-rojo); margin-right: 0.5em; }
body.mc-checkout #payment ul.payment_methods label {
  display: inline;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--mc-blanco);
  margin: 0;
  cursor: pointer;
}
body.mc-checkout #payment ul.payment_methods li img { display: inline-block; max-height: 24px; margin-left: 0.5em; vertical-align: middle; }
/* El cuadro de detalle del método: el plugin lo pinta gris con una flechita ::before. */
body.mc-checkout #payment div.payment_box {
  background: transparent;
  border-radius: 0;
  color: var(--mc-gris-claro);
  font-size: 0.78rem;
  line-height: 1.5;
  margin: 0.6em 0 0;
  padding: 0;
}
body.mc-checkout #payment div.payment_box::before { content: none; }
body.mc-checkout #payment div.payment_box p:last-child { margin-bottom: 0; }
body.mc-checkout #payment .place-order { padding: 0; margin: 0; background: transparent; border: 0; }
body.mc-checkout #payment .woocommerce-privacy-policy-text p,
body.mc-checkout #payment .woocommerce-terms-and-conditions-wrapper { font-size: 0.72rem; color: var(--mc-gris-claro); }

/* "Realizar el pedido": mismo botón que "Enviar solicitud" en Presupuestos. */
body.mc-checkout .woocommerce #payment button#place_order {
  display: block;
  width: 100%;
  padding: 0.8em 1.6em;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--mc-rojo);
  color: var(--mc-blanco);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  white-space: normal;
  box-shadow: 0 6px 22px rgba(229, 9, 20, 0.35);
  transition: background var(--mc-glass-dur), box-shadow var(--mc-glass-dur), transform 120ms;
}
body.mc-checkout .woocommerce #payment button#place_order:hover {
  background: var(--mc-rojo-oscuro);
  box-shadow: 0 10px 30px rgba(229, 9, 20, 0.45);
}
body.mc-checkout .woocommerce #payment button#place_order:active { transform: translateY(1px); }

/* ---- Cupón e inicio de sesión, arriba del par de tarjetas ----
   Los imprime `woocommerce_before_checkout_form`. El aviso ya lo viste .mc-glass-stage;
   acá se ordena el espaciado y se le da al formulario de cupón el mismo panel de vidrio.
   No se toca su `display`: WooCommerce lo abre y lo cierra con jQuery por estilo inline,
   así que cualquier display que se declare acá o no se aplica o rompe el desplegable. */
body.mc-checkout .mc-checkout-stage__top .woocommerce-form-coupon-toggle,
body.mc-checkout .mc-checkout-stage__top .woocommerce-notices-wrapper { margin-bottom: 0.9rem; }
body.mc-checkout .mc-checkout-stage__top .woocommerce-notices-wrapper:empty { margin-bottom: 0; }
body.mc-checkout form.checkout_coupon,
body.mc-checkout form.woocommerce-form-login {
  margin: 0 0 1.1rem;
  padding: 1rem;
  border: 1px solid var(--mc-glass-border);
  border-radius: var(--mc-radius);
  background: rgba(10, 10, 10, 0.45);
  backdrop-filter: var(--mc-glass-blur);
  -webkit-backdrop-filter: var(--mc-glass-blur);
  color: var(--mc-plata);
}
body.mc-checkout .woocommerce form.checkout_coupon button.button,
body.mc-checkout .woocommerce form.woocommerce-form-login button.button { border-radius: 10px; }

/* Velo de carga: WooCommerce tapa el bloque con blockUI (fondo blanco al 60%) mientras
   recalcula el pedido por AJAX. Sobre la chapa oscura eso es un destello. */
body.mc-checkout .blockUI.blockOverlay {
  background: rgba(10, 10, 10, 0.55) !important;
  opacity: 1 !important;
  border-radius: inherit;
}

@media (max-width: 860px) {
  body.mc-checkout .woocommerce-billing-fields__field-wrapper,
  body.mc-checkout .woocommerce-shipping-fields__field-wrapper,
  body.mc-checkout .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; }
  body.mc-checkout .mc-section { padding: 1.6rem 0 2rem; }
}


/* ---------- Pedido recibido: una sola tarjeta, lenguaje del carrito ----------
   El markup lo arma woocommerce/checkout/thankyou.php. WooCommerce imprimía cinco bloques
   sueltos sobre la chapa —gracias, datos del pedido, detalle, dirección y el aviso con el
   comprobante—; acá entran todos en una tarjeta de vidrio con el mismo encabezado en
   versalitas y los mismos filetes finos que las del carrito.
   Casi todo lo que sigue es deshacer los estilos que WooCommerce trae para fondo blanco. */

/* La cabecera de la página dice "Finalizar compra" —es el título de la página de
   checkout—, que en esta pantalla ya no corresponde: la tarjeta dice "Pedido recibido".
   Se oculta a la vista pero queda en el DOM, mismo criterio que el carrito. */
body.mc-checkout-recibido .mc-page-header { padding: 0; }
body.mc-checkout-recibido .mc-page-header h1 {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
body.mc-checkout-recibido .mc-section { padding: 1.6rem 0 2.4rem; }

/* Una sola columna: sin el ancho acotado la tarjeta se estiraba a los 1240px del
   contenedor y las dos columnas de la tabla quedaban a lados opuestos de la pantalla. */
.mc-recibido__card {
  max-width: 760px;
  margin-inline: auto;
}
/* Sin el translateY que .mc-glass-card aplica al hover: acá adentro está el botón de
   descargar el comprobante, y mover la tarjeta al entrar el cursor corre justo el control
   que el visitante viene a tocar. Mismo criterio que las tarjetas del carrito. */
.mc-recibido__card:hover,
.mc-recibido__card:focus-within { transform: none; }

body.mc-checkout-recibido .woocommerce-notice--success {
  margin: 0 0 1.4rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--mc-plata);
  font-size: 0.95rem;
  line-height: 1.5;
}
body.mc-checkout-recibido .woocommerce-notice--success::before { content: none; }

/* Los cuatro datos del pedido. WooCommerce los pone en fila, flotados al 25%, con un filete
   punteado entre uno y otro y el texto en versalitas de 0.715em; en una tarjeta de 760px eso
   parte los importes al medio. Pasan a pares rótulo/valor en dos columnas.
   Los selectores llevan `body...` y `ul...` a propósito: hay que ganarle a
   `.woocommerce ul.order_details li` (0,2,2), que es la que impone el float y el ancho. Sin
   esa especificidad la grilla se arma pero los ítems siguen flotados y se acomodan en
   cualquier orden — que es exactamente lo que pasaba. */
body.mc-checkout-recibido ul.mc-recibido__resumen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.4rem;
  margin: 0 0 1.4rem;
  padding: 0 0 1.4rem;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  list-style: none;
}
/* El clearfix de WooCommerce imprime ::before/::after con content:" ": adentro de una
   grilla esos pseudoelementos cuentan como ítems y se llevan dos celdas. */
body.mc-checkout-recibido ul.mc-recibido__resumen::before,
body.mc-checkout-recibido ul.mc-recibido__resumen::after { content: none; display: none; }
body.mc-checkout-recibido ul.mc-recibido__resumen li {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
  text-transform: none;
  font-size: 1rem;
  line-height: 1.3;
}
/* Hijo directo, no `li span` a secas: el importe del total viene envuelto en el
   <span class="woocommerce-Price-amount"> que imprime WooCommerce dentro del <strong>, y
   con el selector suelto se llevaba el estilo del rótulo — quedaba en gris y a 10px al lado
   de los otros tres valores en blanco de 16px. */
body.mc-checkout-recibido ul.mc-recibido__resumen li > span {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-gris-claro);
}
body.mc-checkout-recibido ul.mc-recibido__resumen li strong {
  color: var(--mc-blanco);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

/* Títulos de las secciones que imprime WooCommerce ("Detalles del pedido", "Dirección de
   facturación"): al mismo rótulo en versalitas que el encabezado de la tarjeta. */
body.mc-checkout-recibido .woocommerce-order-details__title,
body.mc-checkout-recibido .woocommerce-column__title,
.mc-recibido__accion-titulo {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-gris-claro);
  margin: 0 0 1em;
}
body.mc-checkout-recibido .woocommerce-order-details,
body.mc-checkout-recibido .woocommerce-customer-details { margin: 0 0 1.4rem; }

/* Tabla del detalle: se le saca el recuadro propio de .shop_table —adentro de la tarjeta
   es un segundo marco con otras esquinas— y se la viste como la del resumen del carrito. */
body.mc-checkout-recibido table.woocommerce-table--order-details {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
  background: transparent;
}
body.mc-checkout-recibido .woocommerce-table--order-details th,
body.mc-checkout-recibido .woocommerce-table--order-details td {
  border: 0;
  padding: 0.6em 0;
  background: transparent;
  vertical-align: top;
}
body.mc-checkout-recibido .woocommerce-table--order-details thead th {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-gris-claro);
  text-align: left;
  padding-bottom: 0.8em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
body.mc-checkout-recibido .woocommerce-table--order-details thead th.product-total { text-align: right; }
body.mc-checkout-recibido .woocommerce-table--order-details tbody td {
  font-size: 0.88rem;
  color: var(--mc-plata);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
body.mc-checkout-recibido .woocommerce-table--order-details tbody td.product-total {
  text-align: right;
  color: var(--mc-blanco);
  font-weight: 700;
  white-space: nowrap;
}
body.mc-checkout-recibido .woocommerce-table--order-details tbody a { color: var(--mc-blanco); }
body.mc-checkout-recibido .woocommerce-table--order-details tbody a:hover { color: var(--mc-rojo-claro); }
body.mc-checkout-recibido .woocommerce-table--order-details .product-quantity { color: var(--mc-gris-claro); font-weight: 600; }
body.mc-checkout-recibido .woocommerce-table--order-details tfoot th {
  text-align: left;
  color: var(--mc-gris-claro);
  font-weight: 600;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
body.mc-checkout-recibido .woocommerce-table--order-details tfoot td {
  text-align: right;
  color: var(--mc-blanco);
  font-weight: 700;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
/* La última fila del pie es el Total (o el método de pago, según lo que imprima
   WooCommerce): cierra sin filete. */
body.mc-checkout-recibido .woocommerce-table--order-details tfoot tr:last-child th,
body.mc-checkout-recibido .woocommerce-table--order-details tfoot tr:last-child td { border-bottom: 0; }

body.mc-checkout-recibido .woocommerce-customer-details address {
  border: 0;
  padding: 0;
  border-radius: 0;
  font-style: normal;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--mc-plata);
}
/* El teléfono y el mail conservan el ícono que WooCommerce les pone con su fuente de
   iconos (y por eso conservan también su padding-left): sobre la tarjeta oscura se leen
   bien y ayudan a distinguir los dos renglones de un vistazo. Solo se ajusta el color, que
   viene pensado para fondo blanco. */
body.mc-checkout-recibido .woocommerce-customer-details--phone,
body.mc-checkout-recibido .woocommerce-customer-details--email {
  margin: 0.5em 0 0;
  font-size: 0.88rem;
  color: var(--mc-plata);
}

/* Bloque de cierre: lo que el cliente tiene que hacer ahora. Apoyado contra el borde
   inferior de la tarjeta y separado por un filete, igual que "Elegí cómo pagar" en la
   tarjeta de totales del carrito. */
.mc-recibido__accion {
  margin: 1.6rem 0 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.mc-recibido__accion-texto {
  color: var(--mc-plata);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0 0 1em;
}
.mc-recibido__datos {
  display: grid;
  gap: 0.7rem;
  margin: 0 0 1.3rem;
  padding: 0;
  list-style: none;
}
.mc-recibido__datos li { display: flex; flex-direction: column; gap: 0.1em; }
.mc-recibido__datos li > span {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-gris-claro);
}
.mc-recibido__datos strong { color: var(--mc-blanco); font-size: 0.88rem; font-weight: 600; line-height: 1.4; }
/* El .mc-btn base lleva white-space: nowrap, pensado para botones en fila; acá el botón
   ocupa el ancho de la tarjeta y en móvil el texto tiene que poder pasar a dos líneas. */
.mc-recibido__accion .mc-btn {
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  min-height: 3.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-recibido__acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0; }

@media (max-width: 560px) {
  /* Misma especificidad que la regla de arriba: con `.mc-recibido__resumen` a secas esta
     no llegaba a pisarla y el resumen se quedaba en dos columnas de 133px, con el rótulo
     "NÚMERO DEL PEDIDO" partido en dos renglones. */
  body.mc-checkout-recibido ul.mc-recibido__resumen { grid-template-columns: 1fr; gap: 0.8rem; }
}


/* ---------- Contacto: formulario sobre vidrio + mapa ----------
   La página se quedó con dos piezas (formulario y mapa) y toma prestado el
   lienzo de Presupuestos. A diferencia de aquella, esta no busca entrar entera
   en pantalla: no se comprime la tipografía, solo se aclara el velo y se arma
   el formulario a dos columnas para que nombre y email compartan renglón. */
body.mc-contacto .mc-main {
  background-image:
    radial-gradient(1100px 620px at 12% -8%, rgba(229, 9, 20, 0.20), transparent 62%),
    radial-gradient(900px 560px at 92% 108%, rgba(105, 109, 115, 0.20), transparent 64%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.58) 0%, rgba(10, 10, 10, 0.46) 45%, rgba(10, 10, 10, 0.66) 100%),
    url("../img/fondo-metal.jpg");
}
/* Sobre la foto la isla no lleva relleno propio: si lo llevara taparía la chapa
   y el desenfoque de las tarjetas no tendría nada que desenfocar. */
body.mc-contacto .mc-glass-stage {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
/* Las dos tarjetas pesan lo mismo: acá no hay una principal y una que acompaña
   como en Presupuestos, así que van a columnas iguales y no 1.1fr/0.9fr.
   `align-items: stretch` pisa el `start` que trae .mc-glass-stage__grid — es lo
   que las iguala en alto: sin esto cada una mide lo que mide su contenido y el
   formulario, que tiene 4 campos, sacaba ~60px de ventaja al mapa. */
.mc-contacto__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.mc-contacto__card--destacada { border-color: rgba(229, 9, 20, 0.42); }
.mc-contacto__card--destacada:hover,
.mc-contacto__card--destacada:focus-within { border-color: rgba(229, 9, 20, 0.75); }

/* Estirar la tarjeta no alcanza: .mc-glass-card__inner es un bloque normal y
   dejaría el relleno abajo vacío. Las dos pasan a columna flex para que el hijo
   elástico de cada una (el marco del mapa; en el formulario, nada) se coma la
   diferencia y el borde inferior cierre a la misma altura en las dos. */
.mc-contacto__card { display: flex; }
.mc-contacto__card > .mc-glass-card__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Formulario a dos columnas: nombre y email comparten renglón; asunto, mensaje
   y botón van a ancho completo. El nonce y el flag de envío son hijos directos
   del <form>, así que sin `display:none` se llevarían una celda cada uno. */
body.mc-contacto .mc-glass-stage form.mc-contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
}
body.mc-contacto .mc-glass-stage form.mc-contact-form > input[type="hidden"] { display: none; }
body.mc-contacto .mc-glass-stage form.mc-contact-form > .mc-field:has(textarea),
body.mc-contacto .mc-glass-stage form.mc-contact-form > .mc-field:has(#mc_contact_asunto),
body.mc-contacto .mc-glass-stage form.mc-contact-form > button { grid-column: 1 / -1; }
body.mc-contacto .mc-glass-stage form.mc-contact-form > button { margin-top: 0.4rem; }
/* El aviso de éxito/error del shortcode vive fuera del <form>: se despega del
   título para que no parezca parte de la bajada. */
body.mc-contacto .mc-glass-card__inner > .mc-notice {
  color: var(--mc-blanco);
  background: rgba(10, 10, 10, 0.55);
  margin-bottom: 1.1rem;
}
body.mc-contacto .mc-glass-card__inner > .mc-notice a { color: var(--mc-blanco); text-decoration: underline; }

/* Tarjeta del mapa. El <iframe> de Google trae su propio fondo blanco, así que
   va dentro de un marco con `overflow:hidden` para que respete el radio de la
   tarjeta y no rompa la lectura de vidrio con esquinas rectas. */
.mc-map-card__frame {
  position: relative;
  border-radius: var(--mc-radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  /* Este es el hijo elástico: crece hasta que la tarjeta del mapa alcanza el alto
     de la del formulario. El `min-height` es el piso, para que el mapa siga siendo
     usable si algún día el formulario se acorta. Nada de `aspect-ratio`: con un
     ratio el alto lo mandaría el ancho de la columna, no la tarjeta vecina. */
  flex: 1 1 auto;
  min-height: 340px;
}
.mc-map-card__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.mc-map-card__address {
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(229, 231, 233, 0.85);
  margin: 1rem 0 1.1rem;
}
/* El botón hereda el gris plata del outline general, que sobre el vidrio queda
   apagado: se le sube el filete para que se lea como acción. */
.mc-map-card .mc-btn--outline {
  border-color: var(--mc-glass-border-bright, rgba(255, 255, 255, 0.28));
  color: var(--mc-plata);
}
.mc-map-card .mc-btn--outline:hover { background: var(--mc-plata); color: var(--mc-negro); }

/* Por debajo de 860px la grilla del lienzo ya apila: el formulario vuelve a una
   columna para no dejar campos de 120px de ancho. */
@media (max-width: 860px) {
  body.mc-contacto .mc-glass-stage form.mc-contact-form { grid-template-columns: 1fr; }
  /* Apiladas ya no hay alto que igualar: el marco deja de ser elástico y vuelve a
     una altura propia, para que el mapa no se estire de más en pantallas altas. */
  .mc-map-card__frame { flex: 0 0 auto; height: 300px; min-height: 300px; }
}


/* ---------- Utilidades de vidrio ---------- */
.mc-glass {
  position: relative;
  overflow: hidden;
  background: var(--mc-glass-fill);
  border: 1px solid var(--mc-glass-border);
  box-shadow: var(--mc-glass-shadow);
  backdrop-filter: var(--mc-glass-blur);
  -webkit-backdrop-filter: var(--mc-glass-blur);
}
.mc-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--mc-glass-reflection);
  pointer-events: none;
  z-index: 1;
}
.mc-glass--dark { background: var(--mc-glass-fill-dark); }

.mc-glass-card {
  border-radius: var(--mc-radius-lg);
  padding: clamp(1.4rem, 2.5vw, 2.1rem);
  color: var(--mc-plata);
  transition: transform var(--mc-glass-dur) var(--mc-glass-ease),
              box-shadow var(--mc-glass-dur) var(--mc-glass-ease),
              border-color var(--mc-glass-dur),
              background var(--mc-glass-dur);
}
/* El kit levanta la tarjeta al hover. Acá adentro hay un formulario: si el
   usuario ya está tipeando, mover la tarjeta le corre el campo bajo el cursor,
   así que el desplazamiento se cancela con :focus-within y queda solo la
   profundidad (sombra + borde), que es lo que da la lectura de "vidrio". */
.mc-glass-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mc-glass-float);
  border-color: var(--mc-glass-border-bright);
  background: var(--mc-glass-fill-dark-hover);
}
.mc-glass-card:focus-within {
  transform: none;
  box-shadow: var(--mc-glass-float);
  border-color: var(--mc-glass-border-bright);
  background: var(--mc-glass-fill-dark-hover);
}
.mc-glass-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.08) 100%);
  opacity: 0;
  transition: opacity var(--mc-glass-dur);
  pointer-events: none;
  z-index: 2;
}
.mc-glass-card:hover::after,
.mc-glass-card:focus-within::after { opacity: 1; }

/* El contenido va por encima del reflejo (z-1) y del destello (z-2). */
.mc-glass-card__inner { position: relative; z-index: 3; }

.mc-glass-card__label {
  font-size: 0.68rem;
  /* Sin declarar caía a 400: a 10,9px y con este tracking quedaba desvaído.
     El resto de los rótulos del sitio (.mc-eyebrow) van en 700. */
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* El kit usa .55; sobre el blob rojo eso da 3,2:1 y no llega a AA para
     texto chico, así que se sube a .8 (4,96:1 en el peor punto de la tarjeta). */
  opacity: 0.8;
  margin: 0 0 0.35em;
}
.mc-glass-card__title {
  font-size: clamp(1.35rem, 2.4vw, 1.95rem);
  line-height: 1.15;
  font-weight: 700;
  color: var(--mc-blanco);
  margin: 0 0 0.4em;
}
.mc-glass-card__body {
  font-size: 0.9rem;
  line-height: 1.65;
  opacity: 0.85;
  margin: 0 0 1.6em;
}

/* La tarjeta de alta es el destino del link del navbar: se destaca con el
   acento rojo de la marca en el filete. */
.mc-alta__card--destacada,
.mc-presupuestos__card--destacada { border-color: rgba(229, 9, 20, 0.42); }
.mc-alta__card--destacada:hover,
.mc-alta__card--destacada:focus-within,
.mc-presupuestos__card--destacada:hover,
.mc-presupuestos__card--destacada:focus-within { border-color: rgba(229, 9, 20, 0.75); }

/* Ficha de contacto sobre vidrio: el logo y los iconos venían calibrados para el
   panel negro opaco; sobre el vidrio necesitan un poco más de peso. */
.mc-presupuestos__card .mc-contact-card__tagline { color: rgba(229, 231, 233, 0.8); }
.mc-presupuestos__card .mc-contact-card__label { color: rgba(229, 231, 233, 0.8); }
.mc-presupuestos__card .mc-contact-card__brand img { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)); }

/* ---------- Campos sobre vidrio ---------- */
.mc-glass-stage label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.4em; color: var(--mc-plata); }
.mc-glass-stage .required { color: var(--mc-rojo); }
.mc-glass-stage .mc-hint { display: block; font-size: 0.78rem; color: rgba(229, 231, 233, 0.8); margin-top: 0.35em; }
.mc-glass-stage .form-row,
.mc-glass-stage .mc-field { margin: 0 0 1.05rem; }

.mc-glass-stage input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.mc-glass-stage select,
.mc-glass-stage textarea {
  width: 100%;
  padding: 0.75em 0.9em;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--mc-blanco);
  font-size: 0.95rem;
  transition: border-color 180ms, box-shadow 180ms, background 180ms;
}
.mc-glass-stage input::placeholder,
.mc-glass-stage textarea::placeholder { color: var(--mc-plata); opacity: 0.4; }
.mc-glass-stage input:not([type=checkbox]):not([type=radio]):focus,
.mc-glass-stage select:focus,
.mc-glass-stage textarea:focus {
  outline: none;
  border-color: rgba(229, 9, 20, 0.65);
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.18);
}
/* El desplegable nativo hereda el fondo del sistema: las opciones necesitan
   color propio o quedan texto blanco sobre blanco en Windows. */
.mc-glass-stage select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4em;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.55)' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.mc-glass-stage select option { background: var(--mc-grafito); color: var(--mc-blanco); }

.mc-alta__check { display: flex; align-items: center; gap: 0.5em; font-weight: 500; }
.mc-alta__check input { width: auto; margin: 0; }
.mc-alta__nota { font-size: 0.78rem; color: rgba(229, 231, 233, 0.8); margin: 0.9em 0 0; }
.mc-glass-stage .lost_password { font-size: 0.85rem; margin: 0.9em 0 0; }
.mc-glass-stage .lost_password a { color: var(--mc-plata); text-decoration: underline; }
.mc-glass-stage .lost_password a:hover { color: var(--mc-rojo); }

/* ---------- Botones de vidrio ---------- */
.mc-glass-stage .mc-glass-btn,
.woocommerce .mc-glass-stage button.mc-glass-btn {
  border-radius: 10px;
  font-weight: 700;
  padding: 0.8em 1.6em;
  cursor: pointer;
  transition: background var(--mc-glass-dur), border-color var(--mc-glass-dur),
              box-shadow var(--mc-glass-dur), transform 120ms;
}
.woocommerce .mc-glass-stage button.mc-glass-btn--primary {
  background: var(--mc-rojo);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--mc-blanco);
  box-shadow: 0 6px 22px rgba(229, 9, 20, 0.35);
}
.woocommerce .mc-glass-stage button.mc-glass-btn--primary:hover {
  background: var(--mc-rojo-oscuro);
  box-shadow: 0 10px 30px rgba(229, 9, 20, 0.45);
}
.woocommerce .mc-glass-stage button.mc-glass-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--mc-glass-border-bright);
  color: var(--mc-plata);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.woocommerce .mc-glass-stage button.mc-glass-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  color: var(--mc-blanco);
}
.mc-glass-stage .mc-glass-btn:active { transform: translateY(1px); }

/* Avisos de WooCommerce dentro de la isla (errores de validación). */
.mc-glass-stage .woocommerce-error,
.mc-glass-stage .woocommerce-message,
.mc-glass-stage .woocommerce-info {
  background: rgba(10, 10, 10, 0.55);
  border-left: 4px solid var(--mc-rojo);
  color: var(--mc-plata);
  border-radius: 8px;
  padding: 1em 1.2em;
}
/* En el login/alta el lienzo pasó a ser oscuro, así que los avisos de afuera
   de la isla necesitan el mismo tratamiento o quedan ilegibles. */
body.mc-auth .woocommerce-error,
body.mc-auth .woocommerce-message,
body.mc-auth .woocommerce-info {
  background: rgba(10, 10, 10, 0.55);
  border-left: 4px solid var(--mc-rojo);
  color: var(--mc-plata);
  border-radius: 8px;
  padding: 1em 1.2em;
}
body.mc-auth .woocommerce-error a,
body.mc-auth .woocommerce-message a,
body.mc-auth .woocommerce-info a { color: var(--mc-blanco); text-decoration: underline; }

/* Sin backdrop-filter (Firefox con la flag apagada, navegadores viejos) el
   vidrio se vería como un panel casi transparente e ilegible: se opaca. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mc-glass { background: rgba(23, 25, 28, 0.92); }
  .mc-glass--dark { background: rgba(10, 10, 10, 0.92); }
  .mc-glass-stage input:not([type=checkbox]):not([type=radio]):not([type=submit]),
  .mc-glass-stage select,
  .mc-glass-stage textarea { background: rgba(255, 255, 255, 0.10); }
}

@media (prefers-reduced-motion: reduce) {
  .mc-glass-stage__blob { animation: none; }
  .mc-glass-card { transition: none; }
  .mc-glass-card:hover { transform: none; }
  /* El anillo se oculta en vez de sólo frenarse: quieto queda como un aro fijo
     dibujado dentro del botón. */
  .mc-whatsapp-float__btn--ring::before { display: none; }
  .mc-whatsapp-float__btn { animation: none; transition: none; }
  .mc-whatsapp-float__btn:hover { transform: none; }
  .mc-whatsapp-float__bubble { transition: none; }
}

@media (max-width: 1080px) {
  .mc-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .mc-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
  .mc-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* Menú hamburguesa. El corte está en 1024px y no en los 860px del resto de los bloques
   porque los ocho ítems del menú + logo + carrito + "Cotizar" no entran antes: medido en
   este header, la fila necesita 951px de ancho cuando solo hay 845px disponibles a 900px de
   pantalla, y el logo —que es lo único que el flex puede encoger— terminaba con 0px de ancho,
   o sea invisible. El mismo valor está en assets/js/main.js (mcAnchoMovil): si se cambia acá,
   cambiarlo allá. */
@media (max-width: 1024px) {
  .mc-burger { display: inline-flex; }
  .mc-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--mc-negro);
    border-top: 1px solid var(--mc-acero);
    padding: 0.5rem 0 1rem;
  }
  .mc-nav.is-open { display: block; }
  .mc-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: min(var(--mc-container), calc(100% - 2.5rem));
    margin-inline: auto;
  }
  .mc-nav__list > li { width: 100%; }
  .mc-nav__list a { padding: 0.8em 0; width: 100%; }
  .mc-mega {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    display: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 0 0.4rem 1rem;
    grid-template-columns: 1fr;
  }
  .mc-nav__list li.menu-item-has-children.is-open > .mc-mega { display: grid; }
}

/* Tramo entre el hamburguesa y el escritorio holgado: el menú completo entra, pero justo.
   Se aprietan separaciones y cuerpo de letra, y se le prohíbe al logo encogerse —sin esto
   el flex se lo comía primero a él, que es el único elemento con margen para achicarse—.
   En pantallas chicas ese encogido sí sirve (a 375px el logo pasa de 122px a 84px y la fila
   entra), así que la regla va acotada a este rango y no al selector base. */
@media (min-width: 1025px) and (max-width: 1320px) {
  .mc-header__row { gap: 1rem; }
  .mc-logo { flex: 0 0 auto; }
  .mc-logo img { height: 58px; }
  .mc-nav__list { gap: 1.05rem; }
  .mc-nav__list a { font-size: 0.84rem; }
  .mc-header__actions { flex: 0 0 auto; gap: 0.7rem; }
}

@media (max-width: 860px) {
  .mc-grid--2, .mc-grid--3, .mc-grid--4 { grid-template-columns: 1fr; }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  .mc-form-row { grid-template-columns: 1fr; }
  .mc-glass-stage__grid { grid-template-columns: 1fr; }
  .mc-glass-stage__blob { filter: blur(60px); }
  .mc-footer__grid { grid-template-columns: 1fr; }
  .mc-hero__slogan { font-size: 0.7rem; }
}

@media (max-width: 860px) {
  /* En pantallas táctiles no hay hover: la burbuja no aporta y el botón se achica.
     El pie pasa a una sola columna, así que en vez de reservar ancho reservamos alto. */
  .mc-whatsapp-float__bubble { display: none; }
  .mc-footer__grid > *:last-child { padding-right: 0; }
  .mc-footer__bottom { padding-right: 0; padding-bottom: 0.4rem; }
  .mc-footer__credit { padding: 0 0 5.5rem 0; }
}

/* =========================================================
   "Ofertas" del menú — texto con degradado y resplandor
   Adaptado de 'texto efecto/cycling-gradient-glow' a la paleta de marca.
   ========================================================= */

/* El original cicla la rueda de tonos entera (arcoíris). Acá el recorrido se
   reemplaza por un reflejo plata que barre la palabra sobre el rojo de marca:
   es la misma técnica —degradado sobre el texto + resplandor por filtro SVG, sin
   duplicar la palabra— pero leyendo como luz corriendo sobre metal pulido, que es
   lo que vende la empresa.

   La base es --mc-rojo-claro y no --mc-rojo: sobre el negro del header, el rojo de
   marca da 3,97:1 y no llega al 4,5:1 que pide WCAG AA para texto chico (el mismo
   criterio que ya sigue .mc-eyebrow más arriba). El tinte claro da 5,41:1 y la plata
   del reflejo todavía más, así que la palabra nunca baja del mínimo mientras brilla. */
@property --mc-k {
  syntax: "<number>";
  initial-value: -0.4;
  inherits: false;
}

.mc-nav__list a.mc-nav__brillo {
  /* Valor propio además del @property: si el navegador no registra propiedades
     personalizadas, var() igual resuelve y el calc() sigue siendo válido. Sin esto
     la declaración entera se caería y, con el color en transparente, la palabra
     quedaría invisible en vez de simplemente quieta. */
  --mc-k: -0.4;
  position: relative;
  background-image: linear-gradient(
    100deg,
    var(--mc-rojo-claro) calc(var(--mc-k) * 150% - 30%),
    var(--mc-plata) calc(var(--mc-k) * 150%),
    var(--mc-rojo-claro) calc(var(--mc-k) * 150% + 30%)
  );
}

/* El color transparente sólo se aplica si el recorte contra el texto de verdad
   funciona. En un navegador sin background-clip: text, este bloque no entra y el
   enlace se queda con el plata heredado del menú: sin efecto, pero legible. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .mc-nav__list a.mc-nav__brillo {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: url(#mc-brillo-filtro);
    animation: mc-brillo 5s linear infinite;
  }

  /* Al pasar el mouse la palabra se va entera a plata. El hover del menú
     (color: var(--mc-rojo)) no serviría acá: con el color recortado contra el
     texto, cambiarlo no se ve. */
  .mc-nav__list a.mc-nav__brillo:hover,
  .mc-nav__list a.mc-nav__brillo:focus-visible {
    background-image: linear-gradient(100deg, var(--mc-plata), #fff, var(--mc-plata));
    animation-play-state: paused;
  }
}

/* Variante dorada: "Mi Empresa" cuando hay sesión de empresa iniciada.
   Solo cambia los dos colores del degradado — el recorte contra el texto, el filtro de
   resplandor, el barrido y el respeto por prefers-reduced-motion los hereda de
   .mc-nav__brillo, así que las dos palabras del menú se mueven exactamente igual.

   El oro va como propiedad propia de la clase y no en :root: no forma parte de la paleta
   de marca (§2 de la spec), es un acento de estado que existe solo en este enlace.

   #D4AF37 sobre el negro del header da 9,4:1 y el champán del reflejo todavía más, así
   que la palabra se mantiene bien por encima del 4,5:1 de WCAG AA durante todo el ciclo
   —el mismo criterio con el que se eligió el rojo claro de la variante original—. */
.mc-nav__list a.mc-nav__brillo--dorado {
  --mc-oro: #D4AF37;
  --mc-oro-reflejo: #FFF3C4;
  background-image: linear-gradient(
    100deg,
    var(--mc-oro) calc(var(--mc-k) * 150% - 30%),
    var(--mc-oro-reflejo) calc(var(--mc-k) * 150%),
    var(--mc-oro) calc(var(--mc-k) * 150% + 30%)
  );
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .mc-nav__list a.mc-nav__brillo--dorado:hover,
  .mc-nav__list a.mc-nav__brillo--dorado:focus-visible {
    background-image: linear-gradient(100deg, var(--mc-oro-reflejo), #fff, var(--mc-oro-reflejo));
  }
}

@keyframes mc-brillo {
  from { --mc-k: -0.4; }
  to { --mc-k: 1.3; }
}

/* Un brillo que recorre en bucle es exactamente el tipo de movimiento periférico
   que molesta a quien pidió menos animación. Se queda el degradado, se va el barrido. */
@media (prefers-reduced-motion: reduce) {
  .mc-nav__list a.mc-nav__brillo {
    animation: none;
    --mc-k: 0.5;
  }
}

/* El <svg> de los filtros no ocupa lugar, pero sin sacarlo del flujo algunos
   navegadores le dejan una línea de alto entre el body y el header. */
.mc-svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}


/* =========================================================
   Móvil: catálogo en lista doble y filtro en una tira
   ---------------------------------------------------------
   Cómo se veía antes en un teléfono de 375px: la columna de categorías ocupaba
   500px de alto (nueve píldoras apiladas), así que el primer producto arrancaba
   recién a los 840px —fuera de pantalla— y cada tarjeta medía 592px, o sea un
   producto por pantallazo y casi 12.000px de recorrido para ver una categoría.
   Elegir una categoría dejaba al usuario otra vez arriba de la lista de filtros,
   teniendo que bajar a mano hasta los productos.

   Acá se corrigen las dos cosas: el filtro pasa a ser una tira de chips que se
   desliza en horizontal (una línea en vez de una pantalla), y el listado se
   queda en dos columnas en todo el rango móvil con la tarjeta comprimida por
   dentro. Con eso los productos entran en el primer pantallazo apenas se elige
   una categoría, que es lo que se pedía.
   ========================================================= */

/* ---- El filtro de categorías, en una sola línea ----
   Mismo breakpoint en el que .mc-shop-layout deja de tener sidebar (860px): a
   partir de ahí el aside ya no es una columna al costado sino una banda arriba
   del listado, y apilado ahí es donde molesta. */
@media (max-width: 860px) {
  /* El título "Categorías" se va de la vista pero queda en el DOM: el <aside>
     ya tiene aria-label="Filtrar por categoría", así que nada pierde su nombre
     accesible y se recuperan ~30px de alto. */
  .mc-shop-layout__aside h2 {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  /* Apilados, los 2rem de separación entre el filtro y el listado son otro
     escalón de aire justo donde se está peleando cada píxel. */
  .mc-shop-layout { gap: 0.9rem; }
  /* El aside es una celda del grid, y el ancho mínimo automático de una celda es
     el min-content de su contenido: con la tira en una sola línea eso equivale a
     la suma de los nueve chips (~1800px) y estiraba la columna entera, sacando
     la página de cuadro. Con min-width:0 la celda puede encogerse y el desborde
     queda donde tiene que estar, adentro de la tira. */
  .mc-shop-layout__aside { min-width: 0; }
  .mc-shop-layout__cats {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.4rem;
    overflow-x: auto;
    /* Que el gesto horizontal no se "escape" al scroll vertical de la página. */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* La barra de scroll se oculta: en táctil no se usa y en 40px de alto de
       chip se comía un tercio. El desborde se insinúa con el chip cortado. */
    scrollbar-width: none;
    /* La tira se sale del ancho del .mc-container a propósito (2.5rem, el mismo
       margen que aplica el contenedor) para que el primer y el último chip
       lleguen al borde de la pantalla: así se lee como algo deslizable y no
       como una fila que termina antes de tiempo. */
    margin-inline: -1.25rem;
    padding: 0 1.25rem 0.2rem;
  }
  .mc-shop-layout__cats::-webkit-scrollbar { display: none; }
  .mc-shop-layout__cats a {
    /* Sin encoger: cada chip mide lo que dice su texto y la tira desborda. */
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    justify-content: flex-start;
    gap: 0.4rem;
    padding: 0.55em 0.9em;
    font-size: 0.78rem;
    border-radius: 999px;
    /* El filete rojo de la izquierda era la marca de "activa" en la columna
       vertical; en un chip redondeado no tiene dónde apoyarse y se reemplaza
       por el relleno rojo de más abajo. */
    border-left: 0;
  }
  /* En táctil el :hover se queda pegado después del toque, así que el estado
     encendido queda solo para la categoría realmente activa. */
  .mc-shop-layout__cats a:hover { background: var(--mc-plata); box-shadow: none; }
  .mc-shop-layout__cats a.is-active {
    background: var(--mc-rojo);
    color: #fff;
    box-shadow: none;
  }
  /* El contador va en blanco pleno y no atenuado: sobre el rojo de marca un blanco
     al 80% cae a 4,18:1 y no llega al 4,5:1 de WCAG AA, y a 12px eso se nota. La
     jerarquía la sigue dando el tamaño. */
  .mc-shop-layout__cats a.is-active span { color: #fff; }

  /* Variante sobre chapa: el chip vuelve a tener borde parejo (el de la columna
     era de 4px solo a la izquierda) y el activo se rellena con el rojo de marca
     en vez del vidrio aclarado, que a este tamaño no se distinguía del resto. */
  body.mc-metal .mc-shop-layout__cats a { border-left: 1px solid rgba(255, 255, 255, 0.08); }
  body.mc-metal .mc-shop-layout__cats a:hover { background: rgba(23, 25, 28, 0.62); color: var(--mc-plata); }
  body.mc-metal .mc-shop-layout__cats a.is-active {
    background: var(--mc-rojo);
    border-color: var(--mc-rojo);
    color: #fff;
  }
}

/* ---- La tarjeta, comprimida para entrar de a dos ----
   Por debajo de 700px la celda queda en ~160px de ancho: con el relleno y los
   cuerpos de letra de escritorio el título entra de a dos palabras por renglón
   y el selector de cantidad no da. Se achica todo el interior en bloque. */
@media (max-width: 700px) {
  .woocommerce ul.products { gap: 0.7rem; }
  .mc-product-card__body { padding: 0.7rem 0.7rem 0.55rem; }
  /* En pantalla chica la categoría se va: en un listado ya filtrado repite lo mismo
     en todas las tarjetas, y la marca sí distingue una de otra. */
  .mc-product-card__cat { display: none; }

  .mc-product-card__category {
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.3em;
    /* "Aceros, Hierros y Perfiles" ocupaba tres renglones y empujaba el título
       fuera de la tarjeta: a este ancho la categoría se corta. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mc-product-card .woocommerce-loop-product__title { font-size: 0.82rem; margin-bottom: 0.35em; }
  .mc-product-card__price { font-size: 0.88rem; line-height: 1.35; }
  /* El precio tachado y el rebajado no entran juntos en un renglón de 145px, y
     partidos por la mitad se leen como un solo número raro: el viejo pasa a su
     propia línea, arriba. */
  .mc-product-card__price del { display: block; margin-right: 0; font-size: 0.8em; }
  .mc-product-card__actions { padding: 0 0.7rem 0.75rem; gap: 0.45rem; }
  /* Los botones del contador se achican con el resto de la tarjeta, pero no por
     debajo de los 24px de lado que pide el criterio de tamaño de destino de
     WCAG: en pantalla táctil un −/+ de 28px ya se falla seguido. */
  .mc-product-card__qty input.qty { width: 2.1rem; font-size: 0.82rem; padding: 0.55em 0.1em; }
  .mc-qty__btn { width: 2.1rem; font-size: 0.95rem; }
  .mc-product-card__actions .add_to_cart_button { padding: 0.6em 0.5em; font-size: 0.78rem; }
  /* El badge de oferta estaba calibrado para una foto de 300px; sobre una de 160
     tapaba media imagen. */
  .woocommerce span.onsale { font-size: 0.6rem; padding: 0.35em 0.7em; }
  .woocommerce ul.products li.product .mc-product-card__image-wrap span.onsale { top: 0.5rem; left: 0.5rem; }

  /* Contador de resultados y selector de orden: son los últimos ~90px que se
     interponen entre el filtro y los productos. Se comprimen sin sacarlos. */
  .woocommerce-result-count { font-size: 0.78rem; margin-bottom: 0.35rem; }
  .woocommerce-ordering { margin: 0 0 1rem; }
  .woocommerce-ordering select.orderby { width: 100%; font-size: 0.8rem; padding: 0.5em 2.2em 0.5em 0.8em; }
}


/* ---------- Mi Cuenta con sesión iniciada (body.mc-cuenta) ----------
   El área de cuenta era la única sección del sitio que quedaba en el WooCommerce de
   fábrica: tabla blanca, enlaces azules y formularios sin estilo, cortada con el resto.
   Acá se viste con la misma pieza que Presupuestos y el alta de empresa —lienzo de
   chapa, tarjetas de vidrio oscuro, campos sobre vidrio— reusando las variables y
   utilidades que ya existen arriba, sin redeclarar :root ni duplicar la paleta.

   El envoltorio (mc-glass-stage + las dos tarjetas) lo arma
   woocommerce/myaccount/my-account.php; lo de acá viste lo que WooCommerce imprime
   adentro, que no se puede tocar sin sobrescribir media docena de plantillas más. */

/* Menú lateral y contenido.
   `fit-content(380px)` hace que la columna del menú se mida por su contenido —o sea,
   por la razón social, que es lo más ancho que lleva— pero sin pasar de 380px. Una
   empresa de nombre corto deja más lugar para los pedidos; una de nombre largo se
   queda con lo que necesita y ahí frena. El min-width de la tarjeta le pone el piso:
   con un nombre de cinco letras el menú igual tiene que entrar cómodo. */
.mc-cuenta__grid {
  grid-template-columns: clamp(268px, 30%, 400px) minmax(0, 1fr);
  align-items: start;
}

/* La tarjeta es un contenedor de consulta: así el título puede medirse contra el ancho
   REAL de su caja con unidades cqi.
   Se probó antes la variante en la que la columna crecía con el nombre
   (`fit-content`) y el resultado es circular: el ancho de la tarjeta depende del texto,
   el cuerpo de letra depende del ancho, y el navegador resuelve uno de los dos con un
   valor viejo. En pantallas de ~950px eso terminaba recortando nombres de 24 caracteres.
   Con la columna resuelta primero, la letra siempre entra exacta. */
.mc-cuenta__card--nav { container-type: inline-size; }

/* La razón social nunca parte en dos líneas ni se recorta.
   El cuerpo de letra es "el ancho de la tarjeta dividido por lo que ocupa el nombre":
   100cqi es el ancho real de la caja, --mc-razon-chars la cantidad de caracteres (la
   deja la plantilla) y 0.475 el ancho medio de un caracter en emes. Ese numero NO es
   la medicion pura: Saira Condensed promedia 0.36 sobre razones sociales reales, y se
   le suma el mismo 32% de resguardo que tenia la version anterior (0.6 sobre los 0.455
   de Montserrat), porque un nombre con muchas mayusculas supera el promedio. Si se
   vuelve a cambiar la tipografia, hay que recalibrar este numero. Un
   nombre corto toma el máximo de 1.45rem; uno largo achica lo justo para entrar.
   Como la cuenta se hace contra la caja real, vale igual en un monitor que en un
   teléfono, sin media queries ni números calibrados a mano.

   Los puntos suspensivos son la última red, para un nombre disparatadamente largo que
   ni al piso de 0.62rem entre; en ese caso el nombre completo queda en el title. */
.mc-cuenta__razon {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.2rem; /* Reserva para navegadores sin unidades de contenedor. */
  font-size: clamp(0.62rem, calc(100cqi / (var(--mc-razon-chars, 22) * 0.475)), 1.45rem);
  line-height: 1.25;
}
body.mc-cuenta .mc-rule { margin: 0.6em 0 1.1em; }

/* WooCommerce arma esta pantalla con floats y porcentajes propios
   (.woocommerce-MyAccount-navigation al 30% y -content al 68%). Metidos cada uno en
   su tarjeta, esos porcentajes se calculan contra la tarjeta y no contra la página:
   el menú quedaba en 58px —una columna de letras cortadas— y el contenido en 533px
   dentro de una caja de 850. La grilla ya reparte el ancho, así que se desarma. */
body.mc-cuenta .woocommerce-MyAccount-navigation,
body.mc-cuenta .woocommerce-MyAccount-content {
  float: none;
  width: auto;
}

/* La cabecera de página ya la repite la tarjeta con la razón social. */
body.mc-cuenta .mc-page-header { display: none; }

/* ---- Navegación de la cuenta ---- */
body.mc-cuenta .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
body.mc-cuenta .woocommerce-MyAccount-navigation-link a {
  display: block;
  padding: 0.62em 0.9em;
  border-radius: 8px;
  border-left: 3px solid transparent;
  color: var(--mc-plata);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--mc-glass-dur) var(--mc-glass-ease),
              border-color var(--mc-glass-dur),
              color var(--mc-glass-dur);
}
body.mc-cuenta .woocommerce-MyAccount-navigation-link a:hover,
body.mc-cuenta .woocommerce-MyAccount-navigation-link a:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--mc-blanco);
}
body.mc-cuenta .woocommerce-MyAccount-navigation-link.is-active a {
  background: rgba(229, 9, 20, 0.16);
  border-left-color: var(--mc-rojo);
  color: var(--mc-blanco);
}
/* Cerrar sesión no es una sección más: se despega del grupo y baja el peso visual. */
body.mc-cuenta .woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--mc-glass-border);
}
body.mc-cuenta .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--mc-gris-claro); }

/* ---- Contenido ---- */
body.mc-cuenta .woocommerce-MyAccount-content { color: var(--mc-plata); }
body.mc-cuenta .woocommerce-MyAccount-content h2,
body.mc-cuenta .woocommerce-MyAccount-content h3,
body.mc-cuenta .woocommerce-MyAccount-content legend { color: var(--mc-blanco); }
body.mc-cuenta .woocommerce-MyAccount-content h2 { font-size: 1.25rem; margin: 0 0 0.6em; }
body.mc-cuenta .woocommerce-MyAccount-content h3 { font-size: 1.05rem; margin: 1.4em 0 0.5em; }
body.mc-cuenta .woocommerce-MyAccount-content p { line-height: 1.6; }
body.mc-cuenta .woocommerce-MyAccount-content a:not(.button):not(.mc-btn) {
  color: var(--mc-blanco);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.mc-cuenta .woocommerce-MyAccount-content mark,
body.mc-cuenta .woocommerce-MyAccount-content strong { color: var(--mc-blanco); background: none; }

/* Direcciones: las dos columnas de facturación y envío.
   Mismo par de trampas que ya tenía el alta de empresa (ver .mc-alta__grid arriba):
   1) el contenedor es también un .col2-set, y `.woocommerce .col2-set .col-1` (0,3,0)
      le gana a `body.mc-cuenta .woocommerce-Address` (0,2,1), así que las columnas
      seguían flotando al 48% y quedaban en 119px;
   2) WooCommerce le pone un clearfix con ::before/::after, y en un contenedor grid
      esos pseudoelementos cuentan como ítems — la grilla salía de tres columnas. */
body.mc-cuenta .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
}
body.mc-cuenta .woocommerce .col2-set.woocommerce-Addresses > .col-1,
body.mc-cuenta .woocommerce .col2-set.woocommerce-Addresses > .col-2 {
  float: none;
  width: auto;
  margin: 0;
}
body.mc-cuenta .woocommerce-Addresses::before,
body.mc-cuenta .woocommerce-Addresses::after { content: none; display: none; }
body.mc-cuenta .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
body.mc-cuenta .woocommerce-Address address { font-style: normal; line-height: 1.7; color: var(--mc-gris-claro); }

/* ---- Tablas: pedidos, descargas, detalle de pedido ----
   WooCommerce las imprime con su propio shop_table; sobre vidrio oscuro había que
   sacarles el fondo blanco y los bordes grises, no reescribir la plantilla. */
body.mc-cuenta .woocommerce table.shop_table,
body.mc-cuenta table.woocommerce-orders-table,
body.mc-cuenta table.woocommerce-MyAccount-orders {
  background: transparent;
  border: 1px solid var(--mc-glass-border);
  border-radius: 10px;
  border-collapse: collapse;
  width: 100%;
  color: var(--mc-plata);
}
body.mc-cuenta .woocommerce-MyAccount-content table th,
body.mc-cuenta .woocommerce-MyAccount-content table td {
  border: 0;
  border-bottom: 1px solid var(--mc-glass-border);
  padding: 0.8em 0.9em;
  text-align: left;
  font-size: 0.88rem;
}
body.mc-cuenta .woocommerce-MyAccount-content table th {
  color: var(--mc-blanco);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.05);
}
body.mc-cuenta .woocommerce-MyAccount-content table tr:last-child td { border-bottom: 0; }
body.mc-cuenta .woocommerce-MyAccount-content table tbody tr:hover td { background: rgba(255, 255, 255, 0.04); }

/* ---- Formularios: editar cuenta, editar dirección ----
   Las filas de WooCommerce no traen .mc-field, así que se les da el mismo tratamiento
   que a los campos sobre vidrio del alta. */
body.mc-cuenta .woocommerce-MyAccount-content .form-row { margin: 0 0 1.05rem; padding: 0; display: block; }
body.mc-cuenta .woocommerce-MyAccount-content label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--mc-plata);
  margin-bottom: 0.4em;
}
body.mc-cuenta .woocommerce-MyAccount-content input:not([type=checkbox]):not([type=radio]):not([type=submit]),
body.mc-cuenta .woocommerce-MyAccount-content select,
body.mc-cuenta .woocommerce-MyAccount-content textarea {
  width: 100%;
  background: rgba(10, 10, 10, 0.45);
  border: 1px solid var(--mc-glass-border-bright);
  border-radius: 8px;
  color: var(--mc-blanco);
  padding: 0.72em 0.9em;
  font-family: var(--mc-font);
  font-size: 0.92rem;
}
body.mc-cuenta .woocommerce-MyAccount-content input::placeholder,
body.mc-cuenta .woocommerce-MyAccount-content textarea::placeholder { color: rgba(158, 163, 168, 0.75); }
body.mc-cuenta .woocommerce-MyAccount-content input:focus,
body.mc-cuenta .woocommerce-MyAccount-content select:focus,
body.mc-cuenta .woocommerce-MyAccount-content textarea:focus {
  outline: none;
  border-color: var(--mc-rojo);
  box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.22);
}
body.mc-cuenta .woocommerce-MyAccount-content fieldset {
  border: 1px solid var(--mc-glass-border);
  border-radius: 10px;
  padding: 1.1rem 1.2rem 0.4rem;
  margin: 1.6rem 0 1.2rem;
}
body.mc-cuenta .woocommerce-MyAccount-content fieldset legend { padding: 0 0.5em; font-size: 0.95rem; font-weight: 700; }
body.mc-cuenta .woocommerce-MyAccount-content em,
body.mc-cuenta .woocommerce-MyAccount-content span.description { color: var(--mc-gris-claro); font-size: 0.8rem; }
body.mc-cuenta .woocommerce-MyAccount-content .required { color: var(--mc-rojo); }

/* ---- Botones ---- */
body.mc-cuenta .woocommerce-MyAccount-content .button,
body.mc-cuenta .woocommerce-MyAccount-content button[type=submit],
body.mc-cuenta .woocommerce-MyAccount-content input[type=submit] {
  display: inline-block;
  background: var(--mc-rojo);
  border: 1px solid var(--mc-rojo);
  color: var(--mc-blanco);
  font-family: var(--mc-font);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.7em 1.4em;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  width: auto;
  transition: background var(--mc-glass-dur) var(--mc-glass-ease),
              transform var(--mc-glass-dur) var(--mc-glass-ease);
}
body.mc-cuenta .woocommerce-MyAccount-content .button:hover,
body.mc-cuenta .woocommerce-MyAccount-content button[type=submit]:hover,
body.mc-cuenta .woocommerce-MyAccount-content input[type=submit]:hover {
  background: var(--mc-rojo-oscuro);
  border-color: var(--mc-rojo-oscuro);
  transform: translateY(-1px);
}
/* Los botones dentro de la tabla de pedidos son secundarios: no compiten con la
   acción principal de la pantalla. */
body.mc-cuenta .woocommerce-MyAccount-content table .button {
  background: transparent;
  border-color: var(--mc-glass-border-bright);
  font-size: 0.78rem;
  padding: 0.45em 0.9em;
}
body.mc-cuenta .woocommerce-MyAccount-content table .button:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--mc-plata);
}

/* ---- Avisos de WooCommerce dentro de la cuenta ----
   El core les pone fondo gris claro y texto oscuro, ilegible sobre el vidrio. */
body.mc-cuenta .woocommerce-message,
body.mc-cuenta .woocommerce-info,
body.mc-cuenta .woocommerce-error {
  background: rgba(10, 10, 10, 0.55);
  border-top: 0;
  border-left: 4px solid var(--mc-rojo);
  border-radius: 8px;
  color: var(--mc-plata);
  padding: 0.9em 1.1em;
  list-style: none;
}
body.mc-cuenta .woocommerce-message::before,
body.mc-cuenta .woocommerce-info::before,
body.mc-cuenta .woocommerce-error::before { content: none; }
body.mc-cuenta .woocommerce-message { border-left-color: #2e7d32; }
body.mc-cuenta .mc-notice { color: var(--mc-blanco); background: rgba(10, 10, 10, 0.55); }
body.mc-cuenta .mc-notice a { color: var(--mc-blanco); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  /* Una sola columna: el tamaño del título se sigue resolviendo solo, contra la caja
     nueva, sin regla aparte — de eso se encarga el 100cqi de .mc-cuenta__razon. */
  .mc-cuenta__grid { grid-template-columns: minmax(0, 1fr); }
  /* En una sola columna el menú vertical se come la pantalla antes del contenido:
     se acuesta en fila y scrollea de costado. */
  body.mc-cuenta .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.35rem;
    padding-bottom: 0.3rem;
  }
  body.mc-cuenta .woocommerce-MyAccount-navigation-link a {
    white-space: nowrap;
    border-left: 0;
    border-bottom: 3px solid transparent;
    border-radius: 6px;
  }
  body.mc-cuenta .woocommerce-MyAccount-navigation-link.is-active a {
    border-left: 0;
    border-bottom-color: var(--mc-rojo);
  }
  body.mc-cuenta .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    border-left: 1px solid var(--mc-glass-border);
    padding-left: 0.5rem;
    margin-left: 0.25rem;
  }
}

@media (max-width: 600px) {
  /* Las tablas de pedidos no entran: scrollean adentro de su caja en vez de
     desbordar la página. */
  body.mc-cuenta .woocommerce-MyAccount-content table { display: block; overflow-x: auto; }
}


/* ---------- Página no encontrada (404.php) ----------
   Una sola tarjeta centrada sobre el lienzo, con el buscador adentro: el 404 se llega
   por un enlace roto o una medida mal tipeada, así que la salida útil es buscar. */
.mc-404__grid {
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
}
.mc-404__buscador { margin: 1.2rem 0 0.4rem; }
/* La barra del buscador trae su propio fondo grafito a ancho completo pensado para ir
   pegada al header; adentro de la tarjeta tiene que comportarse como un campo más. */
.mc-404__buscador .mc-search { background: transparent; padding: 0; }
/* La fila de la barra es además un .mc-container, que se reserva 2.5rem de aire a los
   costados para despegarse del borde de la ventana. Adentro de la tarjeta ese aire ya lo
   pone la tarjeta: sin anular el ancho, se perdían 40px que en un teléfono salían del
   campo de texto. */
.mc-404__buscador .mc-search__row { padding: 0; width: 100%; max-width: none; }
/* La barra grande lleva cuatro herramientas al lado del campo (borrar, código, voz,
   foto). Con el ancho de la página sobra lugar; metida en la tarjeta no: medido en un
   teléfono de 375px el campo quedaba en 29px y el botón "Buscar" en cero. Acá el 404
   necesita una sola cosa —escribir y buscar—, así que las auxiliares se ocultan y el
   campo se queda con todo el espacio libre. */
.mc-404__buscador .mc-search__tool { display: none; }
.mc-404__buscador .mc-search__form { flex-wrap: nowrap; }
.mc-404__buscador .mc-search__input { flex: 1 1 auto; min-width: 0; }
.mc-404__buscador .mc-search__submit { flex: 0 0 auto; }

@media (max-width: 860px) {
  /* En la barra fija el botón "Buscar" se oculta en teléfonos para no comerse el ancho
     —el teclado ya trae su tecla de búsqueda—. Acá no hay barra que ahorrar y el 404 sí
     necesita una acción visible: sin el botón queda un campo suelto sin nada que apretar.
     Especificidad (0,2,0) contra la (0,1,0) del display:none de search.css. */
  .mc-404__buscador .mc-search__submit { display: block; }
}
.mc-404__salidas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.2rem;
}
.mc-404__ayuda {
  margin: 1.1rem 0 0;
  font-size: 0.82rem;
  color: var(--mc-gris-claro);
}
.mc-404__ayuda a { color: var(--mc-blanco); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Desplegable de ordenamiento (assets/js/orderby.js) ----------
   El <select> nativo queda en el DOM y sigue funcionando sin JS; cuando el script
   corre, se oculta y este combobox lo reemplaza. La lista del select nativo la dibuja
   el sistema operativo —resaltado azul incluido— y no hay forma de estilarla: por eso
   la lista es propia. */
.mc-orderby { position: relative; display: inline-block; text-align: left; }
.mc-orderby__nativo {
  /* Fuera de la vista pero presente: si el JS falla a mitad de camino, el formulario
     sigue teniendo su campo y el orden se puede cambiar igual. */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mc-orderby__boton {
  display: inline-flex; align-items: center; gap: 0.9em;
  min-width: 13.5rem; padding: 0.65em 1em;
  border: 1px solid var(--mc-plata); border-radius: 6px; background: #fff;
  font-family: var(--mc-font); font-size: 0.86rem; font-weight: 600;
  color: var(--mc-negro); cursor: pointer; text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mc-orderby__valor { flex: 1; }
.mc-orderby__flecha {
  width: 10px; height: 10px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.mc-orderby.is-open .mc-orderby__flecha { transform: rotate(-135deg) translate(-2px, -2px); }
.mc-orderby__boton:hover { border-color: var(--mc-gris-claro); }
.mc-orderby__boton:focus-visible { outline: 2px solid var(--mc-rojo); outline-offset: 1px; }

.mc-orderby__lista {
  position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; min-width: 100%;
  margin: 0; padding: 0.35rem; list-style: none;
  background: #fff; border: 1px solid var(--mc-plata); border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
  max-height: 17rem; overflow-y: auto;
}
.mc-orderby__opcion {
  position: relative; padding: 0.6em 0.9em 0.6em 1.5em; border-radius: 5px;
  font-size: 0.85rem; font-weight: 500; color: var(--mc-negro);
  cursor: pointer; white-space: nowrap;
}
.mc-orderby__opcion.is-active { background: rgba(0, 0, 0, .05); }
.mc-orderby__opcion.is-selected { font-weight: 700; color: var(--mc-rojo); }
/* Marca del elegido: una barra, no un tilde. Ocupa menos y no compite con el texto. */
.mc-orderby__opcion.is-selected::before {
  content: ""; position: absolute; left: 0.5em; top: 50%; transform: translateY(-50%);
  width: 3px; height: 1.05em; border-radius: 2px; background: var(--mc-rojo);
}

/* Tienda en oscuro: mismo vidrio que usan la paginación y las tarjetas. */
body.mc-metal .mc-orderby__boton {
  background: rgba(23, 25, 28, .85); border-color: var(--mc-acero); color: var(--mc-plata);
  backdrop-filter: var(--mc-glass-blur); -webkit-backdrop-filter: var(--mc-glass-blur);
}
body.mc-metal .mc-orderby__boton:hover { border-color: var(--mc-gris-claro); }
body.mc-metal .mc-orderby__lista {
  background: rgba(18, 20, 23, .96); border-color: var(--mc-acero);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  backdrop-filter: var(--mc-glass-blur); -webkit-backdrop-filter: var(--mc-glass-blur);
}
body.mc-metal .mc-orderby__opcion { color: var(--mc-plata); }
body.mc-metal .mc-orderby__opcion.is-active { background: rgba(255, 255, 255, .07); }
body.mc-metal .mc-orderby__opcion.is-selected { color: #fff; }

@media (max-width: 700px) {
  .mc-orderby, .mc-orderby__boton { width: 100%; }
  .mc-orderby__boton { font-size: 0.8rem; padding: 0.55em 0.85em; }
  .mc-orderby__lista { left: 0; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-orderby__flecha, .mc-orderby__boton { transition: none; }
}

/* ---------- Estado vacío de una sección (page-ofertas.php) ----------
   Ocupa el lugar que ocuparía la grilla, en vez de dejar una franja de aviso fina
   flotando en una sección dimensionada para cuatro tarjetas. La diferencia entre
   "no hay nada hoy" y "el sitio está roto" es que el hueco esté compuesto. */
.mc-vacio {
  margin-top: 2rem;
  padding: 3.2rem 2rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border: 1px dashed var(--mc-acero, #3A4148); border-radius: var(--mc-radius-lg, 12px);
  background: rgba(23, 25, 28, .5);
  backdrop-filter: var(--mc-glass-blur); -webkit-backdrop-filter: var(--mc-glass-blur);
}
.mc-vacio__icono {
  display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 1.1rem;
  border-radius: 50%; background: rgba(229, 9, 20, .1); color: var(--mc-rojo);
}
.mc-vacio__icono svg { width: 28px; height: 28px; }
.mc-vacio__titulo {
  margin: 0 0 .6rem; font-size: clamp(1.1rem, 2.2vw, 1.4rem); color: #fff; font-weight: 700;
}
.mc-vacio__texto {
  margin: 0; max-width: 46ch; color: var(--mc-gris-claro); font-size: .93rem; line-height: 1.6;
}
.mc-vacio__acciones {
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.6rem;
}

/* Quien decide claro u oscuro es el body, no la sección: en este sitio todas las
   páginas internas llevan .mc-metal y una .mc-section sin modificador igual va sobre
   fondo negro. Mirando la sección, el panel salía blanco con el texto en gris claro
   encima, o sea ilegible. */
body:not(.mc-metal) .mc-vacio {
  background: rgba(255, 255, 255, .6); border-color: var(--mc-plata);
}
body:not(.mc-metal) .mc-vacio__titulo { color: var(--mc-negro); }
body:not(.mc-metal) .mc-vacio__texto  { color: var(--mc-gris, #5A6068); }

@media (max-width: 560px) {
  .mc-vacio { padding: 2.2rem 1.2rem; }
  .mc-vacio__acciones { flex-direction: column; align-self: stretch; }
  .mc-vacio__acciones .mc-btn { width: 100%; }
}

/* ---------- Forma de entrega: retiro en sucursal o envío a coordinar ----------
   Dos lugares, un mismo patrón visual: el carrito la pregunta junto a la forma de pago
   y el checkout la repite arriba de los medios de pago, ya marcada con lo que vino del
   carrito. Las dos usan la misma tarjetita que .payment_methods li, para que el cliente
   reconozca que está eligiendo lo mismo en las dos pantallas. */

/* --- En el carrito, dentro de la tarjeta oscura de totales --- */
body.mc-cart .mc-cart-payment__form { margin: 0; }
/* El título de pago respira sobre el bloque de entrega, que queda justo arriba. */
body.mc-cart .mc-cart-payment__form h3 { margin-top: 0; }
body.mc-cart .mc-cart-entrega + h3 { margin-top: 1.2rem !important; }
body.mc-cart .mc-cart-entrega {
  border: 0;
  padding: 0;
  margin: 0 0 1.1rem;
}
body.mc-cart .mc-cart-entrega__titulo {
  padding: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-gris-claro);
  margin: 0 0 0.7em;
}
body.mc-cart .mc-cart-entrega__opcion {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 0.7em 0.85em;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: border-color 180ms, background 180ms;
}
body.mc-cart .mc-cart-entrega__opcion:last-child { margin-bottom: 0; }
body.mc-cart .mc-cart-entrega__opcion:hover { border-color: rgba(255, 255, 255, 0.24); }
/* :has() marca la tarjeta entera, no sólo el radio: el área clicable es toda la fila. */
body.mc-cart .mc-cart-entrega__opcion:has(input:checked) {
  border-color: rgba(229, 9, 20, 0.55);
  background: rgba(229, 9, 20, 0.10);
}
body.mc-cart .mc-cart-entrega__opcion input[type="radio"] {
  accent-color: var(--mc-rojo);
  margin: 0.2em 0 0;
  flex: 0 0 auto;
}
body.mc-cart .mc-cart-entrega__texto { display: block; }
body.mc-cart .mc-cart-entrega__etiqueta {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--mc-blanco);
}
body.mc-cart .mc-cart-entrega__detalle {
  display: block;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--mc-gris-claro);
  margin-top: 0.15em;
}

/* --- En el checkout, arriba de los medios de pago --- */
body.mc-checkout .mc-entrega {
  padding: 1.3rem 0 0;
  margin: 1.3rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* Lo esconde checkout.js cuando la forma de pago elegida no necesita la pregunta (pagar
   en el mostrador implica retirar). Va por atributo y no por clase para que el estado
   sobreviva a los refrescos del resumen que hace WooCommerce en cada cambio de campo. */
body.mc-checkout .mc-entrega[hidden] { display: none; }
body.mc-checkout .mc-entrega__titulo {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-gris-claro);
  margin: 0 0 0.7em;
}
body.mc-checkout .mc-entrega__opciones {
  display: grid;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
body.mc-checkout .mc-entrega__opcion { margin: 0; }
body.mc-checkout .mc-entrega__opcion label {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.15em 0.6em;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 0.75em 0.9em;
  margin: 0;
  cursor: pointer;
  transition: border-color 180ms, background 180ms;
}
body.mc-checkout .mc-entrega__opcion label:hover { border-color: rgba(255, 255, 255, 0.24); }
body.mc-checkout .mc-entrega__opcion label:has(input:checked) {
  border-color: rgba(229, 9, 20, 0.55);
  background: rgba(229, 9, 20, 0.10);
}
body.mc-checkout .mc-entrega__opcion input[type="radio"] {
  accent-color: var(--mc-rojo);
  margin: 0.2em 0 0;
  flex: 0 0 auto;
}
body.mc-checkout .mc-entrega__etiqueta {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--mc-blanco);
}
/* El detalle arranca en un renglón propio, alineado con la etiqueta y no con el radio. */
body.mc-checkout .mc-entrega__detalle {
  flex: 1 0 100%;
  padding-left: calc(13px + 0.6em);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--mc-gris-claro);
}

/* --- En "pedido recibido": la leyenda del transportista --- */
.mc-recibido__leyenda {
  margin: 0.9rem 0 0;
  padding: 0.7em 0.9em;
  border-left: 3px solid var(--mc-rojo);
  background: rgba(229, 9, 20, 0.08);
  border-radius: 0 8px 8px 0;
  font-size: 0.8rem;
  line-height: 1.5;
}

/* ============================================================================
   Checkout API de Mercado Pago (pago con tarjeta sin salir del sitio)
   ----------------------------------------------------------------------------
   El formulario lo inyecta el plugin y viene en blanco, sin bordes y sin radio:
   dentro de un checkout oscuro parece un recorte pegado encima.

   No se puede oscurecer. Los tres campos sensibles —numero, vencimiento y codigo
   de seguridad— son iframes servidos por secure-fields.mercadopago.com, y el CSS
   de este sitio no cruza esa frontera; es justamente lo que hace que los datos de
   la tarjeta nunca pasen por nuestro servidor. Encima el JS del plugin reescribe
   `background: #fff !important` sobre el campo de la tarjeta cada vez que limpia
   el formulario, asi que cualquier intento de pintarlo se deshace solo.

   Entonces no se pelea: se lo trata como lo que es, un modulo de pago ajeno, y se
   lo enmarca para que se lea deliberado. Radio y separacion iguales a las demas
   cajas del checkout, y un filete rojo arriba que lo ata a la marca.
   ========================================================================== */

/*
 * El selector lleva el #id y el !important a proposito: el plugin declara
 * `#mp-checkout-custom-root .mp-checkout-custom-container { padding: ... !important }`
 * y sin igualar esa especificidad el relleno de 40px de abajo no se puede corregir.
 * Se antepone `body` porque empatar no alcanza: con la misma especificidad gana la
 * hoja que carga ultima, y la del plugin va despues de la del tema.
 */
body #mp-checkout-custom-root .mp-checkout-custom-container,
body .payment_method_woo-mercado-pago-custom .mp-checkout-custom-container {
	border-radius: 10px !important;      /* mismo radio que las cajas del checkout */
	overflow: hidden;
	margin: 0.9rem 0 0.2rem !important;
	padding: 1.15rem 1.25rem 1.35rem !important;
	box-shadow: 0 6px 20px rgb(0 0 0 / 35%);
	border-top: 3px solid var(--mc-rojo) !important;
}

/* El texto de ayuda del plugin es gris claro sobre blanco: no se lee. */
.payment_method_woo-mercado-pago-custom .mp-checkout-custom-container .mp-input-label,
.payment_method_woo-mercado-pago-custom .mp-checkout-custom-container label {
	color: #1a1a1a;
}

.payment_method_woo-mercado-pago-custom .mp-checkout-custom-container .mp-helper,
.payment_method_woo-mercado-pago-custom .mp-checkout-custom-container small {
	color: #5b6167;
}

/*
 * La descripcion de la pasarela va sobre el fondo oscuro, fuera del panel blanco,
 * asi que sigue las reglas del tema y no las del plugin.
 */
.payment_method_woo-mercado-pago-custom > .payment_box {
	background: transparent;
	padding: 0;
}

.payment_method_woo-mercado-pago-custom > .payment_box > p:first-child {
	color: var(--mc-gris-claro);
	font-size: 0.86rem;
	line-height: 1.5;
	margin: 0.35rem 0 0;
}

/*
 * El selector de cuotas lo dibuja el plugin como un <select> propio. Se lo alinea
 * con los inputs del panel y no con los del tema: vive adentro del bloque blanco.
 */
.payment_method_woo-mercado-pago-custom .mp-checkout-custom-container select {
	border-radius: 6px;
	min-height: 42px;
}

/*
 * En el celular el panel queda en unos 240px de ancho util —el tema ya viene con
 * varios niveles de padding anidados— asi que cada milimetro lateral cuenta para
 * que el numero de tarjeta entre comodo. Mismo truco de especificidad que arriba.
 */
@media (max-width: 480px) {
	body #mp-checkout-custom-root .mp-checkout-custom-container,
	body .payment_method_woo-mercado-pago-custom .mp-checkout-custom-container {
		padding: 1rem 0.85rem 1.1rem !important;
	}
}

/*
 * Aviso de factura A bajo la opcion de transferencia. Va destacado y no como un
 * parrafo mas: quien compra para una empresa tiene que verlo ANTES de pagar,
 * porque despues la factura hay que pedirla por correo y alguien se tiene que
 * acordar. Mismo lenguaje visual que el bloque de entrega.
 */
.mc-aviso-factura {
	margin: 0.6rem 0 0;
	padding: 0.6rem 0.75rem;
	border-left: 3px solid var(--mc-rojo);
	background: rgb(255 255 255 / 5%);
	border-radius: 0 8px 8px 0;
	color: var(--mc-plata);
	font-size: 0.82rem;
	line-height: 1.5;
}

/* ---------- Formas de pago del carrito ----------
   Mismas medidas que .mc-cart-entrega__opcion, que esta justo arriba: mismo
   fondo, mismo borde, mismo radio y misma tipografia. Las dos preguntas del
   carrito —como lo recibis y como pagas— tienen que leerse como una sola lista.

   Son <button> y no radios: cada uno envia el formulario con su propio valor de
   mc_pago, sin JavaScript. Por eso hay que resetear la apariencia nativa del
   boton antes de vestirlo. */
.mc-cart-payment__options {
  display: grid;
  gap: 0.5rem;
}
.mc-pago-opcion {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 0.7em 0.85em;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.mc-pago-opcion:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
}
/* El foco visible es el unico momento en que aparece el rojo: marca donde esta
   parado el teclado, no recomienda una opcion sobre otra. */
.mc-pago-opcion:focus-visible {
  outline: 2px solid var(--mc-rojo);
  outline-offset: 2px;
}
.mc-pago-opcion__etiqueta {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--mc-negro);
}
.mc-pago-opcion__detalle {
  display: block;
  font-size: 0.74rem;
  line-height: 1.45;
  color: #4b5157;
  margin-top: 0.15em;
}

/* Sobre la chapa oscura, que es donde vive el carrito. */
body.mc-metal .mc-pago-opcion__etiqueta { color: var(--mc-blanco); }
body.mc-metal .mc-pago-opcion__detalle { color: var(--mc-gris-claro); }