/* ============================================================================
   velvet-2026.css — Capa de restyling 2026
   ----------------------------------------------------------------------------
   Se carga DESPUÉS de style.css. No lo reemplaza ni lo modifica.

   REGLA DE ESTA CAPA (sub-fase 1.1):
   Ninguna regla de este archivo puede aplicar sobre markup existente del sitio.
   Todo vive bajo el prefijo `.v-` / `[data-v-*]`, que no existe en ningún
   template ni en style.css (verificado). Por eso, al cargar este archivo el
   sitio se ve exactamente igual que antes.

   Consecuencia deliberada: NO hay reset global. Un `* { box-sizing }` o un
   `body { font-family }` aplicarían sobre markup existente y romperían la
   regla. Cada componente `.v-` declara lo que necesita. El reset global de
   style.css (líneas 1-7) ya establece `box-sizing: border-box` para todo.

   Las @font-face declaran las familias pero NO las aplican a ningún selector:
   el navegador no descarga un woff2 que ninguna regla usa. El costo real de
   las fuentes empieza en la 1.2, cuando el header las use.

   Orden: 1. Fuentes · 2. Tokens · 3. Utilidades · 4. Componentes ·
          5. Movimiento · 6. Responsive · 7. Accesibilidad
   ============================================================================ */


/* ── 1. Fuentes ────────────────────────────────────────────────────────────
   Autoalojadas en resources/themes/default/font/velvet/.
   Un único woff2 variable por familia cubre todos los pesos que usamos
   (Fraunces 300-400, Jost 300-500). Subset latin: cubre U+0000-00FF, o sea
   todos los acentos del español, la ñ y los signos de apertura.
   Razonamiento de la decisión en doc/rediseño/INFORME-1.1-FUNDACIONES.md      */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  /* El eje wght del archivo va de 100 a 900. Declarar un rango más corto que
     el real hace que el navegador SINTETICE los pesos que quedan afuera
     (faux bold): engorda los trazos deformándolos, y se ve como texto
     borroso. Verificado con fontTools sobre el woff2. */
  font-weight: 100 900;
  font-display: swap;
  src: url('../font/velvet/fraunces-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;                 /* rango real del eje wght */
  font-display: swap;
  src: url('../font/velvet/jost-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ── 2. Tokens ─────────────────────────────────────────────────────────────
   Brief §4. Definir custom properties en :root no aplica ningún estilo:
   solo quedan disponibles para quien las use.
   Ningún componente de esta capa puede usar un color fuera de acá.           */

:root {
  /* Color */
  --v-ink:    #14110F;                  /* negro cálido — texto y fondos oscuros */
  --v-paper:  #FFFFFF;
  --v-bone:   #F4F1ED;                  /* fondo de la caja de producto */
  --v-sand:   #E9E3DA;                  /* hover de la caja de producto */
  --v-brass:  #B79A62;                  /* dorado de marca — acentos, cuotas, eyebrows */
  --v-slate:  #6E6A64;                  /* texto secundario */
  --v-line:   rgba(20, 17, 15, .10);

  /* Derivados — siempre a partir de los de arriba, nunca hex nuevos */
  --v-ink-hover:   #2B2521;
  --v-ink-90:      rgba(20, 17, 15, .90);
  --v-ink-60:      rgba(20, 17, 15, .60);
  --v-paper-90:    rgba(255, 255, 255, .90);
  --v-paper-45:    rgba(255, 255, 255, .45);
  --v-paper-18:    rgba(255, 255, 255, .18);
  --v-on-dark:     rgba(255, 255, 255, .78);
  --v-brass-soft:  #DCC79A;             /* eyebrow sobre fondo oscuro */

  /* Contraste de texto — grises cálidos OPACOS de la familia de --v-slate.
     Opacos a propósito: los navegadores no dejan que el canal alfa participe
     del estilo :visited (filtraría el historial) y lo fuerzan a opaco, así que
     un color con alpha en un <a> no se pinta como está declarado en ese
     estado. Con un color opaco el link visitado no puede despegarse del resto.
     Ratios WCAG 2.1 medidos sobre el fondo real de cada uno. */
  --v-on-dark-link: #D8D6D3;            /* links de la topbar   — 12.96 sobre --v-ink */
  --v-on-dark-ph:   #C3C0BB;            /* placeholder y lupa   —  8.74 sobre --v-topbar-field */
  --v-placeholder:  #5C5852;            /* placeholder en claro —  7.06 sobre blanco, 6.27 sobre --v-bone */
  --v-topbar-field: #242220;            /* caja del buscador de la topbar, opaca (ver §9) */

  /* Cabecera de página (breadcrumb). Valores aprobados por el cliente; son
     primos cercanos de --v-bone / --v-slate / --v-ink, pero se declaran como
     tokens propios para no tener hex sueltos en las reglas. */
  --v-crumb-bg:     #F5F1EA;
  --v-crumb-text:   #666666;
  --v-crumb-active: #2C1F1A;

  --v-whatsapp:     #25D366;            /* verde de WhatsApp: sólo en los botones que abren el chat */

  /* Radios */
  --v-r-card:   24px;
  --v-r-block:  32px;
  --v-r-pill:   999px;
  --v-r-banner: 16px;                   /* banner de cabecera del catálogo */

  /* Layout */
  --v-maxw:      1280px;
  --v-gutter:    32px;
  --v-gutter-sm: 20px;
  --v-sec-y:     96px;
  --v-sec-y-sm:  64px;
  --v-gap:       26px;
  --v-gap-sm:    14px;

  /* Tipografía */
  --v-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --v-font-text:    'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Movimiento */
  --v-ease:      cubic-bezier(.2, .7, .3, 1);
  --v-t-fast:    .3s;
  --v-t-mid:     .45s;
  --v-t-slow:    .6s;

  /* z-index — ver el mapa completo en la skill velvet-design */
  --v-z-grid:    4;                     /* grilla superpuesta al hero */
  --v-z-header:  1000;                  /* barra sticky */
  --v-z-drawer:  1950;                  /* reservado para el bloque del carrito */
}


/* ── 3. Utilidades de layout ─────────────────────────────────────────────── */

.v-wrap {
  width: 100%;
  max-width: var(--v-maxw);
  margin: 0 auto;
  padding: 0 var(--v-gutter);
}

.v-sec {
  position: relative;
  padding: var(--v-sec-y) 0;
}

.v-sec--tight    { padding-top: 0; }
.v-sec--flush    { padding-bottom: 0; }
.v-sec--bone     { background: var(--v-bone); }

/* Encabezado de sección: título a la izquierda, link a la derecha */
.v-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--v-gutter);
  margin-bottom: 44px;
}

.v-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--v-gap);
}

.v-grid--3 { grid-template-columns: repeat(3, 1fr); }
.v-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* Riel horizontal con scroll-snap. Se usa en mobile para las grillas
   y en desktop para mesas/outdoors. */
.v-rail {
  display: flex;
  gap: var(--v-gap);
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.v-rail::-webkit-scrollbar { display: none; }

.v-rail > * {
  flex: 0 0 300px;
  scroll-snap-align: start;
}


/* ── 4. Componentes base ─────────────────────────────────────────────────── */

/* 4.1 Tipografía de la capa
   Nota: estas clases se aplican a elementos que ya traen estilos de style.css
   (h2, p, etc.). Por eso resetean explícitamente margin y font-*: no heredan
   de la capa vieja por accidente. */

.v-eyebrow {
  margin: 0 0 14px;
  font-family: var(--v-font-text);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--v-brass);
}

.v-title {
  margin: 0;
  font-family: var(--v-font-display);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--v-ink);
  text-transform: none;
}

.v-title--hero {
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.05;
}

.v-title--sm { font-size: 20px; line-height: 1.3; }

/* Los ::after decorativos de style.css (.section-title, .title-2) no aplican
   acá porque .v-title es una clase distinta. Nada que neutralizar. */

.v-lead {
  margin: 14px 0 0;
  font-family: var(--v-font-text);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--v-slate);
  max-width: 46ch;
}

.v-text {
  font-family: var(--v-font-text);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--v-ink);
}

.v-link-more {
  display: inline-block;
  font-family: var(--v-font-text);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--v-ink);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--v-brass);
  padding-bottom: 4px;
  transition: color var(--v-t-fast) ease;
}

.v-link-more:hover,
.v-link-more:focus { color: var(--v-brass); text-decoration: none; }


/* 4.2 Botones */

.v-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--v-r-pill);
  font-family: var(--v-font-text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--v-t-fast) ease,
              border-color var(--v-t-fast) ease,
              color var(--v-t-fast) ease;
}

.v-btn--solid { background: var(--v-ink); color: var(--v-paper); }
.v-btn--solid:hover,
.v-btn--solid:focus { background: var(--v-ink-hover); color: var(--v-paper); text-decoration: none; }

.v-btn--line { border-color: var(--v-line); color: var(--v-ink); background: transparent; }
.v-btn--line:hover,
.v-btn--line:focus { border-color: var(--v-ink); color: var(--v-ink); text-decoration: none; }

.v-btn--ghost { border-color: var(--v-paper-45); color: var(--v-paper); background: transparent; }
.v-btn--ghost:hover,
.v-btn--ghost:focus { border-color: var(--v-paper); background: rgba(255, 255, 255, .08); color: var(--v-paper); text-decoration: none; }

.v-btn--light { background: var(--v-paper); color: var(--v-ink); }
.v-btn--light:hover,
.v-btn--light:focus { background: var(--v-sand); color: var(--v-ink); text-decoration: none; }

.v-btn--block { width: 100%; }

/* Botón circular de acción (header) */
.v-icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--v-line);
  border-radius: var(--v-r-pill);
  color: var(--v-ink);
  background: transparent;
  text-decoration: none;
  transition: border-color var(--v-t-fast) ease, background var(--v-t-fast) ease;
}

.v-icon-btn:hover,
.v-icon-btn:focus { border-color: var(--v-ink); text-decoration: none; }

.v-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--v-r-pill);
  background: var(--v-brass);
  color: var(--v-paper);
  font-family: var(--v-font-text);
  font-size: 10px;
  line-height: 1;
}


/* 4.3 Chips y etiquetas */

.v-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--v-line);
  border-radius: var(--v-r-pill);
  background: transparent;
  font-family: var(--v-font-text);
  font-size: 13px;
  font-weight: 300;
  color: var(--v-ink);
  cursor: pointer;
  transition: border-color var(--v-t-fast) ease, background var(--v-t-fast) ease, color var(--v-t-fast) ease;
}

.v-chip:hover { border-color: var(--v-ink); }
.v-chip.is-on { background: var(--v-ink); border-color: var(--v-ink); color: var(--v-paper); }

.v-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border: 1px solid transparent;
  border-radius: var(--v-r-pill);
  background: var(--v-paper-90);
  font-family: var(--v-font-text);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--v-ink);
}

.v-tag--new  { background: var(--v-ink); color: var(--v-paper); }
.v-tag--tech { background: transparent; border-color: rgba(20, 17, 15, .25); }

/* El ícono PNG de grupo funcional, cuando la API no da el nombre del grupo */
.v-tag__icon { display: block; width: auto; height: 14px; }


/* 4.4 Card de producto — estructura base. Se completa en la 1.3. */

.v-card { position: relative; }

.v-card__media {
  position: relative;
  display: grid;
  place-items: center;
  padding: 16px;                 /* 22→16 (2026-09-14): compensa el contain real de la foto */
  aspect-ratio: 1 / .86;
  background: var(--v-bone);
  border-radius: var(--v-r-card);
  overflow: hidden;
  transition: background var(--v-t-mid) ease;
}

.v-card__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  border: 0;
  transition: transform var(--v-t-slow) var(--v-ease);
}

.v-card:hover .v-card__media     { background: var(--v-sand); }
/* El hover levanta y achica la foto (antes scale 1.05): la barra de acciones
   aparece en el lugar que la foto libera y ya no tapa el pie del producto. */
.v-card:hover .v-card__media img,
.v-card:focus-within .v-card__media img { transform: translateY(-16px) scale(.94); }

.v-card__tags {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Barra flotante de acciones. En touch queda siempre visible (§6). */
.v-card__quick {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--v-t-mid) ease, transform var(--v-t-mid) ease;
}

.v-card:hover .v-card__quick,
.v-card:focus-within .v-card__quick { opacity: 1; transform: none; }

.v-card__quick > a {
  flex: 1;
  padding: 13px;
  border-radius: var(--v-r-pill);
  background: var(--v-ink);
  color: var(--v-paper);
  font-family: var(--v-font-text);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background var(--v-t-fast) ease;
}

.v-card__quick > a:hover { background: var(--v-ink-hover); color: var(--v-paper); text-decoration: none; }

/* Botón circular de consulta (abre WhatsApp vía Kommo). Es un <button>. */
.v-card__quick .v-card__wa {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--v-r-pill);
  background: var(--v-paper);
  color: var(--v-ink);
  cursor: pointer;
  transition: background var(--v-t-fast) ease, color var(--v-t-fast) ease;
}

.v-card__quick .v-card__wa:hover { background: var(--v-sand); color: var(--v-ink); }
.v-card__quick .v-card__wa:focus-visible { outline: 2px solid var(--v-brass); outline-offset: 3px; }


/* Los datos van fuera de la caja, sobre el blanco de la página */
.v-card__body  { padding: 20px 4px 0; }

.v-card__name {
  margin: 0;
  font-family: var(--v-font-display);
  font-size: 18px;
  font-weight: 400;              /* 18px/400 (Miguel, 2026-09-14). Ver nota en .v-card__name a */
  line-height: 1.25;
  color: var(--v-ink);
  text-transform: none;
}

/* font-size: inherit es obligatorio: style.css:72 tiene `a { font-size: 14px }`
   y le ganaba a la herencia del h3. El nombre se veía a 14px aunque el h3
   tuviera 26px. */
.v-card__name a { color: inherit; font-size: inherit; text-decoration: none; }
.v-card__name a:hover { color: var(--v-ink-hover); text-decoration: none; }

.v-card__meta {
  margin-top: 3px;
  font-family: var(--v-font-text);
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: .06em;
  color: var(--v-slate);
}

.v-card__price {
  margin-top: 12px;
  font-family: var(--v-font-text);
  font-size: 19px;
  font-weight: 400;
  color: var(--v-ink);
}

.v-card__price-old {
  margin-right: 8px;
  font-size: 15px;
  color: var(--v-slate);
  text-decoration: line-through;
}

/* Cuotas en dorado — nunca en verde (ver skill velvet-design §3) */
.v-card__fees {
  margin-top: 1px;
  font-family: var(--v-font-text);
  font-size: 13px;
  font-weight: 300;
  color: var(--v-brass);
}


/* 4.5 Banda con fondo fotográfico y parallax */

.v-band {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 520px;
  margin: 0 var(--v-gutter);
  border-radius: var(--v-r-block);
  overflow: hidden;
}

.v-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 8, 7, .80) 0%, rgba(10, 8, 7, .45) 55%, rgba(10, 8, 7, .15) 100%);
}

.v-band__copy {
  position: relative;
  z-index: 2;
  max-width: 560px;
  padding: 72px 64px;
  color: var(--v-paper);
}

.v-band__copy .v-title   { color: var(--v-paper); }
.v-band__copy .v-eyebrow { color: var(--v-brass-soft); }
.v-band__copy .v-lead    { color: var(--v-on-dark); }

.v-band--center::after { background: rgba(10, 8, 7, .62); }

.v-band--center .v-band__copy {
  max-width: 660px;
  margin: 0 auto;
  padding: 96px 40px;
  text-align: center;
}

.v-band--center .v-lead { margin-left: auto; margin-right: auto; }

/* Lista de dos columnas con viñeta dorada */
.v-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  margin: 30px 0 34px;
  padding: 0;
  list-style: none;
}

.v-list > li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--v-font-text);
  font-size: 14.5px;
  font-weight: 300;
  color: rgba(255, 255, 255, .90);
}

.v-list > li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v-brass);
}


/* 4.6 Barra de confianza */

.v-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 44px 0;
}

.v-trust__item { display: flex; align-items: flex-start; gap: 16px; }

.v-trust__item svg { flex: none; stroke: var(--v-brass); fill: none; }

.v-trust__item strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--v-font-text);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--v-ink);
}

.v-trust__item p {
  margin: 0;
  font-family: var(--v-font-text);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--v-slate);
}


/* 4.7 Testimonio */

.v-quote {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 34px 32px;
  background: var(--v-bone);
  border-radius: var(--v-r-card);
}

.v-quote__text {
  margin: 0 0 24px;
  font-family: var(--v-font-display);
  font-size: 17.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--v-ink);
}

.v-quote__foot { margin-top: auto; display: flex; align-items: center; gap: 12px; }

.v-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--v-sand);
  font-family: var(--v-font-text);
  font-size: 13px;
  color: var(--v-slate);
}

.v-quote__name {
  display: block;
  font-family: var(--v-font-text);
  font-size: 14.5px;
  font-weight: 400;
  color: var(--v-ink);
}

.v-quote__place {
  display: block;
  font-family: var(--v-font-text);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--v-slate);
}


/* 4.8 Card de servicio y de nota */

.v-svc {
  background: var(--v-bone);
  border-radius: var(--v-r-card);
  overflow: hidden;
}

.v-svc img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.v-svc__body { padding: 28px 28px 32px; }
.v-svc__body p {
  margin: 0;
  font-family: var(--v-font-text);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--v-slate);
}

.v-post { display: block; text-decoration: none; }

.v-post__img {
  margin-bottom: 20px;
  aspect-ratio: 3 / 2;
  border-radius: var(--v-r-card);
  overflow: hidden;
}

.v-post__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--v-ease);
}

.v-post:hover .v-post__img img { transform: scale(1.05); }

.v-post__date {
  font-family: var(--v-font-text);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--v-brass);
}

.v-post__body p {
  margin: 0;
  font-family: var(--v-font-text);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--v-slate);
}


/* ── 5. Movimiento ─────────────────────────────────────────────────────────
   Los engancha velvet-2026.js. Inertes hasta que un template los use.       */

/* Capa que desplaza el JS. El padre necesita position:relative y overflow:hidden;
   la capa se sobredimensiona para que el desplazamiento no descubra los bordes. */
[data-v-parallax] {
  position: absolute;
  top: -12%;
  left: 0;
  width: 100%;
  height: 124%;
  will-change: transform;
}

[data-v-parallax] img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Reveal al entrar en pantalla */
.v-rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s ease, transform .8s var(--v-ease);
}

.v-rv.is-in { opacity: 1; transform: none; }


/* ── 6. Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .v-grid            { grid-template-columns: repeat(2, 1fr); }
  .v-grid--3,
  .v-grid--2         { grid-template-columns: 1fr; }
  .v-trust           { grid-template-columns: 1fr; gap: 22px; }
  .v-band            { margin: 0 var(--v-gutter-sm); }
  .v-band__copy      { padding: 48px 32px; }
  .v-band--center .v-band__copy { padding: 64px 32px; }
  .v-list            { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .v-wrap        { padding: 0 var(--v-gutter-sm); }
  .v-sec         { padding: var(--v-sec-y-sm) 0; }
  .v-sec-head    { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
  .v-grid        { grid-template-columns: 1fr 1fr; gap: var(--v-gap-sm); }
  .v-rail        { gap: var(--v-gap-sm); }
  .v-rail > *    { flex-basis: 260px; }
  .v-card__name  { font-size: 18px; }
  .v-card__price { font-size: 16px; }
  .v-card__body  { padding-top: 14px; }
  .v-quote       { padding: 28px 24px; }
  .v-svc__body   { padding: 22px 22px 26px; }
}

/* En touch no hay hover: la barra de acciones de la card queda siempre visible */
@media (hover: none) {
  .v-card__quick { opacity: 1; transform: none; }
}


