/* REF: UI-002 - Tarjeta de producto - 10/09/2026
 * Implementa el frame de Figma "WEB-VP" nodo 308:2.
 * Estilos del componente .vs-card, definido en la plantilla del Porto Builder
 * "Product Type" (templates/porto-builder/product-type-v2.html).
 * Solo clases propias: nunca contra porto-gb-<hash>.
 *
 * Valores tomados literalmente del frame:
 *   rojo unico  #E0111B      tarjeta   sin borde ni radio
 *   categoria   JetBrains Mono 400 · 9.5px · ls 0.57 · MAYUS
 *   titulo      Inter 600 · 16px · lh 18.2
 *   precio      JetBrains Mono 700 · 20px  (simbolo y decimales 400 · 11px)
 *   badges      pill · JBM 500 · NUEVO 22px · oferta 15px
 *   boton +     38x38 circulo
 *   ritmo       padding 15 · separacion 11 entre bloques
 */

/* --- tipografias (locales: sin conexion a Google Fonts) -----------------
 * JetBrains Mono es VARIABLE (eje wght 400-800): un unico archivo cubre los
 * tres pesos que usa el frame (400, 500 y 700). Inter 600 si es estatica.
 * 56 KB en total. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../../fonts/jetbrainsmono.woff2") format("woff2-variations"),
       url("../../fonts/jetbrainsmono.woff2") format("woff2");
}
/* Cursiva real: el frame usa JetBrainsMono-MediumItalic en los dos badges.
 * Es un archivo aparte; sin el, el navegador inclinaria la recta (falsa
 * cursiva) y no es la misma letra. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("../../fonts/jetbrainsmono-italic.woff2") format("woff2-variations"),
       url("../../fonts/jetbrainsmono-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../fonts/inter-600.woff2") format("woff2");
}

:root {
  --vs-red: #e0111b;          /* rojo unico del frame */
  --vs-red-dark: #b60d15;     /* solo para hover, no esta en el frame */
  --vs-ink: #000000;
  --vs-muted: #999999;
  --vs-pad: 15px;          /* padding del bloque de info, del frame */
  --vs-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --vs-sans: "Inter", "Nunito", sans-serif;
}

/* --- contenedor ---------------------------------------------------------
 * El frame no lleva marco: fondo blanco y nada mas. */
.vs-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: #ffffff;
}
/* Porto da 50px de padding vertical a toda .porto-section; el frame usa 15 */
.vs-card.porto-section,
.porto-section.vs-card {
  padding: 0 0 15px !important;
}

/* --- imagen: la trabaja Porto, aqui solo se limpia el espaciado --------- */
.vs-card .vs-card__image {
  position: relative;
  margin-bottom: 15px;
}
.vs-card .vs-card__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- badges -------------------------------------------------------------
 * En el frame van en esquinas opuestas: oferta arriba izquierda,
 * NUEVO arriba derecha. Porto los imprime dentro de .labels. */
.vs-card .vs-card__image .labels {
  position: absolute;
  inset: 13px 14px auto 14px;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}
.vs-card .vs-card__image .labels .onsale,
.vs-card .vs-card__image .labels .onnew {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 31px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--vs-red);
  color: #ffffff;
  font-family: var(--vs-mono);
  font-style: italic;   /* el frame usa la cursiva en AMBOS badges */
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  transform: none;
  pointer-events: auto;
}
/* la etiqueta de oferta ("-13%") va a la izquierda y mas pequena */
.vs-card .vs-card__image .labels .onsale {
  order: 1;
  margin-right: auto;
  font-size: 15px;
}
/* "NUEVO" a la derecha, en grande */
.vs-card .vs-card__image .labels .onnew {
  order: 2;
  margin-left: auto;
  font-size: 22px;
}

/* --- bloque de informacion ----------------------------------------------
 * En el frame, el bloque bajo la imagen (Frame 8) lleva 15px de padding por
 * los CUATRO lados: 340px de contenido dentro de una tarjeta de 370.
 * Como el Builder no envuelve estos tres elementos en un contenedor propio,
 * el sangrado lateral se aplica a cada uno. El de arriba es el
 * margin-bottom de la imagen. */
.vs-card .vs-card__cat,
.vs-card .vs-card__title,
.vs-card .vs-card__footer {
  padding-left: var(--vs-pad);
  padding-right: var(--vs-pad);
}
/* El pie tambien es .porto-section, y Porto le mete 50px arriba y abajo.
 * Hay que anularlo explicitamente o la tarjeta crece 100px de golpe. */
.vs-card .vs-card__footer.porto-section,
.vs-card .porto-section.vs-card__footer {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: var(--vs-pad) !important;
  padding-right: var(--vs-pad) !important;
}

