/* ===================================================================
   KM Skin Store · Capa de marca KMDerma
   -------------------------------------------------------------------
   Unifica tipografía con la página principal (Nexa).
   Se carga DESPUÉS de style.css, por lo que solo sobrescribe fuentes.
   Para revertir: quitar el <link> de esta hoja en app_front.blade.php
   =================================================================== */

@font-face{
  font-family:'Nexa';
  src:url('../fonts/Nexa-ExtraLight.woff2') format('woff2'),
      url('../fonts/Nexa-ExtraLight.ttf') format('truetype');
  font-weight:200 300;      /* textos ligeros y notas */
  font-style:normal;
  font-display:swap;
}
/* Regular enderezada: el archivo original venia con una inclinacion
   mecanica de 9.97 grados; se corrigio con la transformacion inversa. */
@font-face{
  font-family:'Nexa';
  src:url('../fonts/Nexa-Regular-Recto.woff2') format('woff2'),
      url('../fonts/Nexa-Regular-Recto.ttf') format('truetype');
  font-weight:400 500;      /* texto de cuerpo */
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Nexa';
  src:url('../fonts/Nexa-Bold.woff2') format('woff2'),
      url('../fonts/Nexa-Bold.ttf') format('truetype');
  font-weight:600 900;      /* enfasis, botones y titulos */
  font-style:normal;
  font-display:swap;
}
/* El archivo original conserva su uso como cursiva real (<em>) */
@font-face{
  font-family:'Nexa';
  src:url('../fonts/Nexa-Regular.woff2') format('woff2'),
      url('../fonts/Nexa-Regular.ttf') format('truetype');
  font-weight:300 500;
  font-style:italic;
  font-display:swap;
}

/* --- Sustitución de Poppins y Hind por Nexa --- */
body,
button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
p, a, span, li, label, div,
.pixel-btn, .btn,
.single-product-wrapper, .product-title,
.header-area, .footer-area{
  font-family:'Nexa', 'Poppins', 'Hind', sans-serif;
}

/* --- Los iconos conservan SU tipografia, no la de marca ---
   El tema usa FontAwesome 4 ('FontAwesome'), no la 5.
   Se cubren tanto el elemento como su pseudo-elemento ::before,
   que es donde vive realmente el glifo. */
.fa, .fas, .far, .fab,
[class^="fa-"], [class*=" fa-"],
.fa::before, .fas::before, .far::before, .fab::before,
[class^="fa-"]::before, [class*=" fa-"]::before{
  font-family:'FontAwesome' !important;
  font-weight:normal !important;
  font-style:normal !important;
}
[class^="zmdi-"], [class*=" zmdi-"],
[class^="zmdi-"]::before, [class*=" zmdi-"]::before{
  font-family:'Material-Design-Iconic-Font' !important;
  font-weight:normal !important;
}
[class^="icon-"], [class*=" icon-"],
[class^="icon-"]::before, [class*=" icon-"]::before{
  font-family:'simple-line-icons' !important;
  font-weight:normal !important;
}


/* La tipografía decorativa de la marca se respeta */
.barcelony, [class*="barcelony"]{ font-family:'barcelony' !important; }



/* ============================================================
   Titulos de seccion
   -------------------------------------------------------------
   Nexa en mayusculas con espaciado amplio. Se retiro Dragfon
   por decision de diseño; la marca se sostiene con el color
   mocha y el ritmo del interletrado.
   ============================================================ */
.title-solares,
.title-sellers,
.title-sellers02,
.title-valorados,
.title-alta-gama,
.title-checkout,
.title-carrito,
.title-complementos,
.title-skintest,
.titulo--dragfon{
  font-family:'Nexa', sans-serif !important;
  text-transform:uppercase !important;
  font-weight:200 !important;      /* ExtraLight: aire y elegancia */
  letter-spacing:.22em;
  line-height:1.3;
  color:#a78774 !important;
  font-size:2rem;
}