/* ── 7. Accesibilidad ────────────────────────────────────────────────────── */

/* Oculta visualmente pero deja el texto disponible para lectores de pantalla
   y para el indexador. NUNCA usar display:none para esto. */
.v-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Foco visible y consistente en todos los componentes de la capa */
.v-btn:focus-visible,
.v-icon-btn:focus-visible,
.v-chip:focus-visible,
.v-link-more:focus-visible,
.v-card__quick > a:focus-visible,
.v-card__name a:focus-visible,
.v-post:focus-visible {
  outline: 2px solid var(--v-brass);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .v-rv                { opacity: 1; transform: none; transition: none; }
  [data-v-parallax]    { transform: none !important; }  /* el JS ni siquiera arranca */
  .v-card__media,
  .v-card__media img,
  .v-card__quick,
  .v-post__img img,
  .v-btn,
  .v-icon-btn,
  .v-chip            { transition: none; }
}

@media print {
  .v-rv { opacity: 1; transform: none; }
}


/* ============================================================================
   SUB-FASE 1.2 — Tipografía global, header, menú y footer
   ----------------------------------------------------------------------------
   Acá la capa deja de ser inerte: a partir de este bloque sí se sobrescriben
   selectores existentes de style.css. Cada override lleva comentada la regla
   vieja que reemplaza y su línea, para poder rastrearlo.
   ============================================================================ */


/* ── 8. Tipografía global ──────────────────────────────────────────────────
   Fraunces + Jost en todo el sitio. No conviven dos tipografías.
   Reemplaza style.css:9-19 ("Open Sans", 13px, #555, line-height 22/13).     */

body {
  font-family: var(--v-font-text);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--v-ink);

  /* style.css:14 fuerza `-webkit-font-smoothing: antialiased`, que apaga el
     subpixel rendering y renderiza en escala de grises: adelgaza todos los
     trazos. Con Open Sans 400 a 13px pasaba desapercibido; con Jost 300 a
     16px deja el texto lavado, sobre todo en monitores no-Retina. Se vuelve
     al rendering nativo del sistema. */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;

  /* `auto` a propósito: `optimizeLegibility` activa kerning y ligaduras
     avanzadas, pero en textos largos degrada el rendimiento y en varios
     navegadores produce saltos de espaciado. */
  text-rendering: auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--v-font-display);
  font-weight: 300;
  letter-spacing: -.01em;
  color: var(--v-ink);
}

/* Los textos de interfaz siguen en Jost: son etiquetas, no títulos */
button, input, select, textarea,
.au-btn, .btn, .label, .badge,
.form__input, .breadcrumb, .page-number {
  font-family: var(--v-font-text);
}

/* style.css pinta muchos títulos en bold. La identidad nueva es liviana:
   se baja el peso sin tocar los tamaños de cada sección, que se ajustan
   cuando se restila esa sección. */
.section-title,
.title-2,
.blog-title,
.product-title,
.pro__detail > h5 > a {
  font-family: var(--v-font-display);
  font-weight: 300;
}

a { color: inherit; }


/* ── 9. Topbar ─────────────────────────────────────────────────────────────
   Reemplaza .top-contact (style.css:2940), que era position:fixed z-index:10000.
   La nueva es estática: del apilado se encarga el header sticky.             */

.page-wrap .v-topbar {
  position: relative;
  z-index: calc(var(--v-z-header) + 1);
  background: var(--v-ink);
  color: var(--v-on-dark-link);
  font-size: 12px;
  letter-spacing: .06em;
}

.v-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 42px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.v-topbar__search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 260px;
  max-width: 380px;
  flex: 1 1 260px;
  margin: 0;
  padding: 7px 16px;
  background: var(--v-topbar-field);
  border-radius: var(--v-r-pill);
}

/* La lupa va al mismo color que el placeholder. En el template el svg lleva
   stroke="currentColor", así que aunque esta regla no estuviera heredaría el
   color de la topbar: nunca vuelve a un gris apagado ni a una transparencia. */
.v-topbar__search svg { flex: none; stroke: var(--v-on-dark-ph); }

/* Especificidad extra para ganarle a .form__input de style.css */
.v-topbar .v-topbar__search input.v-topbar__input {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  box-shadow: none;
  font-family: var(--v-font-text);
  /* 14px/400, lo mismo que los links de la topbar. A 12px con peso 300 el
     texto claro sobre fondo oscuro se lee borroso por más contraste que
     tenga: el problema ahí ya no es el color, es el trazo. */
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--v-paper);
}

/* `.page-wrap` adelante a propósito: la regla general de formularios
   (.page-wrap input::placeholder, sección 34) vale (0,1,2) y le ganaba a
   `.v-topbar__input::placeholder` (0,1,1). El placeholder de la topbar
   terminaba pintado con --v-slate sobre fondo oscuro: 2.38 de contraste.

   En toda esta caja el contraste sale del color y de nada más: el fondo es
   --v-topbar-field (opaco, no un blanco al 7 %), el texto tipeado es blanco
   puro y el placeholder es un gris cálido sólido, 8.74 sobre ese fondo.
   El único `opacity` que queda es este 1, que NO es una transparencia: es el
   reset del .54 que Firefox le mete al placeholder por su cuenta. */
.page-wrap .v-topbar .v-topbar__input::placeholder {
  color: var(--v-on-dark-ph);
  font-size: 14px;       /* explícito: no depender de la herencia del input */
  font-weight: 400;
  opacity: 1;
}

.v-topbar__links { display: flex; flex-wrap: wrap; gap: 26px; }

/* Los cinco estados declarados con el mismo color: así ningún link se despega
   de los otros tres. `a:link, a:visited {color:#444}` de style.css:88 empata
   en especificidad con `.v-topbar__links a` y sólo perdía por orden de carga;
   acá queda cubierto de forma explícita.

   El color va LITERAL y no `var(--v-on-dark-link)` a propósito. El estilo de
   un link visitado es especial: el navegador sólo deja pasar unas pocas
   propiedades y las resuelve aparte, para que una página no pueda averiguar
   el historial. Varios motores —Firefox entre ellos— no resuelven ahí las
   custom properties, y la declaración se cae: el link visitado termina con el
   color de link visitado del navegador, ese lavanda de siempre. Es justo lo
   que se veía en "Puntos de Venta Oficiales" y en ningún otro, porque era la
   única de las cuatro ya visitada.

   No se reprodujo en Chromium 148 (ahí `var()` sí se resuelve en :visited,
   probado con perfil persistente y midiendo el píxel), pero el literal lo deja
   correcto en todos los motores y no cambia nada donde ya funcionaba.
   El valor es el mismo de --v-on-dark-link: si se toca el token, tocar acá. */
.v-topbar__links a,
.v-topbar__links a:link,
.v-topbar__links a:visited {
  color: #D8D6D3;
  text-decoration: none;
  transition: color var(--v-t-fast) ease;
}

.v-topbar__links a:hover,
.v-topbar__links a:focus,
.v-topbar__links a:active { color: var(--v-paper); text-decoration: none; }


/* ── 10. Header sticky ─────────────────────────────────────────────────────
   Reemplaza .header-desktop (5908: fixed, z-index 1000, fondo #ddd),
   .header-desktop-top (5916: top 40px !important), .header-plata (5975)
   y .header-mobile. Un solo bloque de markup para las dos vistas.            */

.page-wrap .v-header {
  position: sticky;
  top: 0;
  z-index: var(--v-z-header);
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--v-line);
}

/* Sin backdrop-filter el fondo translúcido deja ver el contenido pasando
   por atrás: se opaca. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page-wrap .v-header { background: rgba(255, 255, 255, .985); }
}

.v-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 88px;
}

/* 10.1 Logo — deja de ser <h1> (ver skill velvet-seo) */
.v-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin: 0;
  text-decoration: none;
}

/* 48px. A 38 el subtítulo "COMFORT & DESIGN" del SVG quedaba en unos 5px de
   alto y se leía borroso: no era falta de resolución (el archivo es vectorial,
   image/svg+xml, no un PNG escalado) sino falta de tamaño. Entra cómodo en los
   88px del header. */
.v-logo img { display: block; width: auto; height: 48px; max-width: 100%; }

/* 10.2 Navegación principal */
.v-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v-nav > li { margin: 0; padding: 0; list-style: none; }

.v-nav a {
  position: relative;
  display: block;
  padding: 6px 0;
  font-family: var(--v-font-text);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #3A3531;
  text-decoration: none;
  transition: color var(--v-t-fast) ease;
}

/* Subrayado dorado que crece de izquierda a derecha */
.v-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--v-brass);
  transition: right .35s ease;
}

.v-nav a:hover,
.v-nav a:focus,
.v-nav a.is-active { color: var(--v-ink); text-decoration: none; }

.v-nav a:hover::after,
.v-nav a:focus::after,
.v-nav a.is-active::after { right: 0; }

/* 10.3 Acciones a la derecha */
.v-actions { display: flex; align-items: center; gap: 14px; flex: none; }

/* El contador lo actualiza carrito.js por .mini-cart-counter: la clase se
   conserva, solo cambia su presentación. */
.v-actions .mini-cart-counter {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  min-width: 18px;
  width: auto;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--v-r-pill);
  background: var(--v-brass);
  color: var(--v-paper);
  font-family: var(--v-font-text);
  font-size: 10px;
  font-weight: 400;
  line-height: 18px;
  text-align: center;
}

/* Mismo botón que .v-icon-btn (ubicación y carrito): mismo borde, mismo radio
   y mismo color, para que los tres se lean como una sola familia. Adentro ya
   no van tres <span> pintados con background —a 1,5px de alto pesaban el doble
   que el trazo de los SVG de al lado— sino un ícono construido igual que los
   otros: viewBox 24, stroke-width 1.3 y linecap redondo. */
.v-burger {
  display: none;
  place-items: center;
  border: 1px solid var(--v-line);
  border-radius: var(--v-r-pill);
  color: var(--v-ink);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--v-t-fast) ease;
}

.v-burger:hover,
.v-burger:focus { border-color: var(--v-ink); }


/* ── 11. Menú mobile off-canvas ───────────────────────────────────────────
   Desde la izquierda. Misma mecánica de foco y scroll-lock que va a reusar
   el drawer del carrito, para no duplicar código después.                   */

.v-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1900;
  background: rgba(10, 8, 7, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s var(--v-ease), visibility .32s;
}

.v-drawer-overlay.is-open { opacity: 1; visibility: visible; }

.v-offcanvas {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1950;
  display: flex;
  flex-direction: column;
  width: min(86vw, 340px);
  background: var(--v-paper);
  border-radius: 0 var(--v-r-block) var(--v-r-block) 0;
  transform: translateX(-100%);
  transition: transform .32s var(--v-ease);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.v-offcanvas.is-open { transform: translateX(0); }

.v-offcanvas__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px var(--v-gutter-sm);
  border-bottom: 1px solid var(--v-line);
}

.v-offcanvas__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 1px solid var(--v-line);
  border-radius: var(--v-r-pill);
  background: transparent;
  color: var(--v-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--v-t-fast) ease;
}

.v-offcanvas__close:hover { border-color: var(--v-ink); }

.v-offcanvas__nav { margin: 0; padding: 12px var(--v-gutter-sm); list-style: none; }
.v-offcanvas__nav li { margin: 0; padding: 0; list-style: none; }

.v-offcanvas__nav a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--v-line);
  font-family: var(--v-font-text);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--v-ink);
  text-decoration: none;
}

.v-offcanvas__nav a:hover,
.v-offcanvas__nav a:focus,
.v-offcanvas__nav a.is-active { color: var(--v-brass); text-decoration: none; }

.v-offcanvas__nav--sec { padding-top: 0; }

.v-offcanvas__nav--sec a {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: none;
  color: var(--v-slate);
}

.v-offcanvas__foot { margin-top: auto; padding: 22px var(--v-gutter-sm) 28px; }

.v-offcanvas__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 10px 16px;
  border: 1px solid var(--v-line);
  border-radius: var(--v-r-pill);
}

/* `.page-wrap` adelante a propósito, igual que en el buscador de la topbar: la
   regla general de formularios (.page-wrap input[type="text"], sección 34)
   vale (0,2,1) y empataba con este selector, ganando por venir después. El
   input recuperaba borde, radio de 24px y padding de 13px, y el buscador
   quedaba con dos bordes redondeados, uno adentro del otro. El campo es el
   contenedor: adentro va sólo el texto. */
.page-wrap .v-offcanvas .v-offcanvas__search input {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  box-shadow: none;
  font-family: var(--v-font-text);
  font-size: 13px;
  font-weight: 300;
  color: var(--v-ink);
}

/* Bloquea el scroll del documento sin que la página salte: el JS mide la
   scrollbar y la compensa en --v-sbw */
body.v-locked { overflow: hidden; padding-right: var(--v-sbw, 0px); }


/* ── 12. Footer ────────────────────────────────────────────────────────────
   Reemplaza .footer-2 (2931 / 7827) y .copyright (2919 / 7874).             */

.page-wrap .v-footer {
  margin-top: 0;
  padding: 80px 0 0;
  background: var(--v-ink);
  color: #A9A49C;
  border-radius: var(--v-r-block) var(--v-r-block) 0 0;
  font-size: 14px;
}

.v-footer__cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
}

.v-footer h4 {
  margin: 0 0 20px;
  font-family: var(--v-font-text);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--v-paper);
}

.v-footer ul {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.v-footer li { margin: 0; padding: 0; list-style: none; }

.v-footer a { color: #A9A49C; text-decoration: none; transition: color var(--v-t-fast) ease; }
.v-footer a:hover,
.v-footer a:focus { color: var(--v-paper); text-decoration: none; }

.v-footer__brand p {
  max-width: 34ch;
  margin: 22px 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: #A9A49C;
}

.v-footer__brand .v-logo img { height: 42px; }

.v-socials { display: flex; gap: 10px; margin-bottom: 22px; }

.v-socials a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--v-paper-18);
  border-radius: 50%;
  color: #A9A49C;
  transition: background var(--v-t-fast) ease, color var(--v-t-fast) ease, border-color var(--v-t-fast) ease;
}

.v-socials a:hover,
.v-socials a:focus { background: var(--v-paper); color: var(--v-ink); border-color: var(--v-paper); }

.v-footer__afip img { max-width: 50px; height: auto; }

.v-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, .10);
  font-size: 12.5px;
}

.v-footer__legal a { border-bottom: 1px solid transparent; }
.v-footer__legal a:hover { border-bottom-color: var(--v-brass); }


/* ── 13. Responsive de header y footer ───────────────────────────────────── */

@media (max-width: 1080px) {
  .v-nav            { display: none; }
  .v-burger         { display: inline-grid; width: 42px; height: 42px; }
  .v-header__inner  { height: 72px; }
  .v-logo img       { height: 40px; }   /* acompaña los 48px de desktop */
  .v-topbar__links  { display: none; }
  .v-topbar__search { max-width: none; }
  .v-footer__cols   { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 640px) {
  .v-topbar             { display: none; }   /* el buscador vive en el off-canvas */
  .v-header__inner      { height: 64px; gap: 12px; }
  .v-actions            { gap: 8px; }
  .page-wrap .v-footer  { padding-top: 56px; }
  .v-footer__cols       { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
  .v-footer__legal      { flex-direction: column; gap: 8px; }
}


/* ── 14. Neutralización de la maquetación vieja ──────────────────────────── */

/* .margen-menu (style.css:20) empujaba el contenido 124px para dejar lugar al
   header fixed. Con el header sticky el flujo ya reserva su espacio. */
.margen-menu { margin-top: 0; }

/* Los headers viejos ya no se emiten desde menu.tpl, pero sus reglas siguen en
   style.css. Si algún template los reintrodujera, que no aparezcan dos veces. */
.header-desktop,
.header-mobile,
.top-contact { display: none; }

/* El botón de chat de Kommo (reemplaza al WhatsApp flotante) se inyecta con
   un z-index propio por encima del overlay (1900) y del drawer (1950):
   mientras un panel está abierto, se oculta. Mismo criterio que tenía el
   WhatsApp. El selector se fija en §45 con el DOM real del botón. */


/* ============================================================================
   SUB-FASE 1.3 — Card de producto
   ----------------------------------------------------------------------------
   El markup vive en templates/partials/card-producto.tpl, incluido desde
   widgets/lista_productos.tpl (catálogo, búsqueda y las dos paginaciones AJAX)
   y desde index.tpl. Un solo componente para todo el sitio.
   ============================================================================ */

/* ── 15. Neutralizar la card vieja ───────────────────────────────────────── */

/* .pro__item traía margin-top:30px (style.css:4431). El espacio ahora lo pone
   el gap de la grilla; en el catálogo, que sigue con columnas Bootstrap, se
   conserva una separación vertical propia. */
.pro__item { margin-top: 0; padding-bottom: 34px; }

/* Los bordes grises de la card vieja (style.css:4439-4460) */
.pro__item .v-card__media img,
.v-card__media img { border: 0; }

/* El bloque de precios conserva las clases viejas porque son las que el resto
   del sitio ya conoce; acá se les cambia la presentación. */
.v-card__body .pro__price { margin: 0; }

.v-card__body .price-current {
  display: inline;
  font-family: var(--v-font-text);
  font-size: 19px;
  font-weight: 400;
  color: var(--v-ink);
}

.v-card__body .price-old {
  display: inline;
  margin-right: 8px;
  font-size: 15px;
  color: var(--v-slate);
  text-decoration: line-through;
}

/* Las cuotas pasan de verde (#2e7d32, style.css:9234) a dorado */
.v-card__body .price-installments {
  display: inline;
  font-family: var(--v-font-text);
  font-size: 13px;
  font-weight: 300;
  color: var(--v-brass);
  margin: 0;
}

.v-card__body .price-consult {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--v-font-text);
  font-size: 17px;
  font-weight: 400;
  color: var(--v-ink);
}

/* El bloque de efectivo solo aparece si PRECIO_EFECTIVO > 0 (hoy es 0) */
.v-card__body .price-cash { margin-top: 8px; }

.v-card__body .price-cash-label {
  display: block;
  font-size: 12px;
  color: var(--v-slate);
}

.v-card__body .price-final {
  font-family: var(--v-font-text);
  font-size: 15px;
  font-weight: 400;
  color: var(--v-ink);
}

/* El badge de descuento pasa de verde a dorado sobre bone */
.v-card__body .price-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--v-r-pill);
  background: var(--v-bone);
  color: var(--v-brass);
  font-size: 11px;
  font-weight: 400;
}

/* ── 16. Ajustes de la card ──────────────────────────────────────────────── */

/* La foto de producto viene con fondo blanco: el multiply la funde con el
   bone de la caja. Si la imagen fallara, el alt no debe heredar el blend. */
.v-card__media img[alt]:not([src]) { mix-blend-mode: normal; }

/* El link de la imagen ocupa toda la caja: es el área de click principal.
   Va con tabindex="-1" porque el nombre ya lleva al mismo destino: así el
   teclado no tiene que pasar dos veces por el mismo link. */
/* Sin z-index a propósito: un elemento posicionado con z-index crea un
   stacking context, y ahí el mix-blend-mode de la foto se mezclaría contra
   el fondo transparente del <a> en vez de contra el bone de la caja — la
   imagen quedaría con su recuadro blanco a la vista. El orden del DOM ya
   deja los tags y la barra de acciones (z-index 2) por encima. */
.v-card__media > a.velvet-product-link {
  position: absolute;
  inset: 0;
  display: block;                /* era grid: ahí el height:100% de la foto no resolvía */
  padding: 16px;
}

