/* ============================================================================
   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;
  font-weight: 300 400;                 /* rango: es una fuente variable */
  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: 300 500;
  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-on-dark-dim: rgba(255, 255, 255, .55);
  --v-brass-soft:  #DCC79A;             /* eyebrow sobre fondo oscuro */
  --v-whatsapp:    #25D366;             /* identidad de terceros — única excepción de paleta */

  /* Radios */
  --v-r-card:  24px;
  --v-r-block: 32px;
  --v-r-pill:  999px;

  /* 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: 22px;
  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); }
.v-card:hover .v-card__media img { transform: scale(1.05); }

.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; }

.v-card__quick .v-card__wa {
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--v-paper);
  color: var(--v-ink);
}

.v-card__quick .v-card__wa:hover { background: var(--v-sand); color: var(--v-ink); }

/* 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: 20px;
  font-weight: 300;
  line-height: 1.25;
  color: var(--v-ink);
  text-transform: none;
}

.v-card__name a { color: 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: 16px; }
  .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);
}

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-dim);
  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: rgba(255, 255, 255, .07);
  border-radius: var(--v-r-pill);
}

.v-topbar__search svg { flex: none; }

/* 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);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--v-paper);
}

.v-topbar__input::placeholder { color: #8A857D; opacity: 1; }

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

.v-topbar__links a {
  color: var(--v-on-dark-dim);
  text-decoration: none;
  transition: color var(--v-t-fast) ease;
}

.v-topbar__links a:hover,
.v-topbar__links a:focus { 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;
}

.v-logo img { display: block; width: auto; height: 38px; 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;
}

.v-burger {
  display: none;
  border: 1px solid var(--v-line);
  background: transparent;
  cursor: pointer;
}

.v-burger span {
  display: block;
  width: 17px;
  height: 1px;
  margin: 3px 0;
  background: 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);
}

.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: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--v-r-pill); }
  .v-header__inner  { height: 72px; }
  .v-logo img       { height: 32px; }
  .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 flotante de WhatsApp (z-index 2000) queda por encima del overlay
   del off-canvas: mientras el menú está abierto, se oculta. */
body.v-locked #BotonWA,
body.v-locked .floating-wpp { opacity: 0; pointer-events: none; }


/* ============================================================================
   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: grid;
  place-items: center;
  padding: 22px;
}

.v-card__media > a.velvet-product-link img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* El badge de envío incluido usa el PNG existente, más chico y en píldora */
.v-tag--ship { background: var(--v-paper-90); padding: 4px 10px; }
.v-tag--ship .v-tag__icon { height: 12px; }

/* 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; }

  /* Sin superposición en mobile */
  .v-overlap           { margin-top: 0; padding-top: 0; }
  .v-overlap__box      { padding: 32px 0 0; border-radius: 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.                                                      */

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: var(--v-paper); }

a.v-btn--light, a.v-btn--light:link, a.v-btn--light:visited { color: var(--v-ink); }

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: var(--v-ink); }

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: var(--v-paper); }

.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: var(--v-paper); }
.v-card__quick .v-card__wa:link, .v-card__quick .v-card__wa:visited { color: var(--v-ink); }

/* Nombre de producto y notas del blog */
.v-card__name a:link, .v-card__name a:visited { color: var(--v-ink); }
a.v-post, a.v-post:link, a.v-post:visited { color: var(--v-ink); }


/* ── 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, discretas, fuera del área de la card */
.v-carousel .owl-nav { margin: 0; }

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

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

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

.v-carousel .owl-nav button.owl-prev.disabled,
.v-carousel .owl-nav button.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 */
.v-hero__foot { bottom: 128px; }
.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; }
  .v-card__name          { min-height: calc(1.25em * 2); }
}


/* ── 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: 0;
  padding: 0;
  background: transparent;
}

.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: 34px; padding-bottom: 6px; }

/* 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 10px;
  font-family: var(--v-font-display);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--v-ink);
  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: 11.5px;
  font-weight: 300;
  letter-spacing: .14em;
  text-transform: uppercase;
}

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

.page-wrap .breadcrumbs li a,
.page-wrap .breadcrumbs li a:link,
.page-wrap .breadcrumbs li a:visited { color: var(--v-slate); }
.page-wrap .breadcrumbs li a:hover { color: var(--v-ink); }
.page-wrap .breadcrumbs li.active { color: var(--v-ink); }

/* 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: 22px; }
}


/* ── 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: var(--v-paper); }

.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: var(--v-ink); }

.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; }

.page-wrap .btn-ks-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);
}

.page-wrap input::placeholder,
.page-wrap textarea::placeholder { color: var(--v-slate); opacity: .8; }

.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) con las esquinas del sistema */
.page-wrap .pro-list-wrap .banner-categoria,
.page-wrap .pro-list-wrap > .section-content img.img-responsive:first-of-type,
.page-wrap .banner-top img { border-radius: var(--v-r-block); 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 <select> de agrupación quedan en el DOM porque main.js los lee, pero se
   ocultan: el control visible son los chips. #categoria y #ordenar-precio sí
   se muestran, restilados. */
.page-wrap #tamano,
.page-wrap #modelo,
.page-wrap #cama,
.page-wrap #mesa { display: none !important; }

.page-wrap select.order-by {
  width: auto;
  min-width: 180px;
  padding: 11px 42px 11px 20px;
  border-radius: var(--v-r-pill);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: none;
}

/* Chips de filtro, generados por velvet-2026.js a partir de los <select> */
.v-filtros { margin: 4px 0 26px; }

.v-filtro { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--v-line); }
.v-filtro:last-child { border-bottom: 0; margin-bottom: 0; }

.v-filtro__titulo {
  margin: 0 0 12px;
  font-family: var(--v-font-text);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--v-slate);
}

.v-filtro__chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* 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) {
  .v-filtros { margin-bottom: 18px; }
  .page-wrap .sort-right { width: 100%; }
  .page-wrap select.order-by { flex: 1 1 160px; min-width: 0; }
}

/* La barra de filtros pasa a columna: el rótulo "Filtros:" del template
   encabeza, después los chips y al final los selects de categoría y orden.
   Se anulan los floats de Bootstrap 3 (pull-left / pull-right). */
.page-wrap .pro-sorting {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.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 */
.page-wrap .au-btn--yellow {
  background: transparent;
  border-color: var(--v-line);
  color: var(--v-ink);
}

.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); }

/* WhatsApp: ú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-radius: var(--v-r-pill);
  background: var(--v-whatsapp);
  font-family: var(--v-font-text);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.page-wrap .btn-asesor:hover { background: #1EBE5A; }

/* 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: su
   viewport tiene que recortar el riel horizontal. */
.page-wrap .flexslider,
.page-wrap .flex-viewport { overflow: hidden; max-width: 100%; }
.page-wrap .flexslider .slides { max-width: 100%; }
.page-wrap .flexslider .slides > li { 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%; }