@media (max-width:1023px){
  .title-solares, .title-sellers, .title-sellers02, .title-valorados,
  .title-alta-gama, .title-checkout, .title-carrito,
  .title-complementos, .title-skintest, .titulo--dragfon{
    font-size:1.7rem; letter-spacing:.2em; }
}
@media (max-width:767px){
  .title-solares, .title-sellers, .title-sellers02, .title-valorados,
  .title-alta-gama, .title-checkout, .title-carrito,
  .title-complementos, .title-skintest, .titulo--dragfon{
    font-size:1.35rem; letter-spacing:.16em; }
}


/* ============================================================
   Tarjetas de producto · altura uniforme
   -------------------------------------------------------------
   Los @if de la plantilla muestran u ocultan botones
   (Agregar / Agotado / Notificarme / WhatsApp) y el nombre del
   producto ocupa 1, 2 o 3 lineas. Eso hacia que cada tarjeta
   midiera distinto y los botones quedaran desalineados.

   Solucion: las laminas del carrusel se estiran a la misma
   altura y el bloque de botones se ancla abajo con margin-top:auto.
   ============================================================ */

/* 1 · Que todas las laminas de la fila midan igual */
.sellers-slides.owl-carousel .owl-stage,
.marcas-slides.owl-carousel .owl-stage{
  display:flex;
  align-items:stretch;
}
.sellers-slides.owl-carousel .owl-item,
.marcas-slides.owl-carousel .owl-item{
  display:flex;
  height:auto;
}
.sellers-slides .single-sellers-slide,
.marcas-slides .single-sellers-slide{
  display:flex;
  width:100%;
}

/* 2 · La tarjeta se organiza en columna y ocupa todo el alto */
.sellers-slides .bg-card,
.marcas-slides .bg-card{
  display:flex;
  flex-direction:column;
  flex:1;
  overflow:hidden;
}

/* 3 · Zona de imagen con altura estable */
.sellers-slides .bg-card > a:not(.vermas__btn),
.marcas-slides .bg-card > a:not(.vermas__btn){ flex:0 0 auto; }

/* 4 · El nombre del producto no descuadra la tarjeta */
.sellers-slides .bg-card > p,
.marcas-slides .bg-card > p{ margin-bottom:.4rem; }

/* 5 · El precio empuja hacia abajo y los botones se anclan al pie */
.sellers-slides .bg-card .precio,
.marcas-slides .bg-card .precio{ margin-bottom:.6rem; }

.sellers-slides .bg-card .btn-agregar,
.sellers-slides .bg-card .btn-agotado,
.sellers-slides .bg-card .btn-whatsapp,
.marcas-slides .bg-card .btn-agregar,
.marcas-slides .bg-card .btn-agotado,
.marcas-slides .bg-card .btn-whatsapp{
  margin-top:auto;          /* ancla el primer boton al pie */
  border-radius:0 0 9px 9px;
}
/* Si hay un segundo boton (p. ej. Notificarme), no se despega del primero */
.sellers-slides .bg-card .btn-agotado + .btn-agregar,
.marcas-slides .bg-card .btn-agotado + .btn-agregar{
  margin-top:0;
  border-radius:0 0 9px 9px;
}
.sellers-slides .bg-card .btn-agotado:not(:last-child),
.marcas-slides .bg-card .btn-agotado:not(:last-child){
  border-radius:0;
}


/* ============================================================
   Nombre del producto · evitar que se encime con el precio
   -------------------------------------------------------------
   El tema fija  .single-sellers-slide p { height:28px }  (una sola
   linea). Los nombres largos desbordan esa caja y se montan sobre
   el precio. Se cambia a altura automatica con un minimo, para que
   el contenido empuje hacia abajo en lugar de superponerse.
   ============================================================ */
.sellers-slides .single-sellers-slide p,
.marcas-slides .single-sellers-slide p{
  height:auto !important;
  min-height:28px;
  overflow:visible;
}

/* El bloque de precios tampoco necesita altura fija */
.sellers-slides .single-sellers-slide p.precio,
.marcas-slides .single-sellers-slide p.precio{
  height:auto !important;
  margin-top:.8rem;
  margin-bottom:.8rem;
}

/* Precio anterior y precio con descuento, bien separados */
.sellers-slides .single-sellers-slide div[style*="inline-flex"],
.marcas-slides .single-sellers-slide div[style*="inline-flex"]{
  gap:10px;
  justify-content:center;
  width:100%;
}