/* La foto ocupa TODO el área útil del link y object-fit:contain la centra en
   las dos direcciones. Antes tenía width/height auto + max-height:100%, y en
   un grid ese porcentaje no resuelve: la foto (siempre 1080x1080 en la API)
   se ajustaba al ancho, desbordaba por abajo y quedaba recortada en el pie. */
.v-card__media > a.velvet-product-link img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Envío gratis: píldora de texto (el PNG envio-gratis.png ya no se usa en la
   card). Dorado sólido para no confundirse con NUEVO (tinta) ni con los grupos
   (borde). El texto es el que decía el PNG del cliente. */
.v-tag--ship { background: var(--v-brass); color: var(--v-paper); border-color: transparent; }

/* Los tags no deben empujarse entre sí cuando hay varios */
.v-card__tags { max-width: calc(100% - 32px); }

/* En el catálogo la grilla la siguen dando las columnas de Bootstrap.
   Se empareja la altura para que los datos queden alineados entre cards. */
.pro__item .v-card { display: flex; flex-direction: column; height: 100%; }
.pro__item .v-card__body { flex: 1 1 auto; }

@media (max-width: 640px) {
  .pro__item { padding-bottom: 22px; }
  .v-card__body .price-current  { font-size: 16px; }
  .v-card__body .price-old      { font-size: 13px; }
  .v-card__body .price-installments { font-size: 12px; }
  .v-card__tags .v-tag          { padding: 4px 9px; font-size: 9px; letter-spacing: .12em; }
}


/* ============================================================================
   SUB-FASE 1.4 — Hero y secciones de la home
   ============================================================================ */

/* ── 17. Barra de promos ───────────────────────────────────────────────────
   El carrusel Bootstrap #carouselPromos de slider.tpl. Se conserva su
   mecánica (data-ride, data-interval) y sus textos. */

.v-promobar {
  background: var(--v-ink);       /* reemplaza el degradado de .gradiente */
  border-bottom: 0;
  color: var(--v-paper);
  overflow: hidden;
}

/* .margen-menu ya está neutralizada en §14; acá se anula el resto del
   contenedor viejo sin tocar el markup, que se conserva por el bloque de
   campaña comentado que vive adentro. */
.v-promobar.gradiente { background: var(--v-ink); }
.v-promobar > .row { margin-left: 0; margin-right: 0; min-height: 42px; }

.v-promobar .carousel { height: 42px !important; }   /* pisa el style inline de 35px */
.v-promobar .carousel-inner { height: 100%; }

/* OJO: no tocar `.carousel-item` a secas. Bootstrap lo maneja con
   display:none y muestra sólo el activo; ponerle display:flex acá hacía que
   se mostraran los tres mensajes a la vez y el carrusel dejara de rotar. */
.v-promobar .carousel-item.active,
.v-promobar .carousel-item-next,
.v-promobar .carousel-item-prev {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
}

.v-promobar .carousel-item p {
  margin: 0;
  font-family: var(--v-font-text);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--v-paper);
}


/* ── 18. Hero ──────────────────────────────────────────────────────────────
   Sigue siendo el mismo slick sobre .slider-principal, alimentado por
   $sliders (desktop) y la galería 133 (mobile). Solo cambia la presentación. */

.v-hero {
  position: relative;
  /* Altura fija e igual a la de los slides: si el section fuera más alto que
     la imagen, asomaría su fondo por debajo, justo donde monta la grilla. */
  height: min(80vh, 680px);
  border-radius: 0 0 var(--v-r-block) var(--v-r-block);
  overflow: hidden;
  background: var(--v-ink);
}

.v-hero .slider-principal,
.v-hero .slick-list,
.v-hero .slick-track { height: 100%; }

.v-hero .slider-principal { height: min(80vh, 680px); }

.v-hero .slider-principal img {
  width: 100%;
  height: min(80vh, 680px);
  object-fit: cover;
}

/* Degradado de izquierda a derecha para que el texto del banner se lea
   siempre. Reemplaza el .gradient (style.css:1158), que fundía a blanco
   por abajo para la superposición vieja. */
.v-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 8, 7, .55) 0%, rgba(10, 8, 7, .18) 45%, rgba(10, 8, 7, 0) 72%);
}

/* El .gradient viejo ya no se emite, pero por si algún template lo reintroduce */
.v-hero .gradient { display: none; }

/* Pie del hero: indicadores a la izquierda, píldora de cuotas a la derecha */
/* Por encima de la zona donde monta la grilla (-120px) más un respiro:
   si no, la caja blanca tapa los indicadores y la píldora de cuotas. */
.v-hero__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 152px;
  z-index: 3;
}

.v-hero__foot .v-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Indicadores: barritas de 34x2, la activa en dorado.
   slick los genera como <ul class="slick-dots"><li><button>. */
.v-hero .slick-dots {
  position: static;
  display: flex;
  gap: 10px;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v-hero .slick-dots li {
  width: 34px;
  height: 2px;
  margin: 0;
  padding: 0;
}

.v-hero .slick-dots li button {
  width: 34px;
  height: 2px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, .32);
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  cursor: pointer;
  transition: background var(--v-t-fast) ease;
}

/* slick-theme dibuja un "•" en ::before y style.css:8177 un círculo de 15px
   en ::after, que asomaba alrededor de la barrita del indicador activo. */
.v-hero .slick-dots li button::before,
.v-hero .slick-dots li button::after { display: none; content: none; }
.v-hero .slick-dots li.slick-active button { background: var(--v-brass); }

.v-promo-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  border: 1px solid var(--v-paper-45);
  border-radius: var(--v-r-pill);
  color: var(--v-paper);
  font-family: var(--v-font-text);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Flechas de slick: discretas, circulares.
   Neutraliza el width:130px !important de style.css:1177. */
.v-hero .slick-prev,
.v-hero .slick-next {
  z-index: 3;
  width: 44px !important;   /* !important puntual: la regla vieja lo usa */
  height: 44px;
  border-radius: var(--v-r-pill);
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background var(--v-t-fast) ease;
}

.v-hero .slick-prev { left: 24px; }
.v-hero .slick-next { right: 24px; }
.v-hero .slick-prev:hover,
.v-hero .slick-next:hover { background: rgba(255, 255, 255, .26); }


/* ── 19. Grilla superpuesta al hero ────────────────────────────────────────
   Monta ~120px sobre el borde inferior del hero, sobre fondo blanco con
   esquinas redondeadas. En mobile deja de superponerse y pasa a riel. */

.v-overlap {
  position: relative;
  z-index: var(--v-z-grid);
  margin-top: -120px;
  padding: 40px 0 0;
}

.v-overlap__box {
  background: var(--v-paper);
  border-radius: var(--v-r-block);
  padding: 40px 16px 16px;
}

/* El encabezado de la caja sí respeta el margen visual de la página */
.v-overlap__box > .v-sec-head { padding: 0 40px; }


/* ── 20. Secciones de la home ────────────────────────────────────────────── */

/* La barra de confianza reemplaza las tres cajas de .service5.
   El texto es el mismo; cambia el contenedor. */
.v-trust-wrap { border-bottom: 1px solid var(--v-line); }

/* Riel: en desktop las mesas y outdoors van en riel horizontal */
.v-rail .v-card { flex: 0 0 300px; scroll-snap-align: start; }

/* Servicios post-compra: se saca el fondo fotográfico fijo de .our-process2,
   que se rompe en mobile */
.v-svc h3 { margin: 0 0 10px; font-size: 19px; }

.v-post h3 { margin: 10px 0 8px; font-size: 21px; }

/* Blog: la fecha en dorado */
.v-post__body .v-post__date { display: block; margin-bottom: 6px; }

@media (max-width: 1080px) {
  .v-overlap        { margin-top: -80px; }
  .v-overlap__box   { padding: 28px 20px 4px; }
}

@media (max-width: 640px) {
  .v-hero              { height: 62vh; border-radius: 0 0 var(--v-r-card) var(--v-r-card); }
  .v-hero .slider-principal,
  .v-hero .slider-principal img { height: 62vh; }
  .v-hero__foot        { bottom: 18px; }
  .v-hero .slick-prev,
  .v-hero .slick-next  { display: none !important; } /* en touch se pasa deslizando */
  .v-promo-pill        { font-size: 10px; padding: 7px 14px; letter-spacing: .08em; }
  .v-hero .slick-dots li,
  .v-hero .slick-dots li button { width: 22px; }

  /* Monta apenas 28px sobre el slider, con las esquinas superiores del
     sistema. El encabezado va en una sola fila (eyebrow + VER TODOS) para que
     el bloque blanco tape lo mínimo de la foto. */
  .v-overlap           { margin-top: -28px; padding-top: 0; }
  .v-overlap__box      { padding: 24px 0 0; border-radius: var(--v-r-card) var(--v-r-card) 0 0; }
  .v-overlap__box > .v-sec-head { flex-direction: row; align-items: center; justify-content: space-between; padding: 0 20px; margin-bottom: 20px; }
  .v-overlap__box > .v-sec-head .v-eyebrow { margin-bottom: 0; }

  /* La grilla de destacados pasa a riel horizontal */
  .v-overlap .v-grid {
    display: flex;
    gap: var(--v-gap-sm);
    overflow-x: auto;
    padding-bottom: 10px;
    margin: 0 calc(var(--v-gutter-sm) * -1);
    padding-left: var(--v-gutter-sm);
    padding-right: var(--v-gutter-sm);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .v-overlap .v-grid::-webkit-scrollbar { display: none; }
  .v-overlap .v-grid > * { flex: 0 0 72vw; scroll-snap-align: start; }

  .v-rail                { margin: 0 calc(var(--v-gutter-sm) * -1); padding-left: var(--v-gutter-sm); padding-right: var(--v-gutter-sm); }
  .v-rail > *,
  .v-rail .v-card        { flex-basis: 72vw; }
}


/* ── 21. Neutralización de las secciones viejas de la home ───────────────── */

/* .recent-project, .service5, .we-are, .client-say, .our-process2 y
   .recent-news ya no se emiten desde index.tpl. Sus reglas siguen vivas en
   style.css para otras páginas; acá solo se anula lo que molestaría si un
   template las reintrodujera. */
.v-sec .section-title::after,
.v-sec .title-2::after,
.v-sec .under-title-2 { display: none; }


/* ── 22. Piezas de las secciones de la home ──────────────────────────────── */

.v-band__bg {
  position: absolute;
  top: -14%;
  left: 0;
  width: 100%;
  height: 128%;
  will-change: transform;
}

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

/* Banda sin foto: fondo sólido de marca. Se usa en la de salones hasta que
   haya una foto de salón en el theme (ver informe 1.4, pendientes). */
.v-band--solid { background: var(--v-ink); }
.v-band--solid::after { display: none; }

.v-band__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.v-band--center .v-band__cta { justify-content: center; }

/* Sobre nosotros: dos columnas con parallax sutil en la imagen */
.v-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.v-about__img {
  position: relative;
  aspect-ratio: 4 / 3.2;
  border-radius: var(--v-r-block);
  overflow: hidden;
}

.v-about__img img {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  will-change: transform;
}

.v-about__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }

/* Grillas de tres columnas para servicios y blog */
.v-grid-svcs,
.v-grid-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* Testimonios: owl sigue manejando el carrusel, pero las cards son las nuevas.
   owl envuelve cada hijo en .owl-item, así que la altura se estira desde ahí. */
.v-quotes .owl-stage { display: flex; }
.v-quotes .owl-item { display: flex; height: auto; }
.v-quotes .owl-item > .v-quote { width: 100%; }

.v-quotes .owl-dots { margin-top: 28px; text-align: center; }

.v-quotes .owl-dot span,
.v-quotes .owl-dot.active span,
.v-quotes .owl-dot:hover span {
  width: 26px !important;      /* !important puntual: style.css:624 y :653 lo fijan */
  height: 2px !important;
  margin: 0 4px !important;
  border: 0 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  background: var(--v-line) !important;
}

.v-quotes .owl-dot.active span { background: var(--v-brass) !important; }

.v-quotes .owl-nav { display: none; }