/* --- categoria raiz ------------------------------------------------------ */
.vs-card .vs-card__cat {
  display: block;
  margin: 0 0 11px;
  font-family: var(--vs-mono);
  font-size: 9.5px;
  font-weight: 400;
  line-height: 12.5px;
  letter-spacing: 0.57px;
  text-transform: uppercase;
  color: var(--vs-red);
}
.vs-card .vs-card__cat a {
  color: inherit;
  text-decoration: none;
}
.vs-card .vs-card__cat a:hover {
  color: var(--vs-red-dark);
}

/* --- nombre --------------------------------------------------------------
 * El frame le da 5px de aire arriba y abajo dentro de su contenedor. */
.vs-card .vs-card__title {
  margin: 0 0 11px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-family: var(--vs-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 18.2px;
  letter-spacing: 0;
  color: var(--vs-ink);
}
.vs-card .vs-card__title a {
  color: inherit;
  text-decoration: none;
}

/* --- pie: precio a la izquierda, "+" a la derecha ----------------------- */
.vs-card .vs-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}

/* --- precio --------------------------------------------------------------
 * Frame: "S/" y los decimales en rojo a 11px; los enteros negros a 20px.
 * Los decimales los envuelve el filtro de inc/product-card.php. */
.vs-card .vs-card__price {
  margin: 0;
  padding: 0;
  line-height: 1;
}
/* El !important es necesario: hay un <style> en linea del sitio con
 * `.price { margin-bottom: 60px !important }` que si no gana y deja el pie
 * de la tarjeta con 83px de alto en vez de 38. */
.vs-card .vs-card__price .price {
  margin: 0 !important;
  font-family: var(--vs-mono);
  font-size: 20px;
  font-weight: 700;
  line-height: 20px;
  color: var(--vs-ink);
}
.vs-card .vs-card__price .woocommerce-Price-currencySymbol,
.vs-card .vs-card__price .vs-card__price-dec {
  font-family: var(--vs-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--vs-red);
}
.vs-card .vs-card__price .woocommerce-Price-currencySymbol {
  margin-right: 0.35em;
}
/* precio tachado (producto en oferta) */
.vs-card .vs-card__price .price del {
  font-size: 11px;
  font-weight: 400;
  color: var(--vs-muted);
  margin-right: 0.5em;
}
.vs-card .vs-card__price .price del .woocommerce-Price-currencySymbol,
.vs-card .vs-card__price .price del .vs-card__price-dec {
  font-size: inherit;
  color: inherit;
}
/* Precio rebajado. El frame no define estado de oferta, asi que se mantiene
 * el mismo tratamiento que el precio normal: numero en negro, simbolo y
 * decimales en rojo. El <bdi> interior traia #ff3232 de otra hoja. */
.vs-card .vs-card__price .price ins,
.vs-card .vs-card__price .price ins bdi,
.vs-card .vs-card__price .price ins .amount {
  text-decoration: none;
  color: var(--vs-ink);
}
.vs-card .vs-card__price .price ins .woocommerce-Price-currencySymbol,
.vs-card .vs-card__price .price ins .vs-card__price-dec {
  color: var(--vs-red);
}

/* --- boton "+" -----------------------------------------------------------
 * simple = anade al carrito (ajax); variable = lleva a la ficha.
 * Porto pone la clase del bloque en el propio <a>. */
.vs-card a.vs-card__add,
.vs-card a.vs-card__add.button,
.vs-card .vs-card__add a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: var(--vs-red);
  color: #ffffff;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.vs-card a.vs-card__add:hover,
.vs-card a.vs-card__add:focus,
.vs-card .vs-card__add a:hover,
.vs-card .vs-card__add a:focus {
  background: var(--vs-red-dark);
  color: #ffffff;
  transform: scale(1.06);
}
.vs-card a.vs-card__add i,
.vs-card .vs-card__add a i {
  margin: 0;
  font-size: 16px;
}
/* estados ajax de WooCommerce */
.vs-card a.vs-card__add.loading,
.vs-card .vs-card__add a.loading {
  opacity: 0.6;
  pointer-events: none;
}
.vs-card a.vs-card__add.added i::before,
.vs-card .vs-card__add a.added i::before {
  content: "\e84e"; /* porto-icon-ok */
}
.vs-card .vs-card__footer .added_to_cart { /* enlace "Ver carrito" que Woo inyecta */
  display: none;
}

/* --- movil ---------------------------------------------------------------
 * El frame es de un solo tamano; la rejilla la maneja Porto. Aqui solo se
 * baja la tipografia en pantallas estrechas para que no desborde. */
@media (max-width: 480px) {
  .vs-card .vs-card__title { font-size: 14px; line-height: 16px; }
  .vs-card .vs-card__price .price { font-size: 17px; line-height: 17px; }
  .vs-card .vs-card__image .labels .onnew { font-size: 17px; }
  .vs-card .vs-card__image .labels .onsale { font-size: 13px; }
  .vs-card .vs-card__image .labels { inset: 10px 10px auto 10px; }
}