/* ============================================================
   Transiciones de catalogo
   -------------------------------------------------------------
   El tema no definia ningun estado hover para las tarjetas de
   producto ni para la imagen. Se agregan micro-interacciones
   discretas que indican que la tarjeta es pulsable.
   Duraciones cortas (250-500ms) y recorridos minimos, acordes
   al tono sobrio de la marca.
   ============================================================ */

.sellers-slides .bg-card,
.marcas-slides .bg-card{
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .35s cubic-bezier(.22,.61,.36,1),
             border-color .35s ease;
  will-change:transform;
}
.sellers-slides .bg-card:hover,
.marcas-slides .bg-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px -22px rgba(52,55,56,.45);
  border-color:#8a6f5f;
}

/* La imagen respira ligeramente al pasar el cursor */
.sellers-slides .bg-card > a,
.marcas-slides .bg-card > a{
  display:block;
  overflow:hidden;
}
.sellers-slides .bg-card img,
.marcas-slides .bg-card img{
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.sellers-slides .bg-card:hover img,
.marcas-slides .bg-card:hover img{
  transform:scale(1.04);
}

/* Botones de compra: cambio de color suave, no abrupto */
.btn-agregar,
.btn-agotado,
.btn-whatsapp,
.btn-sellers,
.btn-solares,
.btn-cupon,
.btn-regresar,
.btn-pagar{
  transition:background-color .3s ease, color .3s ease,
             border-color .3s ease, transform .25s ease;
}
.btn-sellers:hover,
.btn-solares:hover{ transform:translateY(-2px); }

/* El nombre del producto se tinta al pasar por la tarjeta */
.sellers-slides .bg-card p,
.marcas-slides .bg-card p{ transition:color .3s ease; }
.sellers-slides .bg-card:hover > p,
.marcas-slides .bg-card:hover > p{ color:#8a6f5f; }

/* Accesibilidad: quien pida menos movimiento no lo recibe */
@media (prefers-reduced-motion:reduce){
  .sellers-slides .bg-card,
  .marcas-slides .bg-card,
  .sellers-slides .bg-card img,
  .marcas-slides .bg-card img,
  .btn-agregar, .btn-agotado, .btn-whatsapp,
  .btn-sellers, .btn-solares, .btn-cupon,
  .btn-regresar, .btn-pagar{
    transition:none !important;
  }
  .sellers-slides .bg-card:hover,
  .marcas-slides .bg-card:hover{ transform:none; }
  .sellers-slides .bg-card:hover img,
  .marcas-slides .bg-card:hover img{ transform:none; }
}


/* ============================================================
   Boton "Ver todos" · igualar altura con las tarjetas vecinas
   -------------------------------------------------------------
   welcome.blade.php fija height:350/360/475px a .bg__card--vermas.
   Como las tarjetas de producto ahora crecen segun su contenido,
   esa altura fija dejaba el boton corto y el contenido arriba.
   Se libera la altura y se deja que el flex lo estire.
   ============================================================ */
.sellers-slides .bg__card--vermas,
.marcas-slides .bg__card--vermas{
  height:auto !important;
  min-height:350px;
  align-content:stretch !important;
  display:flex !important;
  flex-direction:column;
  flex:1;
}
.sellers-slides .bg__card--vermas .vermas__btn,
.marcas-slides .bg__card--vermas .vermas__btn{
  flex:1;                 /* ocupa todo el alto disponible */
  justify-content:center; /* icono y texto centrados verticalmente */
}
@media (max-width:767px){
  .sellers-slides .bg__card--vermas,
  .marcas-slides .bg__card--vermas{ min-height:300px; }
}


/* Centrado definitivo del boton "Ver todos" */
.bg__card--vermas{
  display:flex !important;
  flex-direction:column !important;
  align-content:stretch !important;
  padding:0 !important;
}
.bg__card--vermas > .vermas__btn{
  flex:1 1 auto !important;
  height:auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}


/* ============================================================
   Logos de marcas · enfasis al pasar el cursor
   -------------------------------------------------------------
   Los logos son enlaces pero no lo aparentaban. En reposo se
   atenuan (escala de grises + opacidad), lo que ademas armoniza
   los logos multicolor con la paleta calida. Al pasar el cursor
   recuperan su color y crecen ligeramente.
   ============================================================ */

.classynav ul li .megamenu .single-mega a img,
.marcas-grid a img,
.row .col-md-3 center > a img[alt]{
  filter:grayscale(1);
  opacity:.7;
  transition:filter .4s ease, opacity .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.classynav ul li .megamenu .single-mega a:hover img,
.marcas-grid a:hover img,
.row .col-md-3 center > a:hover img[alt]{
  filter:grayscale(0);
  opacity:1;
  transform:scale(1.08);
}

/* El bloque completo tambien responde, no solo la imagen */
.classynav ul li .megamenu .single-mega a{
  display:inline-block;
  padding:6px;
  border-radius:8px;
  transition:background-color .35s ease;
}
.classynav ul li .megamenu .single-mega a:hover{
  background-color:rgba(167,135,116,.08);
}

@media (prefers-reduced-motion:reduce){
  .classynav ul li .megamenu .single-mega a img,
  .marcas-grid a img,
  .row .col-md-3 center > a img[alt]{
    transition:none;
  }
  .classynav ul li .megamenu .single-mega a:hover img,
  .marcas-grid a:hover img,
  .row .col-md-3 center > a:hover img[alt]{
    transform:none;
  }
}


/* ============================================================
   Menu de Categorias · jerarquia y enfasis
   -------------------------------------------------------------
   A diferencia de Marcas (logos), aqui son enlaces de texto
   agrupados por categoria. El enfasis adecuado no es escala ni
   color de imagen, sino jerarquia clara y una respuesta sutil
   al pasar el cursor.
   ============================================================ */

/* Encabezado de cada categoria: color de marca y separador.
   Lleva !important porque la plantilla usa estilos en linea. */
.classynav ul li .megamenu .single-mega > li > p{
  font-family:'Nexa', sans-serif !important;
  color:#a78774 !important;
  font-size:.82rem !important;
  letter-spacing:.12em !important;
  padding-bottom:.5rem;
  margin-bottom:.4rem;
  border-bottom:1px solid rgba(167,135,116,.25);
}

/* Enlaces de tags: se desplazan y se tintan al pasar el cursor */
.classynav ul li .megamenu .single-mega > li > a{
  display:block;
  color:#343738;
  padding:.15rem .5rem;
  border-radius:6px;
  transition:color .28s ease, background-color .28s ease,
             transform .28s cubic-bezier(.22,.61,.36,1);
}
.classynav ul li .megamenu .single-mega > li > a:hover,
.classynav ul li .megamenu .single-mega > li > a:focus{
  color:#8a6f5f;
  background-color:rgba(167,135,116,.08);
  transform:translateX(4px);
  text-decoration:none;
}

@media (prefers-reduced-motion:reduce){
  .classynav ul li .megamenu .single-mega > li > a{ transition:none; }
  .classynav ul li .megamenu .single-mega > li > a:hover{ transform:none; }
}


/* ============================================================
   Paginas /categorias y /marcas
   Version movil de los menus del encabezado.
   Diseño pensado primero para celular: buscador fijo, rejilla
   de dos columnas y objetivos tactiles amplios.
   ============================================================ */

/* --- Encabezado con buscador --- */
.explora-head{
  position:sticky; top:0; z-index:20;
  background:#fff;
  padding:1.2rem 0 .9rem;
  margin-bottom:1.5rem;
  border-bottom:1px solid rgba(167,135,116,.18);
}
.explora-head .title-solares{ margin-bottom:.8rem; }

.explora-buscador{
  position:relative;
  max-width:520px;
  margin:0 auto;
}
.explora-buscador .fa-search{
  position:absolute; left:1rem; top:50%; transform:translateY(-50%);
  color:#a78774; font-size:.95rem; pointer-events:none;
}
.explora-input{
  width:100%;
  font-family:'Nexa', sans-serif;
  font-size:1rem;
  color:#343738;
  padding:.85rem 2.6rem .85rem 2.6rem;
  border:1px solid rgba(167,135,116,.4);
  border-radius:100px;
  background:#fff;
  outline:none;
  transition:border-color .3s ease, box-shadow .3s ease;
  -webkit-appearance:none;
}
.explora-input::placeholder{ color:#9a9a9a; }
.explora-input:focus{
  border-color:#a78774;
  box-shadow:0 0 0 3px rgba(167,135,116,.15);
}
.explora-input::-webkit-search-cancel-button{ display:none; }

.explora-limpiar{
  position:absolute; right:.55rem; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(167,135,116,.12); color:#8a6f5f;
  font-size:1.2rem; line-height:1; display:none;
  transition:background-color .25s ease;
}
.explora-limpiar:hover{ background:rgba(167,135,116,.25); }
.explora-buscador.tiene-texto .explora-limpiar{ display:block; }

.explora-conteo{
  text-align:center; margin:.7rem 0 0;
  font-size:.82rem; color:#888888; letter-spacing:.04em;
}
.explora-vacio{
  text-align:center; padding:2.5rem 1rem;
  font-size:1.05rem; color:#888888;
}

/* --- Rejilla de marcas --- */
.marcas-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);   /* celular: dos por fila */
  gap:.9rem;
  padding-bottom:2rem;
}
.marca-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem;
  padding:1.2rem .8rem;
  border:1px solid rgba(167,135,116,.22);
  border-radius:14px;
  background:#fff;
  text-decoration:none;
  min-height:130px;                      /* objetivo tactil amplio */
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.marca-item:hover, .marca-item:focus{
  border-color:#a78774;
  box-shadow:0 12px 26px -18px rgba(52,55,56,.4);
  transform:translateY(-3px);
  text-decoration:none;
}
.marca-img{ display:flex; align-items:center; justify-content:center; height:64px; }
.marca-img img{
  max-width:100%; max-height:64px; width:auto; height:auto;
  filter:grayscale(1); opacity:.7;
  transition:filter .4s ease, opacity .4s ease, transform .4s ease;
}
.marca-item:hover .marca-img img,
.marca-item:focus .marca-img img{
  filter:grayscale(0); opacity:1; transform:scale(1.06);
}
.marca-nombre{
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:#888888; text-align:center; line-height:1.3;
}

/* --- Bloques de categoria --- */
.cat-bloque{ padding-bottom:.5rem; }
.cat-titulo{
  font-family:'Nexa', sans-serif;
  text-transform:uppercase;
  font-weight:200;
  letter-spacing:.2em;
  font-size:1.5rem; line-height:1.35; color:#a78774;
  text-align:center; margin-bottom:1rem;
}
.cat-tags{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
}
.cat-tag{
  display:inline-block;
  font-size:.95rem; line-height:1.4; color:#343738;
  padding:.6rem 1.1rem;                  /* altura tactil comoda */
  border:1px solid rgba(167,135,116,.25);
  border-radius:100px;
  background:#fff;
  text-decoration:none;
  transition:color .25s ease, background-color .25s ease,
             border-color .25s ease, transform .25s ease;
}
.cat-tag:hover, .cat-tag:focus{
  color:#fff; background-color:#a78774; border-color:#a78774;
  transform:translateY(-2px); text-decoration:none;
}
.cat-sep{
  border:0; height:1px; margin:1.8rem auto; max-width:640px;
  background:linear-gradient(90deg, transparent,
    rgba(167,135,116,.4) 20%, rgba(167,135,116,.4) 80%, transparent);
}
.cat-bloque:last-child .cat-sep{ display:none; }

/* --- Pantallas mayores --- */
@media (min-width:600px){
  .marcas-grid{ grid-template-columns:repeat(3,1fr); gap:1.1rem; }
}
@media (min-width:900px){
  .marcas-grid{ grid-template-columns:repeat(4,1fr); gap:1.3rem; }
  .cat-titulo{ font-size:1.8rem; }
  .cat-tag{ font-size:1rem; }
}

@media (prefers-reduced-motion:reduce){
  .marca-item, .marca-img img, .cat-tag{ transition:none; }
  .marca-item:hover, .cat-tag:hover{ transform:none; }
  .marca-item:hover .marca-img img{ transform:none; }
}


/* ============================================================
   Tarjetas de producto en REJILLA
   -------------------------------------------------------------
   Las paginas /pormarca, /bestsellers, /productos y el buscador
   usan bestsellers.blade.php, que coloca las mismas tarjetas en
   columnas Bootstrap (col-lg-3) en vez de un carrusel. Las
   reglas anteriores estaban acotadas a .sellers-slides /
   .marcas-slides, asi que aqui no aplicaban.
   ============================================================ */

/* La columna y la lamina ocupan todo el alto de su fila */
[class*="col-"] > .single-sellers-slide{
  display:flex;
  height:100%;
}
[class*="col-"] > .single-sellers-slide > .bg-card{
  display:flex;
  flex-direction:column;
  flex:1;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .35s cubic-bezier(.22,.61,.36,1),
             border-color .35s ease;
}
[class*="col-"] > .single-sellers-slide > .bg-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px -22px rgba(52,55,56,.45);
  border-color:#8a6f5f;
}

/* Nombre del producto: sin la altura fija que provoca solapamiento */
[class*="col-"] > .single-sellers-slide p{
  height:auto !important;
  min-height:28px;
  overflow:visible;
}
[class*="col-"] > .single-sellers-slide p.precio{
  height:auto !important;
  margin-top:.8rem;
  margin-bottom:.8rem;
}

/* Imagen: contenedor estable y zoom sutil */
[class*="col-"] > .single-sellers-slide > .bg-card > a{
  display:block;
  overflow:hidden;
  flex:0 0 auto;
}
[class*="col-"] > .single-sellers-slide > .bg-card img{
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
[class*="col-"] > .single-sellers-slide > .bg-card:hover img{
  transform:scale(1.04);
}

/* Botones anclados al pie, alineados en toda la fila */
[class*="col-"] > .single-sellers-slide .btn-agregar,
[class*="col-"] > .single-sellers-slide .btn-agotado,
[class*="col-"] > .single-sellers-slide .btn-whatsapp{
  margin-top:auto;
  border-radius:0 0 9px 9px;
}
[class*="col-"] > .single-sellers-slide .btn-agotado + .btn-agregar{
  margin-top:0;
  border-radius:0 0 9px 9px;
}
[class*="col-"] > .single-sellers-slide .btn-agotado:not(:last-child){
  border-radius:0;
}

/* Las filas de Bootstrap igualan la altura de sus columnas */
.row:has(> [class*="col-"] > .single-sellers-slide){
  align-items:stretch;
}

@media (prefers-reduced-motion:reduce){
  [class*="col-"] > .single-sellers-slide > .bg-card,
  [class*="col-"] > .single-sellers-slide > .bg-card img{ transition:none; }
  [class*="col-"] > .single-sellers-slide > .bg-card:hover{ transform:none; }
  [class*="col-"] > .single-sellers-slide > .bg-card:hover img{ transform:none; }
}


/* ============================================================
   Escala tipografica del catalogo
   -------------------------------------------------------------
   Tres pesos, tres funciones:
     ExtraLight  titulos amplios y textos secundarios
     Regular     nombres de producto y cuerpo
     Bold        precios, botones y enfasis
   ============================================================ */

/* Marca del producto: secundaria, ligera y espaciada */
.single-sellers-slide > .bg-card > span,
.single-sellers-slide .bg-card > span{
  display:block;
  font-weight:200;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#888888;
  margin-bottom:.3rem;
}

/* Nombre del producto: peso de lectura */
.single-sellers-slide .bg-card > p:not(.precio){
  font-weight:400;
  font-size:.95rem;
  color:#343738;
  letter-spacing:.01em;
}

/* Precio: el dato que debe destacar */
.single-sellers-slide .bg-card .precio{
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:.01em;
  color:#343738;
}
.single-sellers-slide .bg-card .precio.tachado{
  font-weight:200;
  font-size:.95rem;
  color:#888888;
}

/* Botones: firmes y espaciados */
.btn-agregar, .btn-agotado, .btn-whatsapp{
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.btn-sellers, .btn-solares{
  font-weight:400;
  letter-spacing:.08em;
}