@media (max-width: 1080px) {
  .v-about        { grid-template-columns: 1fr; gap: 36px; }
  .v-grid-svcs,
  .v-grid-posts   { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .v-band__cta    { flex-direction: column; align-items: stretch; }
  .v-band__cta .v-btn { justify-content: center; }
}


/* ── 23. Ajustes finales de la 1.4 ───────────────────────────────────────── */

/* style.css:360-372 pone TODOS los encabezados en mayúsculas. Los títulos del
   cliente tienen que verse como él los escribió: "¿Cuero o tela? Pros y
   contras", no "¿CUERO O TELA? PROS Y CONTRAS". */
h1, h2, h3, h4, h5, h6 { text-transform: none; }

/* .blog-title > a lo fuerza con !important (style.css:2683) */
.v-post h3,
.v-post h3 a,
.v-svc h3,
.v-card__name,
.v-card__name a { text-transform: none !important; }

/* Los indicadores del hero: slick-theme le da al button un fondo y un
   contorno propios que asomaban como un óvalo alrededor de la barrita. */
.v-hero .slick-dots li button,
.v-hero .slick-dots li.slick-active button,
.v-hero .slick-dots li button:focus,
.v-hero .slick-dots li button:hover {
  /* !important puntual: slick-theme le pone al dot activo un contorno propio
     que asomaba como un óvalo alrededor de la barrita. */
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.v-hero .slick-dots li button:focus-visible {
  outline: 2px solid var(--v-brass);
  outline-offset: 4px;
}

/* Los rieles cortan a la derecha para insinuar que hay más: se les da un
   respiro al final para que la última card no quede pegada al borde. */
.v-rail::after {
  content: "";
  flex: 0 0 1px;
}


/* ============================================================================
   CORRECCIONES POST-BLOQUE 1
   ============================================================================ */

/* ── 24. Color de los links de la capa ───────────────────────────────────────
   style.css:88-92 declara `a:link, a:visited { color:#444444 }`. Una
   pseudo-clase cuenta como clase, así que ese selector vale (0,1,1) y le gana
   a cualquier clase simple de esta capa, que vale (0,1,0). Resultado: todo
   .v-btn que fuera un <a> se pintaba #444 — sobre una banda oscura, ilegible.

   Se replica el selector con :link/:visited para empatar en especificidad y
   ganar por orden de carga. Solo hace falta en los componentes cuya clase es
   simple; los que ya tenían un descendiente (.v-footer a, .v-nav a...) ya
   empataban y ganaban.                                                      */

/* Todo lo que incluya :visited va con el color literal, por lo mismo que se
   explica en §9 (los motores que no resuelven custom properties en el estilo
   de un link visitado lo mandan al lavanda del navegador). #FFFFFF es
   --v-paper y #14110F es --v-ink: si se tocan los tokens, tocar también acá. */
a.v-btn--solid, a.v-btn--solid:link, a.v-btn--solid:visited,
a.v-btn--ghost, a.v-btn--ghost:link, a.v-btn--ghost:visited,
a.v-btn--light, a.v-btn--light:link, a.v-btn--light:visited { color: #FFFFFF; }

a.v-btn--light, a.v-btn--light:link, a.v-btn--light:visited { color: #14110F; }

a.v-btn--line, a.v-btn--line:link, a.v-btn--line:visited,
a.v-link-more, a.v-link-more:link, a.v-link-more:visited,
a.v-icon-btn, a.v-icon-btn:link, a.v-icon-btn:visited,
a.v-logo, a.v-logo:link, a.v-logo:visited { color: #14110F; }

a.v-btn--solid:hover, a.v-btn--ghost:hover { color: var(--v-paper); }
a.v-btn--light:hover { color: var(--v-ink); }
a.v-btn--line:hover  { color: var(--v-ink); }
a.v-link-more:hover  { color: var(--v-brass); }

/* Sobre fondo oscuro TODO va en blanco: no hay grises intermedios que se
   pierdan contra una foto. Vale para cualquier link que caiga en una banda,
   en el hero o en el footer, sea o no un .v-btn. */
.v-band a, .v-band a:link, .v-band a:visited,
.v-hero a, .v-hero a:link, .v-hero a:visited { color: #FFFFFF; }

.v-band .v-btn--ghost,
.v-hero .v-btn--ghost { border-color: var(--v-paper); }

.v-band .v-btn--ghost:hover,
.v-hero .v-btn--ghost:hover { background: var(--v-paper); color: var(--v-ink); }

.v-band .v-link-more,
.v-hero .v-link-more { color: var(--v-paper); border-bottom-color: var(--v-brass); }

/* El footer es fondo oscuro: sus links ya son claros, pero el selector de
   style.css también los alcanzaba en el estado :visited. */
.v-footer a:link, .v-footer a:visited { color: #A9A49C; }
.v-footer a:hover { color: var(--v-paper); }
.v-footer .v-logo, .v-footer .v-logo:link { color: var(--v-paper); }

/* La barra de acciones de la card es oscura sobre la foto */
.v-card__quick > a:link, .v-card__quick > a:visited { color: #FFFFFF; }

/* Nombre de producto y notas del blog */
.v-card__name a:link, .v-card__name a:visited { color: #14110F; }
a.v-post, a.v-post:link, a.v-post:visited { color: #14110F; }


/* ── 25. Estrellas de los testimonios ────────────────────────────────────── */

.v-quote__stars {
  display: flex;
  gap: 3px;
  margin: 0 0 16px;
  color: var(--v-brass);
  font-size: 12px;
  line-height: 1;
}

.v-quote__stars i { color: var(--v-brass); }


/* ── 26. Carruseles owl con la card nueva ────────────────────────────────────
   Los bloques de sofatería, mesas y outdoors vuelven a ser carruseles con el
   mismo mecanismo de siempre: owl-carousel, inicializado por main.js sobre
   #owl-destacados, #owl-mesas y #owl-outdoors. Solo cambia la card de adentro. */

/* Carril lateral propio para las flechas: si no, quedan montadas sobre la
   primera y la última card. owl calcula el ancho del stage dentro del padding,
   así que las cards no lo invaden. */
.v-carousel { position: relative; padding: 0 56px; }

/* Recorta dentro del carril: si no, la card siguiente asoma por debajo de las
   flechas y se ve un pedazo de texto cortado. */
.v-carousel .owl-stage-outer { overflow: hidden; }

.v-carousel .owl-stage { display: flex; }
.v-carousel .owl-item  { display: flex; height: auto; }
.v-carousel .owl-item > .item { display: flex; width: 100%; }
.v-carousel .owl-item .v-card { display: flex; flex-direction: column; width: 100%; }
.v-carousel .owl-item .v-card__body { flex: 1 1 auto; }

/* Flechas: circulares, negras, fuera del área de la card.
   OJO: la versión de owl del sitio renderiza las flechas como <div class="owl-prev">,
   no como <button>. Las reglas anteriores apuntaban a `button.owl-prev` y nunca
   aplicaron: lo que se veía era owl.theme.default (negro, radio 1px, cuadrado).
   Se mantiene el negro, que es lo aprobado, y se redondea. */
.v-carousel .owl-nav { margin: 0; }

.v-carousel .owl-nav .owl-prev,
.v-carousel .owl-nav .owl-next {
  position: absolute;
  top: 38%;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  transform: none;                              /* style.css:7770 lo centra con translateY */
  border: 0 !important;                          /* owl.theme lo fija */
  border-radius: var(--v-r-pill) !important;
  background: var(--v-ink) !important;
  color: var(--v-paper) !important;
  font-size: 14px;
  line-height: 1;
  transition: background var(--v-t-fast) ease;
}

.v-carousel .owl-nav .owl-prev { left: 0; }
.v-carousel .owl-nav .owl-next { right: 0; }

.v-carousel .owl-nav .owl-prev:hover,
.v-carousel .owl-nav .owl-next:hover { background: var(--v-ink-hover) !important; }

.v-carousel .owl-nav .owl-prev.disabled,
.v-carousel .owl-nav .owl-next.disabled { opacity: .35; }

/* Puntos: barritas, igual que el hero */
.v-carousel .owl-dots { margin-top: 26px; text-align: center; }

/* style.css:624 y :653 le dan al dot un borde de 2px, forma circular y un
   box-shadow de 2px. Hay que anular las tres, no solo el fondo. */
.v-carousel .owl-dot span,
.v-carousel .owl-dot.active span,
.v-carousel .owl-dot:hover span {
  width: 26px !important;
  height: 2px !important;
  margin: 0 4px !important;
  border: 0 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  background: var(--v-line) !important;
}

.v-carousel .owl-dot.active span { background: var(--v-brass) !important; }

@media (max-width: 1080px) {
  .v-carousel { padding: 0 48px; }
}

@media (max-width: 640px) {
  .v-carousel      { padding: 0; }
  .v-carousel .owl-nav { display: none; }   /* en touch se pasa deslizando */
}


/* ============================================================================
   AJUSTES 2026-09-01
   ============================================================================ */

/* ── 27. Altura real del slider ──────────────────────────────────────────────
   Los slides se suben con proporción fija: 1920x500 en desktop y 500x600 en
   mobile, ya con el encuadre correcto. Así que la imagen se muestra COMPLETA:
   ni `cover` recortando, ni una altura de viewport que la estire.
   `width:100%; height:auto` respeta la proporción de origen y deja el slider
   corto, para que el carrusel de destacados entre en pantalla de entrada.    */

.v-hero {
  height: auto;                     /* antes: min(80vh, 680px) */
  background: var(--v-paper);       /* sin fondo oscuro: asomaría bajo la grilla */
}

.v-hero .slider-principal,
.v-hero .slick-list,
.v-hero .slick-track { height: auto; }

/* slick-theme le da a .slick-slider un margin-bottom de 30px, y el <img>
   inline agrega el hueco del line-height. Los dos dejaban una franja del hero
   asomando por debajo de la imagen, justo donde monta la grilla. */
.v-hero .slider-principal { margin-bottom: 0; }
.v-hero .slick-slide,
.v-hero .slick-slide > div { line-height: 0; font-size: 0; }

.v-hero .slider-principal img {
  display: block;
  width: 100%;
  height: auto;                     /* la proporción la define la imagen */
  max-height: 500px;                /* tope: la altura con la que se suben */
  object-fit: contain;
  margin: 0 auto;
}

/* El degradado se acota a la mitad izquierda para no ensuciar un banner bajo */
.v-hero::after {
  background: linear-gradient(90deg, rgba(10, 8, 7, .45) 0%, rgba(10, 8, 7, .12) 40%, rgba(10, 8, 7, 0) 65%);
}

/* Con el slider más bajo, la monta de la grilla y el pie se recalibran.
   El -96px va encerrado en min-width: suelto pisaba el reset móvil de §19
   (misma especificidad, más abajo) y el bloque volvía a montarse 96px sobre
   el slider, encima con radio 0. */
.v-hero__foot { bottom: 128px; }
@media (min-width: 641px) {
  .v-overlap  { margin-top: -96px; }
}

@media (max-width: 640px) {
  .v-hero,
  .v-hero .slider-principal,
  .v-hero .slider-principal img { height: auto; max-height: none; }
  .v-hero__foot { bottom: 14px; }
}


/* ── 28. Jerarquía de precio en la card ──────────────────────────────────────
   De mayor a menor peso: cuotas → efectivo con su OFF → precio de lista.
   El precio de lista se achica y baja, pero nunca desaparece (Ley de Lealtad
   Comercial). Todo el bloque tolera que falte cualquiera de las tres partes.  */

.v-card__body {
  display: flex;
  flex-direction: column;
  padding: 18px 4px 0;
}

/* Alineación pareja entre cards con nombres de distinto largo: en vez de
   reservar dos líneas en el nombre (que deja un hueco cuando ocupa una sola),
   el bloque de precio se empuja al pie. Las cards ya se estiran a la misma
   altura dentro de .owl-item y de la grilla del catálogo. */
.v-card__body { flex: 1 1 auto; }

.v-price {
  margin: 12px 0 0 !important;   /* pisa el margin-bottom de .pro__price (style.css:4476) */
  margin-top: auto !important;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* 1º — las cuotas, lo que tiene que saltar a la vista */
.v-price__fees {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0 !important;
  font-family: var(--v-font-text);
  color: var(--v-brass) !important;   /* pisa el verde de style.css:9234 */
  font-weight: 400;
}

.v-price__fees-label  { font-size: 13px; letter-spacing: .02em; }
.v-price__fees-amount { font-size: 23px; font-weight: 400; line-height: 1.15; }

/* 2º — el precio de contado, con su píldora de descuento */
.v-price__cash {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 2px 0 0 !important;
}

.v-price__cash-amount {
  font-family: var(--v-font-text);
  font-size: 16px !important;
  font-weight: 400;
  color: var(--v-ink) !important;
  margin: 0 !important;
}

.v-price__off {
  display: inline-block;
  padding: 1px 9px !important;
  border-radius: var(--v-r-pill) !important;
  background: var(--v-bone) !important;
  color: var(--v-brass) !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  letter-spacing: .08em;
  line-height: 1.7;
  white-space: nowrap;
}

.v-price__cash-label {
  display: block !important;
  width: 100%;
  font-size: 11px !important;
  letter-spacing: .06em;
  color: var(--v-slate) !important;
  margin: 0;
}

/* 3º — el precio de lista: el más chico y el último */
.v-price__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
  margin: 6px 0 0 !important;
}

.v-price__list-amount {
  display: inline !important;
  font-family: var(--v-font-text);
  font-size: 13px !important;
  font-weight: 300 !important;
  color: var(--v-slate) !important;
}

.v-price__list-old {
  display: inline !important;
  margin: 0 !important;
  font-size: 12px !important;
  color: var(--v-slate) !important;
  opacity: .7;
  text-decoration: line-through;
}

.v-card__body .price-consult {
  margin-top: 12px;
  font-size: 17px;
  color: var(--v-ink);
}

@media (max-width: 640px) {
  .v-price__fees-amount  { font-size: 19px; }
  .v-price__fees-label   { font-size: 12px; }
  .v-price__cash-amount  { font-size: 14px !important; }
  .v-price__list-amount  { font-size: 12px !important; }
  /* (2026-09-14) Se quitó el min-height de dos líneas del nombre: con un
     nombre de una línea dejaba un hueco de ~21px entre el nombre y las
     cuotas. La alineación entre cards la da el estirado del .owl-item. */
}


/* ── 29. Bandas: legibilidad del texto sobre la foto ─────────────────────── */

/* Con foto de fondo el degradado tiene que ser más firme que sobre un color
   plano, sobre todo en la banda centrada, donde el texto cruza toda la caja. */
/* La foto de fondo tiene zonas claras (un sofá beige a plena luz) justo donde
   cae la lista. El degradado tiene que sostener el texto hasta pasada la mitad
   del ancho, no sólo en el borde izquierdo. */
.v-band::after {
  background:
    linear-gradient(90deg, rgba(10, 8, 7, .92) 0%, rgba(10, 8, 7, .86) 32%, rgba(10, 8, 7, .55) 62%, rgba(10, 8, 7, .22) 100%),
    rgba(10, 8, 7, .18);
}

.v-band--center::after {
  background:
    linear-gradient(180deg, rgba(10, 8, 7, .55) 0%, rgba(10, 8, 7, .72) 100%),
    rgba(10, 8, 7, .28);
}


/* ── 30. Ajustes finos de card y secciones (2026-09-01) ──────────────────── */

/* 1. Los títulos de los carruseles de producto son rótulos de sección, no
   titulares: no tienen que competir con la marca ni con los productos.
   Los titulares grandes se reservan para las bandas y los bloques de
   contenido (Funcionalidades Destacadas, Nuestras Sucursales, Novedades). */
.v-title--rotulo {
  font-family: var(--v-font-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .04em;
  color: var(--v-ink);
}

/* Con el título más chico, el eyebrow encima duplicaba jerarquía en el mismo
   bloque: se lo achica y se ajusta el aire entre los dos. */
.v-sec-head .v-title--rotulo { margin-top: 2px; }

/* 4. "18 cuotas de" tiene que leerse junto al monto, como una sola frase.
   Antes eran 13px contra 23px y la etiqueta se perdía. */
.v-price__fees {
  gap: 7px;
  line-height: 1.2;
}

.v-price__fees-label {
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: .01em;
  opacity: .95;
}

.v-price__fees-amount {
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -.01em;
}

/* 2. El precio de lista, rotulado. La etiqueta ocupa su propia línea para que
   el monto no quede a merced del ancho de la card. */
.v-price__list {
  display: block;
  margin: 10px 0 0 !important;
  padding-top: 9px;
  border-top: 1px solid var(--v-line);
}

.v-price__list-label {
  display: block;
  margin-bottom: 1px;
  font-family: var(--v-font-text);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v-slate);
  opacity: .85;
}

.v-price__list-amount,
.v-price__list-old { vertical-align: baseline; }

/* 3 y 5. Sin la línea de agrupación, el ritmo vertical se recalibra: el nombre
   respira arriba y el bloque de precio arranca más cerca. */
.v-card__body { padding: 16px 4px 0; }

.v-card__name { margin-bottom: 0; }

.v-price {
  margin-top: 10px !important;
  gap: 2px;
}

/* La alineación entre cards con nombres de una y dos líneas se sostiene con el
   margin-top:auto del bloque de precio (§28); acá sólo se garantiza que la
   card estire en los cuatro contextos donde se usa. */
.v-grid > .v-card,
.v-grid--3 > .v-card,
.owl-item .v-card,
.pro__item .v-card { height: 100%; }

@media (max-width: 640px) {
  .v-title--rotulo        { font-size: 15px; }
  .v-price__fees-label    { font-size: 13px; }
  .v-price__fees-amount   { font-size: 18px; }
  .v-price__list-label    { font-size: 9.5px; }
  .v-card__body           { padding-top: 14px; }
}

/* Aire entre el eyebrow y el rótulo: con el título ya en tamaño de rótulo,
   pegados se leían como dos etiquetas compitiendo. */
.v-sec-head .v-eyebrow { margin-bottom: 10px; }
.v-sec-head .v-title--rotulo { margin-top: 0; }


/* ============================================================================
   PASE GLOBAL — estética del restyling en todo el sitio
   ----------------------------------------------------------------------------
   Estos patrones se repiten en las ~25 páginas internas, así que se resuelven
   una vez acá en vez de tocar 25 templates. Los ajustes específicos de cada
   sección van después, en sus propios bloques.
   ============================================================================ */

/* ── 31. Cabecera de página (breadcrumb) ─────────────────────────────────────
   Todas las páginas internas abren con:
     <section class="navigation" style="margin-top:85px"><div class="bg-black">
       <h2>{$SectionTitle}</h2><ul class="breadcrumbs">…
   El margin-top inline compensaba el header fixed; con el header sticky sobra
   y es el hueco blanco que quedaba bajo la barra. La banda negra se va: el
   breadcrumb pasa a texto chico sobre blanco.                                */

.page-wrap .navigation {
  margin-top: 0 !important;         /* pisa el style inline de 85px */
  margin-bottom: 34px;
  padding: 0;
  background: var(--v-crumb-bg);
}

.page-wrap .navigation .bg-black,
.page-wrap .navigation .bg-black-2,
.page-wrap .navigation .overlay {
  background: transparent !important;
  background-image: none !important;
  padding: 0;
}

.page-wrap .navigation .container { padding-top: 26px; padding-bottom: 24px; }

/* El título de la página: es el h2 del breadcrumb, y en la mayoría de las
   páginas internas es el título real de la sección. */
.page-wrap .navigation h2 {
  margin: 0 0 8px;
  font-family: var(--v-font-display);
  font-size: clamp(24px, 2.4vw, 30px);   /* antes 28-42px: competía con el contenido */
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--v-crumb-active);
  text-transform: none;
}

.page-wrap .navigation h2::after,
.page-wrap .navigation h2::before { display: none; }

.page-wrap .breadcrumbs {
  margin: 0;
  padding: 0;
  font-family: var(--v-font-text);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.page-wrap .breadcrumbs li,
.page-wrap .breadcrumbs span {
  display: inline-block;
  color: var(--v-crumb-text);
  padding: 0;
  margin: 0 3px;
}

.page-wrap .breadcrumbs li a,
.page-wrap .breadcrumbs li a:link,
.page-wrap .breadcrumbs li a:visited { color: #666666; }   /* = --v-crumb-text, literal por :visited */
.page-wrap .breadcrumbs li a:hover { color: var(--v-crumb-active); }
.page-wrap .breadcrumbs li.active { color: var(--v-crumb-active); font-weight: 400; }

/* La cabecera está oculta en mobile con d-none d-sm-block: se muestra, porque
   ahora es liviana y da contexto. */
@media (max-width: 575px) {
  .page-wrap section.navigation.d-none { display: block !important; }
  .page-wrap .navigation .container { padding-top: 20px; padding-bottom: 18px; }
  .page-wrap .navigation { margin-bottom: 26px; }
  .page-wrap .breadcrumbs { font-size: 13px; }
}


/* ── 32. Botones del sitio (.au-btn) ─────────────────────────────────────────
   Es el botón de todo el theme: aparece en formularios, listados, blog,
   carrito y checkout. Pasa a píldora.                                        */

.page-wrap .au-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: auto;
  min-height: 0;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--v-r-pill);
  background: var(--v-ink);
  color: var(--v-paper);
  font-family: var(--v-font-text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none;
  transition: background var(--v-t-fast) ease, border-color var(--v-t-fast) ease, color var(--v-t-fast) ease;
}

.page-wrap a.au-btn:link,
.page-wrap a.au-btn:visited { color: #FFFFFF; }

.page-wrap .au-btn:hover,
.page-wrap .au-btn:focus,
.page-wrap a.au-btn:hover { background: var(--v-ink-hover); color: var(--v-paper); border-color: transparent; }

.page-wrap .au-btn--small { padding: 10px 20px; font-size: 12px; }
.page-wrap .au-btn--big   { padding: 15px 34px; }

/* Las variantes claras del theme pasan a botón de borde */
.page-wrap .au-btn--white,
.page-wrap .au-btn--border,
.page-wrap .au-btn--gray {
  background: transparent;
  border-color: var(--v-line);
  color: var(--v-ink);
}

.page-wrap a.au-btn--white:link,   .page-wrap a.au-btn--white:visited,
.page-wrap a.au-btn--border:link,  .page-wrap a.au-btn--border:visited,
.page-wrap a.au-btn--gray:link,    .page-wrap a.au-btn--gray:visited { color: #14110F; }

.page-wrap .au-btn--white:hover,
.page-wrap .au-btn--border:hover,
.page-wrap .au-btn--gray:hover { background: transparent; border-color: var(--v-ink); color: var(--v-ink); }

/* Sobre fondo oscuro siguen siendo blancos */
.v-band .au-btn, .v-footer .au-btn { border-color: var(--v-paper); color: var(--v-paper); background: transparent; }

/* OJO: la clase .btn-ks-disabled queda puesta SIEMPRE en el markup; lo que
   cambia es el atributo [disabled], que el JS del sitio pone y saca. Aplicar
   el estado deshabilitado por la clase sola dejaba #addToCartButton y
   #resetFilters muertos para siempre (pointer-events:none), incluso después
   de habilitarse. Se replica la condición de style.css:7521. */
.page-wrap button.btn-ks-disabled[disabled],
.page-wrap a.btn-ks-disabled[disabled],
.page-wrap .btn-ks-disabled[disabled] { opacity: .5; pointer-events: none; }


/* ── 33. Títulos de sección del theme ────────────────────────────────────── */

/* Estos son encabezados DENTRO del contenido, no el título de la página: ese
   es el h2 del breadcrumb. Se los baja para que no compitan — en varias
   páginas (las políticas, por ejemplo) repiten literalmente el mismo texto. */
.page-wrap .title-2,
.page-wrap .title--36,
.page-wrap .section-title {
  font-family: var(--v-font-display);
  font-weight: 300;
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--v-ink);
  text-transform: none;
}

/* Las barritas decorativas bajo los títulos se van: la jerarquía la dan el
   espacio y la tipografía. */
.page-wrap .under-title-2,
.page-wrap .section-title::after,
.page-wrap .title-2::after { display: none !important; }

.page-wrap .section-subtitle {
  font-family: var(--v-font-text);
  font-size: 16px;
  font-weight: 300;
  color: var(--v-slate);
  margin-top: 12px;
}

.page-wrap h5 { font-size: 19px; font-weight: 400; }


/* ── 34. Formularios ─────────────────────────────────────────────────────────
   Un solo estilo de campo para todo el sitio: contacto, post-venta, encuesta,
   checkout, buscadores. NO se toca ningún `name`, ni el honeypot, ni el
   reCAPTCHA, ni la validación de koshkil.                                    */

.page-wrap input[type="text"],
.page-wrap input[type="email"],
.page-wrap input[type="tel"],
.page-wrap input[type="number"],
.page-wrap input[type="password"],
.page-wrap input[type="date"],
.page-wrap input[type="search"],
.page-wrap textarea,
.page-wrap select,
.page-wrap .form__input {
  width: 100%;
  height: auto;
  padding: 13px 18px;
  border: 1px solid var(--v-line);
  border-radius: var(--v-r-card);
  background: var(--v-paper);
  box-shadow: none;
  font-family: var(--v-font-text);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--v-ink);
  transition: border-color var(--v-t-fast) ease;
}

.page-wrap textarea { min-height: 140px; resize: vertical; }

.page-wrap input:focus,
.page-wrap textarea:focus,
.page-wrap select:focus,
.page-wrap .form__input:focus {
  outline: none;
  border-color: var(--v-ink);
}

/* Un solo placeholder para todo el sitio: checkout, contacto, post-venta,
   encuesta, pago y los buscadores de catálogo y blog.
   Sin `opacity`: con .8 el --v-slate declarado se pintaba #8B8883 y quedaba en
   3.53 de contraste sobre blanco, por debajo de AA. El token ya viene con el
   contraste que hace falta (7.06), y sigue muy lejos del texto tipeado
   (--v-ink, 18.80): no se confunde un placeholder con un dato cargado. */
.page-wrap input::placeholder,
.page-wrap textarea::placeholder { color: var(--v-placeholder); opacity: 1; }

/* El mismo criterio para los select de los formularios. Todos arrancan con un
   <option value=""> a modo de placeholder ("Seleccionar", "Elegir Respuesta",
   "Seleccione una provincia") y son `required`, así que mientras no se eligió
   nada el select está :invalid: ahí va el color de placeholder, y en cuanto
   hay una opción elegida el valor pasa a --v-ink como el texto tipeado de un
   input. Sin esto, el rótulo inicial se veía igual que un dato ya cargado.
   No alcanza a los filtros del catálogo (.order-by), que no son campos de un
   formulario: su rótulo es permanente y ya está en #333. */
.page-wrap select:required:invalid { color: var(--v-placeholder); }

.page-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 50%, var(--v-slate) 50%), linear-gradient(135deg, var(--v-slate) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.page-wrap label {
  font-family: var(--v-font-text);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--v-slate);
  margin-bottom: 7px;
}

.page-wrap .form-group,
.page-wrap .form__group { margin-bottom: 18px; }

/* El error de validación de koshkil/validate.js: se conserva la clase */
.page-wrap .error,
.page-wrap label.error { color: #B3261E; text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.page-wrap input.error, .page-wrap textarea.error, .page-wrap select.error { border-color: #B3261E; }

/* Botón dentro del buscador del sidebar */
.page-wrap .search-button__btn,
.page-wrap button[type="submit"].au-btn { cursor: pointer; }


/* ── 35. Tablas (carrito, checkout) ──────────────────────────────────────── */

.page-wrap .table,
.page-wrap table.table {
  width: 100%;
  margin-bottom: 0;
  font-family: var(--v-font-text);
  font-size: 15px;
  font-weight: 300;
  color: var(--v-ink);
  border-color: var(--v-line);
}

.page-wrap .table th {
  padding: 14px 12px;
  border: 0;
  border-bottom: 1px solid var(--v-line);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--v-slate);
  background: transparent;
}

.page-wrap .table td {
  padding: 18px 12px;
  border: 0;
  border-bottom: 1px solid var(--v-line);
  vertical-align: middle;
  background: transparent;
}

.page-wrap .table tr:last-child td { border-bottom: 0; }
.page-wrap .table img { border-radius: var(--v-r-card); }


/* ── 36. Secciones y contenedores genéricos ──────────────────────────────── */

.page-wrap .about-us,
.page-wrap .our-process,
.page-wrap .our-process3,
.page-wrap .contact,
.page-wrap .contact-2 { position: relative; }

/* Los bloques de texto largo (políticas, manual, sobre nosotros) con medida
   de línea cómoda */
.page-wrap .about-us p,
.page-wrap .justificado p,
.page-wrap .garantia li {
  font-family: var(--v-font-text);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--v-ink);
}

.page-wrap .justificado { text-align: left; }

.page-wrap ul.garantia { padding-left: 20px; }
.page-wrap ul.garantia li { margin-bottom: 10px; }

/* Cajas con borde duro del theme → esquinas y línea fina */
.page-wrap .box,
.page-wrap .panel,
.page-wrap .card,
.page-wrap .well {
  border-radius: var(--v-r-card);
  border-color: var(--v-line);
  box-shadow: none;
}


/* ── 37. Catálogo ────────────────────────────────────────────────────────── */

.page-wrap .pro-list-wrap { padding-bottom: 80px; }

/* El banner de cabecera (galería 134). Es un <img> suelto, hijo directo de la
   columna del listado y sin clase propia, así que se lo apunta por ahí: las
   reglas anteriores buscaban clases que no tiene y no llegaban a aplicarse.
   Hay dos versiones, desktop y mobile, con las clases de Bootstrap. */
.page-wrap .pro-list-wrap .col-lg-9 > img,
.page-wrap .pro-list-wrap .col-md-9 > img,
.page-wrap .pro-list-wrap .banner-categoria,
.page-wrap .banner-top img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--v-r-banner);
  overflow: hidden;
}

/* Sidebar */
.page-wrap .blog-sidebar { margin-top: 0 !important; }

.page-wrap .title-sidebar,
.page-wrap .blog-sidebar h4 {
  margin: 0 0 16px;
  font-family: var(--v-font-text);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--v-slate);
}

.page-wrap .title-sidebar::after,
.page-wrap .blog-sidebar h4::after { display: none; }

.page-wrap .blog__cate-2,
.page-wrap .blog__cate { margin: 0 0 34px; padding: 0; }

.page-wrap .blog__cate-2 > li > a,
.page-wrap .blog__cate > li > a {
  display: block;
  padding: 9px 0;
  border-bottom: 1px solid var(--v-line);
  font-family: var(--v-font-text);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--v-ink);
}

.page-wrap .blog__cate-2 > li > a::before,
.page-wrap .blog__cate > li > a::before { display: none; }

.page-wrap .blog__cate-2 > li > a:hover,
.page-wrap .blog__cate-2 > li > a.active { color: var(--v-brass); margin-left: 0; }

.page-wrap .blog__recent-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.page-wrap .blog__recent-item .img { flex: 0 0 66px; float: none !important; }
.page-wrap .blog__recent-item .img img { width: 66px; height: 54px; object-fit: cover; border-radius: 12px; }
.page-wrap .blog__recent-item .text h6 { margin: 0; font-family: var(--v-font-text); font-size: 13px; font-weight: 400; line-height: 1.4; }

.page-wrap .blog__search .search-form { position: relative; }
.page-wrap .blog__search .search-form button {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: var(--v-r-pill);
  background: transparent;
  color: var(--v-slate);
  cursor: pointer;
}

/* Barra de orden y filtros */
.page-wrap .pro-sorting {
  padding: 0 0 22px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--v-line);
  background: transparent;
}

.page-wrap .sort-right { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; float: none !important; }

/* Los seis filtros son el MISMO elemento con el MISMO selector: <select> nativo.
   No hay nada que emparejar a mano — comparten alto, tipografía, padding,
   flecha y hover por construcción. #categoria conserva su data-url y su
   navegación; sólo comparte la presentación. */
.page-wrap select.order-by {
  width: auto;
  min-width: 0;
  padding: 0 30px 0 15px;
  border-radius: var(--v-r-pill);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: none;
  /* Un <select> nativo se dimensiona por su opción más larga: #tamano pedía
     255px por "3 Cuerpos + Chaise Longue". Se lo acota para que los seis
     controles entren completos en una sola fila, sin recortar el texto: con
     13px no daba el ancho de la columna. */
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
  max-width: 190px;
  text-overflow: ellipsis;
}

/* Grilla del listado: las columnas de Bootstrap se conservan (las usa la
   paginación AJAX), sólo se ajusta el aire. */
.page-wrap .pro-list .row { margin-left: -11px; margin-right: -11px; }
.page-wrap .pro-list .pro__item { padding-left: 11px; padding-right: 11px; }

.page-wrap .no-results p {
  font-family: var(--v-font-text);
  font-size: 15px;
  color: var(--v-slate);
}

@media (max-width: 991px) {
  .page-wrap .sort-right { width: 100%; }
  /* En mobile los seis controles hacen wrap natural a dos filas */
  .page-wrap select.order-by { flex: 1 1 46%; min-width: 0; }
  .page-wrap .pro-sorting .au-btn { flex: 1 1 46%; }
}

/* Una sola fila horizontal con los seis controles. El rótulo "Filtros:" del
   template encabeza arriba. Se anulan los floats de Bootstrap (pull-left /
   pull-right), que impedían alinearlos. */
.page-wrap .pro-sorting {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.page-wrap .pro-sorting .sort-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* El theme le da a cada .order-by un margin lateral de 13px: entre los seis
   controles sumaba 130px y los empujaba a una segunda fila. El gap del flex
   ya se encarga de la separación. */
.page-wrap .pro-sorting .sort-right > select,
.page-wrap .pro-sorting .sort-right > .au-btn { margin-left: 0; margin-right: 0; }

/* Alto único para los seis controles. El !important es puntual y va contra la
   regla `height: auto !important` del §39, que existe porque varios <select>
   del sitio traían alturas fijas del theme que cortaban el texto. */
.page-wrap .pro-sorting .sort-right > select.order-by { height: 42px !important; }

.page-wrap .pro-sorting .sort-left,
.page-wrap .pro-sorting .sort-right { float: none !important; width: 100%; }

.page-wrap .pro-sorting .sort-left p {
  margin: 0 0 14px;
  line-height: 1.4 !important;      /* pisa el line-height:40px inline */
  font-family: var(--v-font-text);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--v-slate);
}

.page-wrap .pro-sorting .sort-left p strong { font-weight: 400; }

.page-wrap .pro-sorting .sort-right { margin-top: 4px; }

/* El botón "Limpiar" usa .au-btn--yellow, que traía color propio. Se lo
   empareja al alto exacto de los <select> (42px) para que la fila cierre. */
.page-wrap .au-btn--yellow {
  background: transparent;
  border-color: var(--v-line);
  color: var(--v-ink);
}

.page-wrap .pro-sorting .au-btn {
  flex: 0 0 auto;
  height: 42px;
  padding: 0 20px;
  font-size: 11.5px;
  letter-spacing: .12em;
  line-height: 1 !important;      /* pisa el line-height:26px inline del template */
}

.page-wrap .au-btn--yellow:hover { background: transparent; border-color: var(--v-ink); color: var(--v-ink); }

/* El texto de las notas del sidebar necesita ocupar el ancho restante */
.page-wrap .blog__recent-item .text { flex: 1 1 auto; min-width: 0; }

/* style.css:5855-5862 le da al item de nota del sidebar un 40%/60% con float,
   que con el flex nuevo dejaba el título en una palabra por línea. */
.page-wrap .blog__recent .blog__recent-item .img,
.page-wrap .blog__recent .blog__recent-item .text {
  width: auto;
  float: none;
  margin-left: 0;          /* el margin-left:40% que dejaba el título en una palabra por línea */
  padding-left: 0;
}

.page-wrap .blog__recent .blog__recent-item .img { flex: 0 0 66px; }
.page-wrap .blog__recent .blog__recent-item .text { flex: 1 1 auto; min-width: 0; }


/* ── 38. Ficha de producto ───────────────────────────────────────────────────
   Sólo presentación. No se toca ningún id ni name: #variantes, #pro_codigo,
   #addToCartButton, el selector de cantidad de koshkil y el modal siguen
   exactamente como estaban, porque de ellos dependen producto.js y el
   agregado al carrito.                                                       */

.page-wrap .nombre-single {
  margin: 0 0 6px;
  font-family: var(--v-font-display);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--v-ink);
  text-transform: none;
}

/* El precio en la ficha, un escalón más grande que en la card */
.v-price--ficha { margin-top: 14px !important; }
.v-price--ficha .v-price__fees-label  { font-size: 16px; }
.v-price--ficha .v-price__fees-amount { font-size: 28px; }
.v-price--ficha .v-price__cash-amount { font-size: 19px !important; }
.v-price--ficha .v-price__off         { font-size: 11.5px !important; }
.v-price--ficha .v-price__list-amount { font-size: 14px !important; }
.v-price--ficha .v-price__list        { max-width: 320px; }

/* Galería: flexslider se conserva, sólo se redondea */
.page-wrap #slider.flexslider,
.page-wrap #carousel.flexslider {
  border: 0;
  border-radius: var(--v-r-block);
  background: var(--v-bone);
  box-shadow: none;
  margin-bottom: 14px;
}

.page-wrap #slider.flexslider .slides img { border-radius: var(--v-r-block); }

.page-wrap #carousel.flexslider {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.page-wrap #carousel.flexslider .slides img {
  border-radius: var(--v-r-card);
  border: 1px solid transparent;
  opacity: .55;
  transition: opacity var(--v-t-fast) ease, border-color var(--v-t-fast) ease;
}

.page-wrap #carousel .flex-active-slide img,
.page-wrap #carousel .slides img:hover { opacity: 1; border-color: var(--v-line); }

/* Panel de compra */
.page-wrap .single-product-form { margin-top: 26px; }

.page-wrap #variantes,
.page-wrap select.form-control {
  border-radius: var(--v-r-pill);
  padding: 13px 42px 13px 20px;
  font-size: 14px;
}

.page-wrap #addToCartButton,
.page-wrap [data-role="add-to-cart"] {
  width: 100%;
  /* el theme le daba margin-left:20px, que sumado al width:100% desbordaba
     el ancho de la página en mobile */
  margin: 20px 0 0;
  justify-content: center;
  padding: 17px 28px;
  border-radius: var(--v-r-pill);
  background: var(--v-ink);
  border-color: transparent;
  color: var(--v-paper);
  font-size: 13px;
  letter-spacing: .14em;
}

.page-wrap #addToCartButton:hover { background: var(--v-ink-hover); color: var(--v-paper); }

/* "Hablar con Asesor": diseño del botón de WhatsApp, abre el chat de Kommo
   (es un <button>, de ahí border:0 y cursor). Verde de WhatsApp, la única
   excepción de color de la paleta. */
.page-wrap .btn-asesor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 12px;
  padding: 16px;
  border: 0;
  border-radius: var(--v-r-pill);
  background: var(--v-whatsapp);
  color: var(--v-paper);
  font-family: var(--v-font-text);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.page-wrap .btn-asesor:hover { background: #1EBE5A; }
.page-wrap .btn-asesor:focus-visible { outline: 2px solid var(--v-brass); outline-offset: 3px; }

/* Selector de cantidad de koshkil/quantity.js: se conserva la mecánica */
.page-wrap .quantity,
.page-wrap .quantity-input,
.page-wrap .input-number {
  border-radius: var(--v-r-pill);
  border-color: var(--v-line);
}

/* Los PNG de grupo funcional del panel */
.page-wrap .imagenes-descuentos img { max-width: 54px; height: auto; }

/* Descripción y bloques de texto de la ficha */
.page-wrap .descripcion {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--v-line);
  font-family: var(--v-font-text);
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--v-ink);
}

.page-wrap .descripcion h5,
.page-wrap .descripcion h4 { font-size: 17px; margin-top: 22px; }

/* Tabs / acordeones de descripción extendida y medidas */
.page-wrap .nav-tabs { border-bottom: 1px solid var(--v-line); gap: 6px; }

.page-wrap .nav-tabs .nav-link,
.page-wrap .nav-tabs > li > a {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 12px 4px;
  margin-right: 22px;
  font-family: var(--v-font-text);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--v-slate);
  background: transparent;
}

.page-wrap .nav-tabs .nav-link.active,
.page-wrap .nav-tabs > li.active > a { color: var(--v-ink); border-bottom-color: var(--v-brass); background: transparent; }

.page-wrap .tab-content { padding-top: 22px; }

/* El modal "MI COMPRA" que se abre al agregar */
.page-wrap .modal-content { border: 0; border-radius: var(--v-r-block); overflow: hidden; }
.page-wrap .modal-header  { background: var(--v-ink) !important; border: 0; }
.page-wrap .modal-header .modal-title { color: var(--v-paper); font-family: var(--v-font-text); font-size: 12px; letter-spacing: .18em; }
.page-wrap .modal-footer  { border-top: 1px solid var(--v-line); }
.page-wrap .modal-footer .btn { border-radius: var(--v-r-pill) !important; padding: 12px 24px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.page-wrap .modal-footer .btn-secondary { background: transparent; border: 1px solid var(--v-line); color: var(--v-ink); }
.page-wrap .modal-footer .btn-primary,
.page-wrap .modal-footer a.btn { background: var(--v-ink); border-color: var(--v-ink); color: var(--v-paper); }

/* Los badges .label--small del theme (SALE / NUEVO) a píldora, igual que en
   la card. Reemplazan el rosa y el verde de style.css:4392-4430. */
.page-wrap .label--small {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: var(--v-r-pill);
  background: var(--v-ink);
  color: var(--v-paper);
  font-family: var(--v-font-text);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.page-wrap .label--small.pink,
.page-wrap .label--small.green { background: var(--v-ink); color: var(--v-paper); }

/* El select de variantes necesita aire para su texto largo */
.page-wrap #variantes { padding-top: 14px; padding-bottom: 14px; line-height: 1.4; height: auto; }


/* ── 39. Carrito y checkout ──────────────────────────────────────────────────
   Sólo presentación. Ningún name de campo ni id se toca: los usa
   checkout.js, koshkil/validate.js y el flujo de MercadoPago.               */

/* La cabecera de la tabla del carrito venía con fondo oscuro y texto blanco:
   se veía como una banda gris vacía. */
.page-wrap .table thead,
.page-wrap .table thead tr,
.page-wrap .table thead th,
.page-wrap table thead { background: transparent !important; }

.page-wrap .table thead th {
  color: var(--v-slate) !important;
  border-bottom: 1px solid var(--v-line);
}

/* Los <select> del sitio necesitan alto propio: varios traen line-height o
   height fijos del theme que cortaban el texto de la opción. */
.page-wrap select,
.page-wrap select.form-control,
.page-wrap select.order-by {
  height: auto !important;
  line-height: 1.5 !important;
}

/* Caja del resumen */
.page-wrap .cart-total,
.page-wrap .total-wrap,
.page-wrap .checkout-total {
  border: 1px solid var(--v-line);
  border-radius: var(--v-r-card);
  overflow: hidden;
}

/* La fila de total final, destacada */
.page-wrap .table tr:last-child td strong,
.page-wrap .total-final { font-weight: 400; font-size: 18px; }

/* Miniaturas de producto en el carrito */
.page-wrap .table img { max-width: 76px; height: auto; border-radius: 14px; }

/* La "x" de quitar ítem */
.page-wrap a[data-role="remove-item"],
.page-wrap .remove-item,
.page-wrap .cart-remove {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--v-r-pill);
  color: var(--v-slate);
  transition: background var(--v-t-fast) ease, color var(--v-t-fast) ease;
}

.page-wrap a[data-role="remove-item"]:hover,
.page-wrap .remove-item:hover { background: var(--v-bone); color: var(--v-ink); }

/* Selector de cantidad (koshkil/quantity.js: se conserva la mecánica) */
.page-wrap .quantity,
.page-wrap .qty-wrap,
.page-wrap .input-group {
  border-radius: var(--v-r-pill);
  overflow: hidden;
  border: 1px solid var(--v-line);
}

.page-wrap .quantity input,
.page-wrap input.quantity-input,
.page-wrap .input-group input {
  border: 0 !important;
  border-radius: 0;
  text-align: center;
  padding: 10px 6px;
}

/* Checkout: el formulario en dos columnas ya viene del grid de Bootstrap;
   acá sólo se ordena el aire y se respetan todos los name. */
.page-wrap .checkout-form .form-group,
.page-wrap form .form-group { margin-bottom: 16px; }

.page-wrap .checkout-step-title,
.page-wrap .checkout h4 {
  margin: 0 0 18px;
  font-family: var(--v-font-text);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--v-slate);
}

/* pagar.tpl: el SDK de MercadoPago busca sus campos por ID. No se toca
   ninguno; sólo heredan el estilo de input del §34. */
.page-wrap #form-checkout input,
.page-wrap .mp-form input { border-radius: var(--v-r-card); }

/* Los rótulos "Envío" y "TOTAL" del carrito quedaban montados sobre el borde
   de la caja de abajo. */
.page-wrap .cart-wrap h4,
.page-wrap .cart-wrap h5,
.page-wrap .shopping-cart h4,
.page-wrap .shopping-cart h5 { margin: 34px 0 14px; }

.page-wrap .table-responsive,
.page-wrap .table-wrap {
  border: 1px solid var(--v-line);
  border-radius: var(--v-r-card);
  overflow: hidden;
  margin-bottom: 8px;
}


/* ── 40. Blog: listado y nota ────────────────────────────────────────────── */

/* style.css:2683 fuerza uppercase con !important en los títulos de nota. Los
   títulos del cliente tienen que verse como él los escribió. */
.page-wrap .blog-title,
.page-wrap .blog-title > a,
.page-wrap .blog-title a { text-transform: none !important; }

.page-wrap .blog-title,
.page-wrap .blog-title > a {
  font-family: var(--v-font-display);
  font-size: 23px;
  font-weight: 300;
  line-height: 1.25;
  color: var(--v-ink);
}

.page-wrap .blog-item { margin-bottom: 48px; }

.page-wrap .img-blog,
.page-wrap .img-blog-3,
.page-wrap .blog-item .img-blog img {
  border-radius: var(--v-r-card);
  overflow: hidden;
}

.page-wrap .blog-item .img-blog img { display: block; width: 100%; }

/* La cápsula de fecha */
.page-wrap .date--blog3,
.page-wrap .date--blog {
  border-radius: var(--v-r-card);
  background: var(--v-ink);
  overflow: hidden;
}

.page-wrap .date--blog3__inner,
.page-wrap .date--blog3 p {
  font-family: var(--v-font-text);
  color: var(--v-paper);
  margin: 0;
}

.page-wrap .date--blog3 .day   { font-size: 20px; font-weight: 400; }
.page-wrap .date--blog3 .month { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }

.page-wrap .author,
.page-wrap .blog-content .author {
  font-family: var(--v-font-text);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--v-brass);
  font-style: normal;
}

.page-wrap .author em { font-style: normal; }

/* Detalle de nota: medida de línea cómoda para lectura */
.page-wrap .blog-detail,
.page-wrap .blog-single { font-size: 16.5px; line-height: 1.8; }

.page-wrap .blog-detail p,
.page-wrap .blog-single p { margin-bottom: 20px; }

/* Productos destacados del sidebar del blog */
.page-wrap .pro__item-mini,
.page-wrap .blog__product img { border-radius: 14px; }


/* ── 41. Sucursales, puntos de venta y galería ───────────────────────────── */

.page-wrap .sucursal,
.page-wrap .sucursal-item,
.page-wrap .local-item,
.page-wrap .punto-venta {
  border: 1px solid var(--v-line);
  border-radius: var(--v-r-card);
  overflow: hidden;
}

.page-wrap .sucursal img,
.page-wrap .sucursal-item img { display: block; width: 100%; }

/* Las cajas de sucursal que en el theme sólo tienen borde */
.page-wrap .col-md-4 > .box-sucursal,
.page-wrap .contact-info { border-radius: var(--v-r-card); }

/* Galería e imágenes de contenido: mismas esquinas que el resto */
.page-wrap .galeria img,
.page-wrap .gallery img,
.page-wrap .lightbox img,
.page-wrap a[data-lightbox] img,
.page-wrap .about-us img,
.page-wrap .we-are img { border-radius: var(--v-r-card); }

.page-wrap .galeria .col-md-4,
.page-wrap .gallery .col-md-4 { margin-bottom: 24px; }


/* ── 42. 404 ─────────────────────────────────────────────────────────────── */

.page-wrap .error-404,
.page-wrap .page-404 { padding: 80px 0; }

.page-wrap .error-404 h1,
.page-wrap .error-404 .title-404,
.page-wrap .page-404 h1 {
  font-family: var(--v-font-display);
  font-weight: 300;
  color: var(--v-ink);
}


/* ── 43. Encuesta, post-venta y formularios largos ───────────────────────── */

.page-wrap .encuesta .form-group,
.page-wrap .pregunta { margin-bottom: 26px; }

.page-wrap input[type="radio"],
.page-wrap input[type="checkbox"] {
  width: auto;
  height: auto;
  margin-right: 8px;
  accent-color: var(--v-brass);
}

.page-wrap .form-check,
.page-wrap .radio,
.page-wrap .checkbox { margin-bottom: 8px; }

.page-wrap .form-check label,
.page-wrap .radio label,
.page-wrap .checkbox label {
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: var(--v-ink);
}

/* Campo de archivo (adjuntos de post-venta) */
.page-wrap input[type="file"] {
  padding: 11px 16px;
  border: 1px dashed var(--v-line);
  border-radius: var(--v-r-card);
  background: var(--v-bone);
  font-size: 14px;
}

/* El honeypot `website` debe seguir invisible: no se toca su ocultamiento */

/* En mobile los slides de flexslider desbordaban el ancho de la página: el
   viewport es el que tiene que recortar el riel horizontal.

   OJO: no ponerle max-width al <ul class="slides"> ni a sus <li>. Flexslider
   arma el riel dándole al <ul> el ancho de TODOS los slides sumados
   (445px x 17 = 7565px) y flotando cada <li>. Limitarlo al 100% del
   contenedor deja el <ul> en 445px, los floats no entran en una línea y los
   slides se apilan verticalmente: la galería medía 2000px de alto. */
.page-wrap .flexslider,
.page-wrap .flex-viewport { overflow: hidden; max-width: 100%; }

/* Red de seguridad: ningún media del contenido puede exceder el ancho */
.page-wrap img,
.page-wrap iframe,
.page-wrap video,
.page-wrap table { max-width: 100%; }


/* ── 44. Sidebar: ritmo, sin líneas ──────────────────────────────────────────
   Los filetes entre secciones se sacaron: contradecían el propio sistema
   ("sin sombras, sin bordes; la jerarquía se construye con fondo, espacio y
   tipografía") y con una línea por cada sección quedaba ruidoso.

   La jerarquía la dan ahora el espacio —44px entre secciones, 14px entre
   título y contenido— y los títulos tratados como eyebrow: 11px, tracking
   .24em, en el dorado de marca. Es el mismo recurso que la home usa para los
   micro-labels de sección, así que el sidebar habla el idioma del sistema.

   El bloque de tags se eliminó de los cuatro templates que lo repetían.     */

.page-wrap .blog-sidebar > .blog__search,
.page-wrap .blog-sidebar > .blog__cate-2,
.page-wrap .blog-sidebar > .blog__recent {
  margin-bottom: 44px;
  padding-bottom: 0;
  border-bottom: 0;
}

.page-wrap .blog-sidebar > *:last-child { margin-bottom: 0; }

/* Títulos de sección como eyebrow */
.page-wrap .title-sidebar,
.page-wrap .blog-sidebar h4 {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  font-family: var(--v-font-text);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--v-brass);
}

.page-wrap .title-sidebar::after,
.page-wrap .blog-sidebar h4::after { display: none; }

/* El título de un bloque pertenece a su contenido, no al bloque anterior */
.page-wrap .blog-sidebar > .title-sidebar { margin-top: 0; }
.page-wrap .blog-sidebar > .blog__cate-2  { margin-top: 0; }

/* Las notas del sidebar: el 40%/60% con float de style.css:5855 dejaba los
   títulos en una palabra por línea. */
.page-wrap .blog__recent-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.page-wrap .blog__recent .blog__recent-item .img,
.page-wrap .blog__recent .blog__recent-item .text {
  width: auto;
  float: none;
  margin-left: 0;
  padding-left: 0;
}

.page-wrap .blog__recent .blog__recent-item .img  { flex: 0 0 66px; }
.page-wrap .blog__recent .blog__recent-item .text { flex: 1 1 auto; min-width: 0; }

/* El sidebar arranca alineado con el contenido, sin el margin-top:42px inline */
.page-wrap .blog-sidebar { margin-top: 0 !important; }


/* ── 45. Ficha: cabecera, badge de cuotas y fila de compra ───────────────────
   El panel derecho tenía un .row que lo partía al medio: el título quedaba
   en 303px —y por eso se cortaba en dos líneas— y el badge de cuotas
   flotaba en la otra mitad, dejando el hueco en blanco. Eliminado el .row,
   la información usa el ancho completo de la columna.                      */

.v-ficha__head { display: block; }

/* Título adaptable: se ajusta solo a nombres largos como
   "Kala 2 Cuerpos + Chaise Longue" sin quebrarse ni desbordar. */
.page-wrap .nombre-single {
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.25;
  hyphens: auto;                      /* el <html> declara lang="es-AR" */
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

/* Badge de cuotas, inline con el precio.
   Reemplaza images/18-cuotas.jpg: un JPG de 250x250 escalado a 160, que se
   veía pixelado y tenía el número quemado. */
.v-cuotas-badge {
  display: inline-flex;
  align-self: flex-start;   /* .v-price es flex column: si no, se estira a todo el ancho */
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 9px 16px 9px 14px;
  border: 1px solid var(--v-line);
  border-radius: var(--v-r-card);
  background: var(--v-bone);
  vertical-align: middle;
}

.v-cuotas-badge__hasta {
  font-family: var(--v-font-text);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--v-slate);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: 1;
}

.v-cuotas-badge__n {
  font-family: var(--v-font-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--v-ink);
}

.v-cuotas-badge__txt {
  font-family: var(--v-font-text);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--v-ink);
}

/* Fila de compra: variante y cantidad en la misma línea.
   El selector de cantidad lo arma koshkil/quantity.js — se conserva su
   estructura (.kohskil-quantity > input + .quantity-nav con .quantity-up y
   .quantity-down) y sólo se la reordena a "− [n] +". */
/* La cantidad no crece como el select: ocupa lo suyo al lado */
.v-compra-cant { flex: 0 0 auto; }

.page-wrap .single-product-form .form-group > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-left: 0;
  margin-right: 0;
}

.page-wrap .single-product-form .form-group > .row > [class*="col-"] {
  flex: 1 1 240px;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.page-wrap #variantes { margin-bottom: 0 !important; }   /* pisa el inline de 15px */

/* El control de cantidad, con el mismo alto y borde que el select */
.page-wrap .kohskil-quantity {
  display: inline-flex !important;
  align-items: center;
  float: none !important;             /* el plugin le pone .pull-left */
  position: relative;
  width: auto !important;
  min-width: 126px;                   /* 34 + 46 + 34 + padding: si no, se aplasta */
  height: 52px;
  padding: 0 40px;                    /* deja lugar a los botones absolutos */
  border: 1px solid var(--v-line);
  border-radius: var(--v-r-pill);
  background: var(--v-paper);
  overflow: hidden;
}

.page-wrap .kohskil-quantity input {
  width: 46px !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-family: var(--v-font-text);
  font-size: 15px;
  font-weight: 400;
  color: var(--v-ink);
  -moz-appearance: textfield;         /* fuera los steppers nativos */
}

.page-wrap .kohskil-quantity input::-webkit-outer-spin-button,
.page-wrap .kohskil-quantity input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* .quantity-nav apilaba los dos chevrons en vertical; ahora sus botones se
   reparten a los costados del número.

   Se los posiciona en absoluto respecto del contenedor en vez de usar
   `display: contents` en el .quantity-nav: con contents el layout se veía
   bien, pero los botones no recibían el click del mouse — funcionaban sólo
   por JS. Verificado con un click real. */
.page-wrap .kohskil-quantity .quantity-nav {
  position: static;
}

.page-wrap .kohskil-quantity .quantity-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--v-r-pill);
  color: var(--v-ink);
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background var(--v-t-fast) ease;
}

.page-wrap .kohskil-quantity .quantity-button:hover { background: var(--v-bone); }

.page-wrap .kohskil-quantity .quantity-down { left: 5px; }
.page-wrap .kohskil-quantity .quantity-up   { right: 5px; }

/* Se reemplazan los chevrons zmdi por − y + */
.page-wrap .kohskil-quantity .quantity-button i { display: none; }

.page-wrap .kohskil-quantity .quantity-down::before,
.page-wrap .kohskil-quantity .quantity-up::before {
  font-family: var(--v-font-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  color: var(--v-ink);
}

.page-wrap .kohskil-quantity .quantity-down::before { content: "\2212"; }  /* − */
.page-wrap .kohskil-quantity .quantity-up::before   { content: "\002B"; }  /* + */

@media (max-width: 640px) {
  .v-cuotas-badge { margin-top: 12px; }
  .page-wrap .single-product-form .form-group > .row > [class*="col-"] { flex: 1 1 100%; }
}

/* El badge va al costado de las cifras, no en una fila propia debajo */
.v-price__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.v-price__top-nums { flex: 1 1 auto; min-width: 0; }

.v-price--ficha .v-cuotas-badge { margin-top: 0; flex: 0 0 auto; }

@media (max-width: 480px) {
  .v-price__top { gap: 12px; }
  .v-cuotas-badge { padding: 7px 13px 7px 11px; }
  .v-cuotas-badge__n { font-size: 25px; }
}

/* ── Bloque de compra: dos filas con aire ────────────────────────────────────

     [ Variante ▾ ]        [ − 1 + ]      ← fila 1
                                          ← 22px
     [ AGREGAR AL CARRO ]  [ ASESOR ]     ← fila 2

   El reparto lo resuelve el propio flex-wrap, sin media queries: cada
   control declara el ancho mínimo con el que se lee cómodo y, cuando la
   columna no da, baja solo.

   Anchos útiles de la columna, medidos: 635px a 1440, 330px a 768 y 345px a
   375. Con la cantidad en 126px y gap de 14px, la variante necesita 240px de
   base: 240 + 126 + 14 = 380, que entra en 635 —la variante queda en 495— y
   no entra en 330 ni en 345, así que ahí se apilan solos. Los botones, con
   base 240 cada uno, suman 494: una fila en desktop, apilados por debajo. */

.page-wrap .single-product-form .form-group { margin-bottom: 0; }

.page-wrap .single-product-form .form-group > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-left: 0;
  margin-right: 0;
}

/* La variante crece; la cantidad conserva su ancho */
.page-wrap .single-product-form .form-group > .row > [class*="col-"] {
  flex: 1 1 240px;
  min-width: 0;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.v-compra-cant { flex: 0 0 auto !important; }

.page-wrap #variantes { margin-bottom: 0 !important; }   /* pisa el inline de 15px */

/* Fila 2, separada de la de arriba */
.v-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
  margin-top: 22px;
}

.page-wrap .v-acciones #addToCartButton,
.page-wrap .v-acciones .btn-asesor {
  flex: 1 1 240px;
  width: auto;            /* style.css le da width:100% al .btn-asesor */
  min-width: 0;
  margin: 0;
  height: 56px;
}

.page-wrap .v-acciones .btn-asesor { padding: 0 20px; }

/* Aire alrededor del bloque de compra */
.page-wrap .single-product-form { margin-top: 26px; margin-bottom: 26px; }
.page-wrap .single-product-detail hr { margin: 26px 0; border-color: var(--v-line); }

/* Campo que falta completar: se resalta unos segundos al intentar agregar
   sin haber elegido variante. Rojo de estado de sistema, la única familia
   de color fuera de la paleta que el sistema admite. */
.page-wrap .v-campo-error {
  border-color: #B3261E !important;
  animation: v-shake .45s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes v-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .page-wrap .v-campo-error { animation: none; }
}

/* Toastr: se adapta a la tipografía y los radios del sistema */
.page-wrap #toast-container > div,
#toast-container > div {
  border-radius: var(--v-r-card);
  box-shadow: 0 10px 30px rgba(20, 17, 15, .16);
  font-family: var(--v-font-text);
  font-size: 14px;
  font-weight: 300;
  opacity: 1;
}

#toast-container > .toast-warning { background-color: var(--v-ink); }
#toast-container > div .toast-message { line-height: 1.5; }


/* ── 47. Blog: sidebar y alineación ──────────────────────────────────────── */

/* style.css le da al .blog-item un margin-top de 70px, que sirve para separar
   una nota de la siguiente pero desalineaba la primera respecto del buscador
   del sidebar: las dos columnas arrancan en la misma Y, y la nota caía 70px
   más abajo. */
.page-wrap .blog-list .blog-item:first-child,
.page-wrap .blog-list > .blog-item:first-of-type { margin-top: 0; }

/* Productos destacados del sidebar: misma jerarquía de precio que la ficha,
   en versión compacta para una columna angosta. */
.v-price--mini {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 6px 0 0 !important;
}

.v-price--mini .v-price__fees {
  gap: 5px;
  margin: 0 !important;
  color: var(--v-brass) !important;
}

.v-price--mini .v-price__fees-label  { font-size: 11px; }
.v-price--mini .v-price__fees-amount { font-size: 15px; }

.v-price--mini .v-price__cash {
  gap: 6px;
  margin: 1px 0 0 !important;
}

.v-price--mini .v-price__cash-amount { font-size: 13px !important; }
.v-price--mini .v-price__off {
  padding: 0 7px !important;
  font-size: 9.5px !important;
  line-height: 1.6;
}

.v-price--mini .v-price__list {
  margin: 5px 0 0 !important;
  padding-top: 5px;
  border-top: 1px solid var(--v-line);
}

.v-price--mini .v-price__list-label  { font-size: 9px; letter-spacing: .1em; margin-bottom: 0; }
.v-price--mini .v-price__list-amount { font-size: 11.5px !important; }

/* La miniatura y el texto del destacado, con el mismo tratamiento que las
   notas del sidebar (style.css les da un 40%/60% con float). */
.page-wrap .destacado__recent-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.page-wrap .destacado__recent-item .img,
.page-wrap .destacado__recent-item .text {
  width: auto;
  float: none;
  margin-left: 0;
  padding-left: 0;
}

.page-wrap .destacado__recent-item .img   { flex: 0 0 72px; }
.page-wrap .destacado__recent-item .text  { flex: 1 1 auto; min-width: 0; }

.page-wrap .destacado__recent-item .img img {
  width: 72px;
  height: 60px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--v-bone);
}

.page-wrap .destacado__recent-item h6 {
  margin: 0;
  font-family: var(--v-font-text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
}

.page-wrap .destacado__recent { margin-bottom: 0; }


/* ── 48. Locales: sucursales y puntos de venta ───────────────────────────────
   Un solo componente para las dos páginas (partials/card-local.tpl).       */

.v-locales__intro { max-width: 74ch; margin-bottom: 44px; }
.v-locales__intro .v-lead { max-width: none; }

.v-locales {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: stretch;
}

.v-local {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--v-line);
  border-radius: var(--v-r-card);
  overflow: hidden;
  background: var(--v-paper);
  transition: border-color var(--v-t-fast) ease;
}

.v-local:hover { border-color: rgba(20, 17, 15, .22); }

.v-local__foto { aspect-ratio: 16 / 10; overflow: hidden; background: var(--v-bone); }

.v-local__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--v-t-slow) var(--v-ease);
}

.v-local:hover .v-local__foto img { transform: scale(1.04); }

.v-local__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 24px 22px 22px;
}

.v-local__chip {
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 5px 13px;
  border-radius: var(--v-r-pill);
  background: var(--v-ink);
  color: var(--v-paper);
  font-family: var(--v-font-text);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.v-local__eyebrow {
  margin: 0 0 6px;
  font-family: var(--v-font-text);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--v-brass);
}

.v-local__nombre {
  margin: 0 0 16px;
  font-family: var(--v-font-display);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.25;
  color: var(--v-ink);
  text-transform: none;
}

.v-local__datos {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}

.v-local__datos li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--v-font-text);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--v-ink);
}

.v-local__datos svg { flex: none; margin-top: 3px; color: var(--v-brass); }

/* El mapa se empuja al pie para que las cards de una fila terminen parejas */
.v-local__mapa {
  margin-top: auto;
  border-radius: var(--v-r-banner);
  overflow: hidden;
  background: var(--v-bone);
}

.v-local__mapa iframe {
  display: block;
  width: 100%;
  height: 190px;
  border: 0;
}

.v-local__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.v-local__acciones .v-btn {
  flex: 1 1 auto;
  padding: 12px 18px;
  font-size: 11.5px;
  letter-spacing: .1em;
}

/* Botón "WhatsApp" de la sucursal: mismo diseño de antes, abre el chat de
   Kommo con la sucursal en Modelo Consultado. Es un <button>. */
.page-wrap .v-local__acciones .v-btn--wa {
  background: var(--v-whatsapp);
  border-color: var(--v-whatsapp);
  color: var(--v-paper);
  font-family: var(--v-font-text);
  cursor: pointer;
}

.page-wrap .v-local__acciones .v-btn--wa:hover { background: #1EBE5A; border-color: #1EBE5A; color: var(--v-paper); }
.page-wrap .v-local__acciones .v-btn--wa:focus-visible { outline: 2px solid var(--v-brass); outline-offset: 3px; }

/* Aviso al pie */
.v-aviso {
  margin-top: 48px;
  padding: 34px 28px;
  border-radius: var(--v-r-block);
  background: var(--v-bone);
  text-align: center;
}

.v-aviso p {
  max-width: 60ch;
  margin: 0 auto 20px;
  font-family: var(--v-font-text);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--v-ink);
}

.v-aviso strong { font-weight: 400; }

/* Agrupador por provincia (puntos de venta) */
.v-locales__grupo {
  margin: 0 0 18px;
  padding-bottom: 10px;
  font-family: var(--v-font-text);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--v-brass);
}

.v-locales + .v-locales__grupo { margin-top: 48px; }

@media (max-width: 991px) {
  .v-locales { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

@media (max-width: 640px) {
  .v-locales { grid-template-columns: 1fr; gap: 20px; }
  .v-locales__intro { margin-bottom: 32px; }
  .v-local__body { padding: 20px 18px 18px; }
  .v-aviso { padding: 26px 20px; }
}


/* ── 49. Shop in Shop (Socio Comercial) ──────────────────────────────────── */

.v-sis__hero { min-height: 380px; }
.v-sis__hero .v-title--hero { font-size: clamp(32px, 4.4vw, 54px); }

/* Los cuatro pilares */
.v-pilares {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.v-pilar {
  padding: 30px 26px;
  border-radius: var(--v-r-card);
  background: var(--v-bone);
}

.v-pilar svg { color: var(--v-brass); margin-bottom: 16px; }

.v-pilar h3 {
  margin: 0 0 8px;
  font-family: var(--v-font-display);
  font-size: 19px;
  font-weight: 300;
  color: var(--v-ink);
  text-transform: none;
}

.v-pilar p {
  margin: 0;
  font-family: var(--v-font-text);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--v-slate);
}

/* La cita */
.v-cita {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--v-font-display);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 300;
  line-height: 1.3;
  color: var(--v-paper);
  quotes: "“" "”";
}

.v-cita::before { content: open-quote; color: var(--v-brass); }
.v-cita::after  { content: close-quote; color: var(--v-brass); }

/* La ecuación */
.v-ecuacion {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
}

.v-ecuacion__item {
  display: grid;
  place-items: center;
  flex: 1 1 170px;
  min-height: 96px;
  padding: 20px 18px;
  border: 1px solid var(--v-line);
  border-radius: var(--v-r-card);
  font-family: var(--v-font-text);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  color: var(--v-ink);
}

.v-ecuacion__item--total {
  background: var(--v-ink);
  border-color: var(--v-ink);
  color: var(--v-paper);
  flex-basis: 200px;
}

.v-ecuacion__op {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-family: var(--v-font-text);
  font-size: 20px;
  font-weight: 300;
  color: var(--v-brass);
}

/* Los cuatro pasos */
.v-pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.v-paso {
  position: relative;
  margin: 0;
  padding: 26px 0 0;
  list-style: none;
  border-top: 2px solid var(--v-brass);
}

.v-paso__n {
  display: block;
  margin-bottom: 10px;
  font-family: var(--v-font-display);
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  color: var(--v-brass);
}

.v-paso h3 {
  margin: 0 0 8px;
  font-family: var(--v-font-display);
  font-size: 19px;
  font-weight: 300;
  color: var(--v-ink);
  text-transform: none;
}

.v-paso p {
  margin: 0;
  font-family: var(--v-font-text);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--v-slate);
}

/* Contactos del CTA */
.v-contactos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  margin-top: 34px;
}

.v-contacto { flex: 0 1 260px; }

.v-contacto__nombre {
  margin: 0;
  font-family: var(--v-font-display);
  font-size: 19px;
  font-weight: 300;
  color: var(--v-paper);
}

.v-contacto__rol {
  margin: 2px 0 14px;
  font-family: var(--v-font-text);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--v-brass-soft);
}

.v-descarga { margin: 34px 0 0; }

.v-descarga a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--v-font-text);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--v-paper);
  border-bottom: 1px solid var(--v-brass);
  padding-bottom: 5px;
}

.v-descarga a:hover { color: var(--v-brass-soft); }

@media (max-width: 991px) {
  .v-pilares, .v-pasos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .v-pilares, .v-pasos { grid-template-columns: 1fr; gap: 18px; }
  .v-ecuacion__item { flex: 1 1 100%; min-height: 0; padding: 16px; }
  .v-ecuacion__op { width: 100%; }
  .v-sis__hero { min-height: 300px; }
  .v-contactos { gap: 26px; }
}


/* ============================================================================
   BLOQUE CARRITO — Drawer lateral
   ----------------------------------------------------------------------------
   Markup en widgets/menu.tpl (#v-cart). Panel desde la derecha, misma mecánica
   que el menú off-canvas (velvet-2026.js). z-index: overlay 1900, panel 1950
   (tokens reservados en §2). body.v-locked oculta el botón de chat de Kommo (§45).
   ============================================================================ */

/* ── 40. Drawer del carrito ──────────────────────────────────────────────── */

.v-cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--v-z-drawer);
  display: flex;
  flex-direction: column;
  width: min(100vw, 440px);
  background: var(--v-paper);
  color: var(--v-ink);
  border-radius: var(--v-r-block) 0 0 var(--v-r-block);
  transform: translateX(100%);
  transition: transform .32s var(--v-ease);
  overscroll-behavior: contain;
}

.v-cart.is-open { transform: translateX(0); }

.v-cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: none;
  padding: 26px 28px 20px;
  border-bottom: 1px solid var(--v-line);
}

.page-wrap .v-cart__title,
.v-cart__title {
  margin: 0;
  font-family: var(--v-font-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
  text-transform: none;
  letter-spacing: 0;
  color: var(--v-ink);
}

.v-cart__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--v-line);
  border-radius: var(--v-r-pill);
  background: transparent;
  color: var(--v-ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--v-t-fast) ease;
}

.v-cart__close:hover,
.v-cart__close:focus { border-color: var(--v-ink); }

/* Cuerpo: es lo único que scrollea; cabecera y pie quedan fijos */
.v-cart__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 28px;
}

/* style.css:1389 le pone padding y borde a .cart-list > li: se anula */
.v-cart__list { list-style: none; margin: 0; padding: 0; }

.v-cart__list > li.v-cart__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--v-line);
}

.v-cart__list > li.v-cart__item:last-of-type { border-bottom: 0; }

.v-cart__media {
  flex: none;
  width: 84px;
  aspect-ratio: 1 / .86;
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: 16px;
  background: var(--v-bone);
  overflow: hidden;
}

.v-cart__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  border-radius: 0;
}

/* style.css:1404 (.pro-detail) trae padding-left:65px para la foto flotada */
.v-cart .pro-detail { flex: 1 1 auto; min-width: 0; padding: 2px 0 0; }

.page-wrap .v-cart__name,
.v-cart__name {
  margin: 0 0 3px;
  font-family: var(--v-font-display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--v-ink);
}

.page-wrap .v-cart__variant,
.v-cart__variant {
  margin: 0 0 8px;
  font-family: var(--v-font-text);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--v-slate);
}

.page-wrap .v-cart__meta,
.v-cart__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-family: var(--v-font-text);
  font-size: 14px;
  line-height: 1.3;
  color: var(--v-ink);
}

.v-cart__qty { color: var(--v-slate); font-size: 13px; }

/* El contador del ítem hereda .mini-cart-counter (style.css:1339, badge
   redondo) porque carrito.js lo actualiza por esa clase: acá es texto plano */
.v-cart__qty .mini-cart-counter {
  position: static;
  display: inline;
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.v-cart .pro-detail > p > em.v-cart__price,
.v-cart__price {
  font-style: normal;
  font-size: 15px;
  font-weight: 400;
  color: var(--v-ink);
  white-space: nowrap;
}

/* Estado vacío: el <li> siempre está en el DOM y se muestra sólo cuando es
   el único hijo de la lista */
.v-cart__list > li.v-cart__empty {
  padding: 48px 0;
  border: 0;
  text-align: center;
  font-family: var(--v-font-text);
  font-size: 15px;
  font-weight: 300;
  color: var(--v-slate);
}

.v-cart__list > li.v-cart__empty:not(:only-child) { display: none; }

/* Pie fijo: total, leyenda de cuotas y los dos botones. En iOS respeta la
   barra inferior con el safe-area. */
.v-cart .total-checkout,
.v-cart__foot {
  flex: none;
  padding: 18px 28px calc(22px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--v-line);
  background: var(--v-paper);
}

.page-wrap .v-cart .total,
.v-cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px;
  font-family: var(--v-font-text);
  font-size: 15px;
  font-weight: 400;
  text-align: left;
  color: var(--v-ink);
}

.v-cart__total-label { letter-spacing: .12em; text-transform: uppercase; font-size: 12px; color: var(--v-slate); }

.v-cart .total .sum,
.v-cart__total .sum {
  font-family: var(--v-font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--v-ink);
}

.page-wrap .v-cart__fees,
.v-cart__fees {
  margin: 0 0 16px;
  font-family: var(--v-font-text);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--v-brass);
}

/* Sin ítems no tiene sentido ofrecer "Ir al carrito" con total en cero */
.v-cart .total-checkout.hidden { display: block; }

.v-cart__actions { display: grid; gap: 10px; }

.v-cart__actions .v-btn { padding: 15px 20px; }
.v-cart__actions button.v-btn { cursor: pointer; font-family: var(--v-font-text); }

.v-cart__close:focus-visible,
.v-cart__actions .v-btn:focus-visible { outline: 2px solid var(--v-brass); outline-offset: 3px; }

/* Mobile: ancho completo, sin esquinas, pie pegado abajo */
@media (max-width: 640px) {
  .v-cart { width: 100vw; border-radius: 0; }
  .v-cart__head { padding: 20px var(--v-gutter-sm) 16px; }
  .v-cart__body { padding: 4px var(--v-gutter-sm); }
  .v-cart .total-checkout,
  .v-cart__foot { padding-left: var(--v-gutter-sm); padding-right: var(--v-gutter-sm); }
  .v-cart__media { width: 72px; }
  .v-cart__name { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .v-cart, .v-drawer-overlay { transition: none; }
}


/* ── 41. Página /mi-carrito ──────────────────────────────────────────────────
   Markup en mi-carrito.tpl. Tabla de ítems a la izquierda, resumen (envío +
   total) en una caja sobre --v-bone a la derecha. En mobile la tabla pasa a
   cards y el resumen queda debajo. Todos los ganchos de carrito.js se
   conservan; acá sólo hay presentación.                                     */

.page-wrap .v-cartpage { padding: 40px 0 96px; }

.v-cartpage__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 48px;
  align-items: start;
}

.v-cartpage__main { min-width: 0; }

/* Tabla de ítems: sin bordes laterales, sólo líneas finas entre filas */
.page-wrap table.v-ctable {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-family: var(--v-font-text);
  font-weight: 300;
  color: var(--v-ink);
}

.page-wrap .v-ctable th {
  padding: 0 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--v-line);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: left;
  color: var(--v-slate);
  background: transparent;
  white-space: nowrap;
}

/* style.css:6556-6569 (.table-cart.table tr/td) le ponía bordes laterales,
   borde superior, texto centrado y 18px a cada celda; y 6578 (.pro-cart >
   span) mayúsculas con margen. Se replica la especificidad para ganar. */
.page-wrap table.v-ctable.table-cart tr { border-left: 0; border-right: 0; }
.page-wrap table.v-ctable.table-cart td { border-top: 0; text-align: left; font-size: 15px; }
.page-wrap .v-ctable .pro-cart > span { margin-left: 0; text-transform: none; font-size: 18px; color: var(--v-ink); }

.page-wrap .v-ctable th:first-child,
.page-wrap .v-ctable td:first-child { padding-left: 0; }
.page-wrap .v-ctable th:last-child,
.page-wrap .v-ctable td:last-child { padding-right: 0; }

.page-wrap .v-ctable td {
  padding: 20px 12px;
  border: 0;
  border-bottom: 1px solid var(--v-line);
  vertical-align: middle;
  background: transparent;
  font-size: 15px;
}

.v-ctable__h-price, .v-ctable__h-total { width: 130px; }
.v-ctable__h-qty { width: 150px; }
.v-ctable__h-remove { width: 44px; }

/* Producto: foto sobre bone + nombre en display + variante en slate */
.v-ctable__prodin { display: flex; align-items: center; gap: 16px; }

.v-ctable__media {
  flex: none;
  width: 84px;
  aspect-ratio: 1 / .86;
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: 16px;
  background: var(--v-bone);
  overflow: hidden;
}

.page-wrap .v-ctable__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  mix-blend-mode: multiply;
  border-radius: 0;
}

.v-ctable__prodtxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.v-ctable__name {
  font-family: var(--v-font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--v-ink);
}

.v-ctable__variant,
.v-ctable__ship {
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--v-slate);
}

.v-ctable__ship { color: var(--v-brass); }

/* Precios: nunca partidos */
.page-wrap .v-ctable__price,
.page-wrap .v-ctable__total { white-space: nowrap; font-weight: 400; }
.page-wrap .v-ctable__total { font-size: 16px; }

/* Cantidad: el control lo arma koshkil/quantity.js (§38 ya lo estila);
   el ícono de refrescar aparece al cambiar el número (carrito.js) */
.v-ctable__qtyin { display: flex; align-items: center; gap: 10px; }

.page-wrap .v-ctable .kohskil-quantity { height: 44px; min-width: 118px; }

.page-wrap .v-ctable i[data-role="update-cart"] {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--v-r-pill);
  border: 1px solid var(--v-line);
  color: var(--v-ink);
  font-size: 13px;
  transition: opacity var(--v-t-fast) ease, border-color var(--v-t-fast) ease;
}

.page-wrap .v-ctable i[data-role="update-cart"]:hover { border-color: var(--v-ink); }

/* Quitar */
.page-wrap .v-ctable a.remove {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--v-r-pill);
  color: var(--v-slate);
  transition: background var(--v-t-fast) ease, color var(--v-t-fast) ease;
}

.page-wrap .v-ctable a.remove:hover,
.page-wrap .v-ctable a.remove:focus { background: var(--v-bone); color: var(--v-ink); }

/* Vacío */
.v-cartpage__empty {
  padding: 56px 0 24px;
  text-align: center;
  font-family: var(--v-font-text);
  font-size: 16px;
  font-weight: 300;
  color: var(--v-slate);
}

.page-wrap .v-cartpage__empty p { margin: 0 0 20px; }

/* Resumen: caja sobre bone, sin bordes, jerarquía por tipografía */
.v-summary {
  padding: 30px 30px 32px;
  border-radius: var(--v-r-block);
  background: var(--v-bone);
}

.page-wrap .v-summary__title,
.v-summary__title {
  margin: 0 0 14px;
  font-family: var(--v-font-text);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--v-brass);
}

.v-summary__title + .v-summary__title,
.v-summary__rows + .v-summary__title { margin-top: 28px; }

.page-wrap .v-summary__label {
  display: block;
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--v-slate);
}

.page-wrap .v-summary select { margin-bottom: 18px; }

.v-summary__rows { margin: 0; }

.v-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--v-line);
  font-family: var(--v-font-text);
  font-size: 15px;
  font-weight: 300;
}

.v-summary__row:last-child { border-bottom: 0; }
.v-summary__row dt { font-weight: 300; color: var(--v-slate); }
.v-summary__row dd { margin: 0; white-space: nowrap; font-weight: 400; color: var(--v-ink); }

.v-summary__row--final { padding-top: 14px; }
.v-summary__row--final dt { color: var(--v-ink); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
.v-summary__row--final dd { font-family: var(--v-font-display); font-size: 26px; }

.page-wrap .v-summary__fees {
  margin: 4px 0 18px;
  font-family: var(--v-font-text);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--v-brass);
}

.page-wrap .v-summary .v-btn { padding: 16px 20px; }

/* Nota de contacto: sale del rojo del theme, va en la paleta */
.page-wrap .v-note {
  margin: 22px 4px 0;
  font-family: var(--v-font-text);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--v-slate);
}

.page-wrap .v-note strong { font-weight: 500; color: var(--v-ink); }
.page-wrap .v-note a { color: var(--v-ink); font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.page-wrap .v-note a:hover { color: var(--v-brass); }

@media (max-width: 1080px) {
  .v-cartpage__inner { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; }
  .v-summary { padding: 26px 24px 28px; }
}

/* Tablet y mobile: una columna, la tabla pasa a cards */
@media (max-width: 860px) {
  .page-wrap .v-cartpage { padding: 24px 0 64px; }
  .v-cartpage__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  .page-wrap .v-ctable thead { display: none; }
  .page-wrap table.v-ctable,
  .page-wrap .v-ctable tbody { display: block; width: 100%; }

  .page-wrap .v-ctable tbody tr {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 12px;
    padding: 18px 0;
    border-bottom: 1px solid var(--v-line);
  }

  .page-wrap .v-ctable td {
    display: block;
    padding: 0 !important;
    border: 0;
  }

  .page-wrap .v-ctable td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--v-slate);
  }

  .page-wrap .v-ctable td.v-ctable__prod { grid-column: 1 / -1; padding-right: 44px !important; }
  .page-wrap .v-ctable td.v-ctable__prod::before { display: none; }
  .page-wrap table.v-ctable.table-cart td { text-align: left; }
  .v-ctable__name { font-size: 16px; }
  .v-ctable__media { width: 72px; }

  .page-wrap .v-ctable .v-ctable__remove { position: absolute; top: 18px; right: 0; }
  .page-wrap .v-ctable .kohskil-quantity { min-width: 110px; }
}

/* Teléfono angosto: precio y total en la misma línea, cantidad debajo */
@media (max-width: 420px) {
  .page-wrap .v-ctable tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-wrap .v-ctable .v-ctable__price { order: 1; }
  .page-wrap .v-ctable .v-ctable__total { order: 2; }
  .page-wrap .v-ctable .v-ctable__qty   { order: 3; grid-column: 1 / -1; }
}


/* ── 42. Checkout ────────────────────────────────────────────────────────────
   Markup en checkout.tpl. Facturación y entrega en dos fieldsets con borde
   fino y fondo suave que reaccionan al hover y al foco de un campo; el
   pedido debajo como tabla limpia. Ningún name, hidden ni id cambia.       */

.page-wrap .v-checkout { padding: 40px 0 96px; }

.v-checkout__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-bottom: 40px;
}

/* Bloque de datos: caja con borde y fondo bone. Hover sube el borde;
   con un campo enfocado adentro pasa a --v-ink. */
.page-wrap .v-fs {
  min-width: 0;
  margin: 0;
  padding: 28px 30px 32px;
  border: 1px solid var(--v-line);
  border-radius: var(--v-r-block);
  background: var(--v-bone);
  transition: border-color var(--v-t-fast) ease, background var(--v-t-fast) ease;
}

.page-wrap .v-fs:hover { border-color: rgba(20, 17, 15, .32); }
.page-wrap .v-fs:focus-within { border-color: var(--v-ink); }

/* Un <legend> se dibuja sobre el borde del fieldset: con float + width
   100% se lo saca de esa posición y queda como título dentro de la caja */
.page-wrap .v-fs__legend {
  float: left;
  width: 100%;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  font-family: var(--v-font-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
  color: var(--v-ink);
}

.v-fs__grid {
  clear: both;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 14px;
}

.v-field { min-width: 0; }
.v-field--full { grid-column: 1 / -1; }
.v-field--narrow { grid-column: span 1; }
.v-field--wide { grid-column: span 1; }

.page-wrap .v-field label { display: block; margin-bottom: 7px; }
.page-wrap .v-field label span { color: var(--v-brass); margin-left: 2px; }

/* Los campos sobre bone van en blanco; hover marca el borde, foco lo cierra */
.page-wrap .v-fs input,
.page-wrap .v-fs select,
.page-wrap .v-fs textarea {
  width: 100%;
  background: var(--v-paper);
  transition: border-color var(--v-t-fast) ease, box-shadow var(--v-t-fast) ease;
}

.page-wrap .v-fs input:hover,
.page-wrap .v-fs select:hover,
.page-wrap .v-fs textarea:hover { border-color: rgba(20, 17, 15, .38); }

.page-wrap .v-fs input:focus,
.page-wrap .v-fs select:focus,
.page-wrap .v-fs textarea:focus { border-color: var(--v-ink); }

.page-wrap .v-fs textarea { min-height: 120px; }

/* input[type=number] hereda steppers nativos del theme: fuera */
.page-wrap .v-fs input[type="number"] { -moz-appearance: textfield; }
.page-wrap .v-fs input[type="number"]::-webkit-outer-spin-button,
.page-wrap .v-fs input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Pedido */
.v-order { max-width: 760px; }

.page-wrap .v-order__title {
  margin: 0 0 16px;
  font-family: var(--v-font-display);
  font-size: 22px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--v-ink);
}

/* style.css:6618 (.table-order.table-hover) y §35/§39 ya aflojan bordes;
   acá se termina de ordenar: sin hover gris, sin bordes laterales. */
.page-wrap table.v-otable {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-family: var(--v-font-text);
  font-size: 15px;
  font-weight: 300;
  color: var(--v-ink);
}

.page-wrap .v-otable th {
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid var(--v-line);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: left;
  color: var(--v-slate);
  background: transparent;
}

.page-wrap .v-otable th.v-otable__h-total,
.page-wrap .v-otable td:last-child { text-align: right; white-space: nowrap; }

/* style.css:6628 (.table-order.table tr .name) sangraba 70px la columna */
.page-wrap table.v-otable.table-order tr .name { padding-left: 0; }

.page-wrap table.v-otable td {
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--v-line);
  vertical-align: middle;
  background: transparent;
  font-size: 15px;
  text-align: left;
}

.page-wrap table.v-otable.table-hover tbody tr:hover { background: transparent; }

/* Filas de suma: rótulo en versalita, sin negrita del theme */
.page-wrap .v-otable tr.v-otable__sum td { padding: 11px 0; }

.page-wrap .v-otable tr.v-otable__sum td.name {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v-slate);
}

.page-wrap .v-otable tr.v-otable__sum td:last-child { font-weight: 400; }

.page-wrap .v-otable tr.v-otable__final td { padding-top: 18px; border-bottom: 0; }
.page-wrap .v-otable tr.v-otable__final td.name { color: var(--v-ink); }

.page-wrap .v-otable tr.v-otable__final td.total {
  font-family: var(--v-font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--v-ink);
}

.page-wrap .v-order__fees {
  margin: 4px 0 22px;
  font-family: var(--v-font-text);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--v-brass);
}

/* style.css:6743 (.form-sub) traía padding 30px 70px y fondo gris */
.page-wrap .v-order__submit { padding: 0; background: transparent; }
.page-wrap .v-order__submit .v-btn { min-width: 220px; padding: 16px 34px; cursor: pointer; }

@media (max-width: 900px) {
  .v-checkout__cols { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 32px; }
}

@media (max-width: 640px) {
  .page-wrap .v-checkout { padding: 24px 0 64px; }
  /* "( Envío a Provincia )" en nowrap ensanchaba la tabla y desbordaba */
  .page-wrap .v-otable td:last-child { white-space: normal; }
  .page-wrap .v-otable tr.v-otable__final td.total { white-space: nowrap; font-size: 22px; }
  .page-wrap .v-fs { padding: 22px var(--v-gutter-sm) 26px; border-radius: var(--v-r-card); }
  .v-fs__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .v-field--narrow, .v-field--wide { grid-column: auto; }
  .page-wrap .v-order__submit .v-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .page-wrap .v-fs, .page-wrap .v-fs input, .page-wrap .v-fs select, .page-wrap .v-fs textarea { transition: none; }
}


/* ── 43. Pagar ───────────────────────────────────────────────────────────────
   Markup en pagar.tpl. Dos tarjetas seleccionables (tabs de Bootstrap
   intactos: data-toggle="tab" + href) y, debajo, el formulario de tarjeta
   con rótulos arriba en grilla. Ningún id ni data-checkout cambia: el SDK
   de MercadoPago los busca por ahí.                                          */

.page-wrap .v-pay { margin-top: 0; padding: 40px 0 96px; }

.v-pay__inner { max-width: 760px; }

/* Selector de forma de pago: dos tarjetas, la activa con borde --v-ink.
   Se anulan los estilos de .nav-tabs de Bootstrap y de style.css. */
.page-wrap .v-paytabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  list-style: none;
}

.page-wrap .v-paytabs .nav-item,
.page-wrap .v-paytabs__item { display: flex; flex: none; margin: 0; text-align: center; }

.page-wrap .v-paytabs .nav-link,
.page-wrap .v-paytab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 112px;
  padding: 20px 18px;
  border: 1px solid var(--v-line);
  border-radius: var(--v-r-card);
  background: var(--v-bone);
  color: var(--v-slate);
  font-family: var(--v-font-text);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .18em;
  line-height: 1.5;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--v-t-fast) ease, background var(--v-t-fast) ease, color var(--v-t-fast) ease;
}

.page-wrap .v-paytabs .nav-link:hover,
.page-wrap .v-paytabs .nav-link:focus { border-color: rgba(20, 17, 15, .38); color: var(--v-ink); text-decoration: none; }

.page-wrap .v-paytabs .nav-link.active {
  border-color: var(--v-ink);
  background: var(--v-paper);
  color: var(--v-ink);
}

.page-wrap .v-paytabs .nav-link:focus-visible { outline: 2px solid var(--v-brass); outline-offset: 3px; }

.page-wrap .v-paytab__logo {
  display: block;
  width: 100px;
  height: auto;
  padding: 0;
  filter: grayscale(1);
  opacity: .55;
  transition: filter var(--v-t-fast) ease, opacity var(--v-t-fast) ease;
}

.page-wrap .v-paytabs .nav-link.active .v-paytab__logo,
.page-wrap .v-paytabs .nav-link:hover .v-paytab__logo { filter: none; opacity: 1; }

/* Panel: caja sobre bone, sin el borde duro de #pro-content */
.page-wrap .v-pay__content {
  padding: 30px 32px 34px;
  border: 0;
  border-radius: var(--v-r-block);
  background: var(--v-bone);
}

/* Resumen de descripción e importe: los inputs readonly se ven como texto,
   pero siguen siendo inputs porque el SDK lee #transaction_amount */
.page-wrap .v-payform__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 24px;
  align-items: center;
  margin: 0 0 26px;
  padding: 0 0 22px;
  border: 0;
  border-bottom: 1px solid var(--v-line);
}

.v-payform__sumrow { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.page-wrap .v-payform__sumrow label { margin: 0; }

.page-wrap .v-payform__summary input[readonly] {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--v-font-text);
  font-size: 16px;
  font-weight: 400;
  color: var(--v-ink);
  pointer-events: none;
}

.page-wrap .v-payform__sumrow--amount { text-align: right; }

.page-wrap .v-payform__amount {
  display: block;
  font-family: var(--v-font-display);
  font-size: 26px;
  line-height: 1.2;
  color: var(--v-ink);
  white-space: nowrap;
}

/* Grilla del formulario de tarjeta */
.page-wrap .v-payform__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 14px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.page-wrap .v-payform .v-field label { display: block; margin-bottom: 7px; }

.page-wrap .v-payform input:not([type="hidden"]):not([type="submit"]):not([readonly]),
.page-wrap .v-payform select,
.page-wrap .v-payform textarea {
  width: 100%;
  background: var(--v-paper);
  transition: border-color var(--v-t-fast) ease;
}

.page-wrap .v-payform input:hover,
.page-wrap .v-payform select:hover,
.page-wrap .v-payform textarea:hover { border-color: rgba(20, 17, 15, .38); }

.page-wrap .v-payform input:focus,
.page-wrap .v-payform select:focus,
.page-wrap .v-payform textarea:focus { border-color: var(--v-ink); }

/* Logos de tarjetas: pagar.js sube la opacidad del detectado por id */
.page-wrap .v-payform__brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: -6px;
}

.page-wrap .v-payform__brands img {
  display: block;
  max-width: 38px;
  height: auto;
  border-radius: 4px;
  opacity: .35;
  transition: opacity var(--v-t-fast) ease;
}

/* MM / AA en la misma línea */
.v-payform__exp { display: flex; align-items: center; gap: 8px; }
.page-wrap .v-payform__exp input { text-align: center; }
.v-payform__exp-sep { color: var(--v-slate); font-family: var(--v-font-text); }

.page-wrap .v-payform__captcha { min-height: 78px; }

.page-wrap .v-payform__submit { margin-top: 26px; }

/* El submit es un <input>: el theme le ponía color/fuente propios */
.page-wrap .v-payform__submit input[type="submit"].v-btn {
  width: 100%;
  padding: 16px 20px;
  border: 1px solid transparent;
  font-family: var(--v-font-text);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* Pago personalizado: los dos párrafos previos al form */
.page-wrap .v-pay__lead,
.page-wrap .v-pay__amount {
  margin: 0 0 12px;
  font-family: var(--v-font-text);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--v-ink);
}

.page-wrap .v-pay__amount { margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--v-line); }
.page-wrap .v-pay__amount strong { font-family: var(--v-font-display); font-size: 24px; font-weight: 400; }

.page-wrap .v-pay .v-note { margin-top: 26px; }

@media (max-width: 640px) {
  .page-wrap .v-pay { padding: 24px 0 64px; }
  .page-wrap .v-paytabs { gap: 10px; }
  .page-wrap .v-paytabs .nav-link,
  .page-wrap .v-paytab { min-height: 96px; padding: 16px 12px; font-size: 12px; letter-spacing: .14em; }
  .page-wrap .v-paytab__logo { width: 84px; }
  .page-wrap .v-pay__content { padding: 22px var(--v-gutter-sm) 26px; border-radius: var(--v-r-card); }
  .page-wrap .v-payform__summary { grid-template-columns: minmax(0, 1fr); }
  .page-wrap .v-payform__sumrow--amount { text-align: left; }
  .page-wrap .v-payform__sumrow--amount input[readonly] { text-align: left; }
  .page-wrap .v-payform__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .page-wrap .v-payform__captcha > div { transform: scale(.92); transform-origin: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .page-wrap .v-paytab, .page-wrap .v-paytab__logo, .page-wrap .v-payform__brands img { transition: none; }
}


/* ── 44. Pago rechazado (error-mp.tpl) ───────────────────────────────────── */

.page-wrap .v-payerror { text-align: left; }

.page-wrap .v-payerror__msg {
  margin: 0 0 12px;
  font-family: var(--v-font-text);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--v-ink);
}

.page-wrap .v-payerror__code {
  margin: 0 0 6px;
  font-family: var(--v-font-text);
  font-size: 12.5px;
  color: var(--v-slate);
}

.page-wrap .v-payerror__code code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--v-bone);
  color: var(--v-ink);
  font-size: 12px;
}

.page-wrap .v-payerror__hint {
  margin: 0 0 24px;
  font-family: var(--v-font-text);
  font-size: 14px;
  color: var(--v-slate);
}

.page-wrap .v-payerror__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.page-wrap .v-payerror .v-note { margin: 22px 0 0; }


/* ── 45. Botón de chat de Kommo ──────────────────────────────────────────────
   Lo inyecta gso.kommo.com/js/button.js (snippet en widgets/head.tpl) como
   <div class="amo-button-holder"> fijo, hijo directo de <body>, con z-index
   100001 inline; el chat abierto vive adentro del mismo holder. Queda por
   encima del overlay (1900) y del drawer (1950), así que mientras hay un
   panel abierto (body.v-locked: menú mobile o carrito) se oculta, con el
   mismo criterio que tenía el WhatsApp flotante. !important porque pelea
   contra el CSS del vendor.                                                 */

body.v-locked .amo-button-holder {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .2s ease;
}

/* Color del botón: crmPluginConfig.color = #14110F lo aplica como fondo
   inline, pero el botón está configurado en Kommo como canal único de
   WhatsApp con "gradient socials", y ese degradado verde se pinta encima.
   El #amobutton vive en nuestro DOM (no en el iframe), así que se fuerza el
   negro de marca; el logo de WhatsApp adentro es blanco y queda legible. */
.amo-button-holder #amobutton,
.amo-button-holder .amo-button--main {
  background: #14110F !important;
  background-image: none !important;
}


/* ── 46. Cargador de página ──────────────────────────────────────────────────
   Markup en main.tpl (#vLoader). Negro de marca, logo blanco y una línea
   dorada que se dibuja de izquierda a derecha con un punto que la recorre
   mientras se espera. Sin spinner.

   La salida está en dos capas: esta animación con delay lo saca solo a los
   2,6s pase lo que pase (red de seguridad), y velvet-loader.js la adelanta
   con .is-listo cuando la página cargó. Los 2,6s quedan por encima del piso
   de 0,9s del JS y del tiempo que tarda la línea en dibujarse (~1,1s).

   z-index por encima de todo, incluido el botón de Kommo (100001 inline).  */

.v-loader {
  position: fixed;
  inset: 0;
  z-index: 100100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  background: var(--v-ink);
  animation: v-loader-out .5s ease 2.6s forwards;
}

/* El JS avisa que ya cargó: se apaga la animación y manda la transición.
   visibility con delay lo saca del flujo y del tabulador recién al final. */
.v-loader.is-listo {
  animation: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}

@keyframes v-loader-out {
  to { opacity: 0; visibility: hidden; }
}

.v-loader__logo {
  display: block;
  width: 186px;
  max-width: 52vw;
  height: auto;
  opacity: 0;
  animation: v-loader-logo .8s var(--v-ease) .1s forwards;
}

@keyframes v-loader-logo {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* La línea: 1px dorado que se dibuja desde la izquierda (a diferencia de
   Home, que crece desde el centro) y se apaga hacia la punta derecha. */
.v-loader__line {
  position: relative;
  display: block;
  width: 220px;
  max-width: 56vw;
  height: 1px;
  background: linear-gradient(90deg, var(--v-brass) 0%, var(--v-brass) 70%, rgba(183, 154, 98, 0) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  animation: v-loader-line .9s var(--v-ease) .3s forwards;
}

@keyframes v-loader-line {
  to { transform: scaleX(1); }
}

/* El punto: recorre la línea de ida y vuelta mientras se espera. Arranca
   cuando la línea terminó de dibujarse, para que se lea como un solo gesto. */
.v-loader__dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--v-brass);
  box-shadow: 0 0 10px 1px rgba(183, 154, 98, .55);   /* halo del punto, no decoración de caja */
  opacity: 0;
  animation: v-loader-dot 1.8s ease-in-out 1.2s infinite alternate;
}

@keyframes v-loader-dot {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 1; transform: translateX(150px); }
}

@media (max-width: 575px) {
  .v-loader { gap: 24px; }
  .v-loader__logo { width: 150px; }
  .v-loader__line { width: 180px; }
  @keyframes v-loader-dot {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 1; transform: translateX(120px); }
  }
}

/* Sin movimiento: logo y línea ya puestos, sin punto. La salida automática
   se mantiene (es la garantía de que la pantalla no queda tapada), sólo el
   desvanecido. */
@media (prefers-reduced-motion: reduce) {
  .v-loader__logo { opacity: 1; animation: none; }
  .v-loader__line { transform: none; animation: none; }
  .v-loader__dot  { display: none; }
}


/* ── 47. Card en touch y barra de confianza (2026-09-14) ───────────────────
   Punto 3, opción C: en touch no va la barra "Ver ficha" (la foto y el nombre
   ya son link a la ficha) y el botón de chat pasa a la esquina superior
   derecha de la caja, espejo de los tags y lejos del globo de Kommo que vive
   abajo a la izquierda. Pisa el `.v-card__quick { opacity:1 }` de §6.       */

@media (hover: none) {
  .v-card__quick {
    left: auto;
    right: 14px;
    top: 14px;
    bottom: auto;
    opacity: 1;
    transform: none;
  }
  .v-card__quick > a { display: none; }          /* "Ver ficha": redundante en touch */
  .v-card__quick .v-card__wa { width: 38px; height: 38px; }
  .v-card__tags { max-width: calc(100% - 72px); } /* que los tags no se metan bajo el botón */
  .v-card:hover .v-card__media img { transform: none; } /* sin hover, sin "levantar" */
}

/* Punto 5: los íconos van dentro de un círculo bone (mismo recurso de fondo
   que aísla las fotos), más grandes y con trazo más firme. Título 14px/500. */

.v-trust__item { align-items: center; }

.v-trust__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--v-r-pill);
  background: var(--v-bone);
}

.v-trust__item svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.6;
}

.v-trust__item strong {
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 640px) {
  .v-trust__ico { width: 50px; height: 50px; }
  .v-trust__item svg { width: 22px; height: 22px; }
}


/* ── 47. Botón flotante a Velvet Home ────────────────────────────────────────
   Markup en widgets/menu.tpl, envuelto en {if Application::get('SITIO_HOME_URL')}:
   sin esa clave el botón no se emite y no hay nada que ocultar por CSS.

   Va abajo a la DERECHA porque el chat de Kommo ocupa abajo a la izquierda
   (fixed, bottom 10px, left 10px, caja de 64px — ver §45). En 390px quedan
   165px entre los dos.

   z-index 1800: por encima de todo el contenido y por DEBAJO del overlay de
   los paneles (1900) y de los paneles mismos (1950), así que aunque fallara
   la clase de abajo nunca se monta sobre el menú ni sobre el carrito. El
   botón de Kommo vive en 100101 (inline del vendor) y no se toca.

   Piel oscura: el mismo negro del botón de Kommo, para que los dos flotantes
   se lean como un par. No va en dorado porque el dorado en este sitio es de
   las cuotas y los precios, y un flotante dorado compite con el reclamo
   comercial en la misma pantalla.                                            */

.v-home-fab,
.v-home-fab:link,
.v-home-fab:visited {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1800;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: var(--v-r-pill);
  background: var(--v-ink);
  color: var(--v-paper);
  font-family: var(--v-font-text);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--v-t-fast) ease, opacity var(--v-t-fast) ease;
}

.v-home-fab__marca { color: var(--v-brass-soft); }   /* 11.35 sobre --v-ink */
.v-home-fab svg    { flex: none; }

.v-home-fab:hover,
.v-home-fab:focus { color: var(--v-paper); text-decoration: none; transform: translateY(-2px); }

.v-home-fab:focus-visible { outline: 2px solid var(--v-brass); outline-offset: 3px; }

/* Con el menú mobile o el drawer del carrito abiertos desaparece, igual que
   el botón de Kommo (§45). La clase la pone y la saca velvet-2026.js. */
body.v-locked .v-home-fab {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
}

/* Mobile: más compacto y en la misma línea de base que Kommo. Se esconde al
   bajar y vuelve al subir (velvet-2026.js), porque en una pantalla chica un
   flotante fijo se monta sobre el contenido mientras se navega. */
@media (max-width: 640px) {
  .v-home-fab,
  .v-home-fab:link,
  .v-home-fab:visited {
    right: 14px;
    bottom: 16px;
    gap: 7px;
    padding: 14px 18px;    /* 39px de alto: es un target de dedo, no de mouse */
    font-size: 11px;
    letter-spacing: .12em;
  }
}

.v-home-fab.is-oculto {
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(100% + 24px));
}

/* Sin movimiento: el JS ni siquiera engancha el scroll (el botón queda fijo),
   y acá se anula la transición por si el usuario cambia la preferencia con la
   página abierta. */
@media (prefers-reduced-motion: reduce) {
  /* Con los tres selectores, como arriba: el grupo con :link/:visited vale
     (0,1,1) y a un `.v-home-fab` pelado (0,1,0) le gana. */
  .v-home-fab,
  .v-home-fab:link,
  .v-home-fab:visited { transition: none; }
  .v-home-fab:hover,
  .v-home-fab:focus { transform: none; }
  .v-home-fab.is-oculto { transform: none; }
}