/*
Theme Name: VM Soluciones
Theme URI: https://vm-soluciones.com.ar/
Author: VM Soluciones
Author URI: https://vm-soluciones.com.ar/
Description: Base — catálogo + carrito + área clientes (Bootstrap 5)
Version: 1.1.0
Text Domain: vmsoluciones
*/
/* Heavitas */
@font-face{
  font-family: "Heavitas";
  src: url("assets/fonts/Heavitas.woff2") format("woff2"),
       url("assets/fonts/Heavitas.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body { font-family: "Roboto","Helvetica Neue",Arial,sans-serif; }

h1, h2{
  font-family: "Heavitas","Helvetica Neue",Arial,sans-serif;
  color:#666 !important;
}

main{
  background:
    linear-gradient(180deg, #dfdfdf 0%, #FFFFFF 100%) no-repeat;
  background-size: 100% 90px;   /* alto del gradiente */
  background-color: #FFFFFF;    /* resto de la página */
  border-top: 1px solid #fff!important;
}
/* =========================
   Colores globales (sin theme.json)
   ========================= */
:root{
  /* Paleta VM */
  --vms-primary: #666666;
  --vms-primary-rgb: 102,102,102;
  --vms-accent:  #FFBD00;          /* brillo / hover */
  --vms-accent-rgb: 255,189,0;

  /* Bootstrap core */
  --bs-primary: var(--vms-primary);
  --bs-primary-rgb: var(--vms-primary-rgb);

  /* Links */
  --bs-link-color: var(--vms-primary);
  --bs-link-color-rgb: var(--vms-primary-rgb);
  --bs-link-hover-color: var(--vms-accent);
  --bs-link-hover-color-rgb: var(--vms-accent-rgb);

  /* Énfasis/“subtle” */
  --bs-primary-text-emphasis: #8A5A00;
  --bs-primary-bg-subtle:    #FFF2D6;
  --bs-primary-border-subtle:#FFE29A;

  /* Componentes comunes */
  --bs-nav-pills-link-active-bg: var(--vms-primary);
  --bs-pagination-active-bg:     var(--vms-primary);
  --bs-pagination-active-border-color: var(--vms-primary);
  --bs-btn-focus-shadow-rgb:     var(--vms-accent-rgb);

  /* Secondary (gris Bootstrap) → 777 */
  --bs-secondary: #777777;
  --bs-secondary-rgb: 119,119,119;
}

/* Primary original de Bootstrap solo para badges de estados */
.badge.bg-primary-original,
.text-bg-primary-original{
  background-color: #0d6efd !important; /* primary original BS5 */
  color: #fff !important;
}


/* Refuerzos directos */
.btn-primary{background-color:var(--vms-primary);border-color:var(--vms-primary);}
.btn-primary:hover,.btn-primary:focus{background-color:var(--vms-accent);border-color:var(--vms-accent);}
.btn-outline-primary{color:var(--vms-primary);border-color:var(--vms-primary);}
.btn-outline-primary:hover,.btn-outline-primary:focus{background-color:var(--vms-primary);border-color:var(--vms-primary);color:#fff;}

.text-primary{color:var(--vms-primary)!important;}
.bg-primary{background-color:var(--vms-primary)!important;}
.border-primary{border-color:var(--vms-primary)!important;}
.link-primary{color:var(--vms-primary)!important;}
.link-primary:hover{color:var(--vms-accent)!important;}

.nav-pills .nav-link.active,
.dropdown-item.active,
.page-item.active .page-link,
.list-group-item.active{
  background-color:var(--vms-primary);
  border-color:var(--vms-primary);
  color:#fff;
}

/* Outline secondary en #777 */
:root{
  --bs-secondary: #777777;
  --bs-secondary-rgb: 119,119,119;
}

.btn-outline-secondary{
  color:#777 !important;
  border-color:#777 !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus{
  background-color:#777 !important;
  border-color:#777 !important;
  color:#fff !important;
}
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary.show,
.btn-outline-secondary[aria-expanded="true"]{
  background-color:#666 !important;
  border-color:#666 !important;
  color:#fff !important;
}

/* Formularios y focus */
.form-check-input:checked{background-color:var(--vms-primary);border-color:var(--vms-primary);}
.form-range::-webkit-slider-thumb{background-color:var(--vms-primary);}
.form-range::-moz-range-thumb{background-color:var(--vms-primary);}
.form-control:focus,.form-select:focus{
  box-shadow:0 0 0 .25rem rgba(var(--vms-accent-rgb),.35);
  border-color:var(--vms-primary);
}

/* Badges y alertas */
.badge.bg-primary,.text-bg-primary{background-color:var(--vms-primary)!important;}
.alert-primary{
  --bs-alert-bg:var(--bs-primary-bg-subtle);
  --bs-alert-border-color:var(--bs-primary-border-subtle);
  --bs-alert-color:var(--bs-primary-text-emphasis);
}
.progress-bar.bg-primary{background-color:var(--vms-primary)!important;}



/* =========================
Header (dark) 
========================= */
/* Header oscuro con mismo fondo que el footer (#333→#666) y la PNG arriba */
.header-dark{
  position: relative;
  background-image:
    url('assets/img/bg-normas-top.png'),
    linear-gradient(180deg, #555 0%, #333 100%);
  background-repeat: repeat-x, no-repeat;
  background-position: top center, top center;
  background-size: auto, 100% 100%;
  border-bottom: 1px solid #555 !important;
  color: #fff;
}

/* Nav pills sobre fondo oscuro */
.header-dark .nav-pills .nav-link{color:rgba(255,255,255,.85);border-radius:.5rem;}
.header-dark .nav-pills .nav-link:hover{color:#fff;}

/* Activo del menú = igual a .btn-gray */
.header-dark .nav-pills .nav-link.active,
.header-dark .nav-pills .show > .nav-link,
.header-dark .nav-pills .nav-link[aria-expanded="true"]{
  background: linear-gradient(180deg, #555 0%, #444 100%) !important;
  color: #fff !important;
  border: 1px solid #444 !important;
  border-bottom-color: #555 !important;
  border-radius: .4rem !important;
  box-shadow: 0 2px 2px rgba(0,0,0,.40) !important;
}


/* Inputs en header oscuro */
.header-dark .form-control{background-color:#555;border-color:#777;color:#fff;}
.header-dark .form-control::placeholder{color:rgba(255,255,255,.7);}

/* Botones Cuenta + Carrito (sin cambios) */
.header-dark .btn-header,
.header-dark #gd-mini-cart .btn{
  border-radius:var(--bs-border-radius)!important;
  background:linear-gradient(180deg,#FFBD00 0%,#FF9900 100%)!important;
  border-color:#FF9900!important;
  color:#212529!important;
  box-shadow:0 .25rem .5rem rgba(0,0,0,.12);
}
.header-dark .btn-header:hover,
.header-dark #gd-mini-cart .btn:hover,
.header-dark .btn-header:focus,
.header-dark #gd-mini-cart .btn:focus{
  background:#FFBD00!important;
  border-color:#FFBD00!important;
  color:#212529!important;
  box-shadow:0 .35rem .8rem rgba(0,0,0,.18);
}
.header-dark .btn-header:active,
.header-dark #gd-mini-cart .btn:active,
.header-dark .btn-header.active,
.header-dark #gd-mini-cart .btn.active,
.header-dark #gd-mini-cart .btn.show,
.header-dark #gd-mini-cart .btn[aria-expanded="true"]{
  background:#FF9900!important;
  border-color:#FF9900!important;
  color:#212529!important;
  box-shadow:0 .15rem .35rem rgba(0,0,0,.14);
}

/* =========================
Header (dark) 
========================= */





/* ===== Hero ===== */
.hero-home {
  position: relative;
  color: #fff; /* mejor contraste sobre el overlay */
  background-image: var(--hero-home-bg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden; /* respeta el border-radius con el overlay */
}
/* Overlay oscuro para legibilidad */
.hero-home::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45); /* podés ajustar la opacidad */
  border-radius: inherit;
  pointer-events: none;
}
.hero-title{
  color:#fff;
  text-shadow:
    0 2px 10px rgba(0,0,0,.35),
    0 1px 0 rgba(0,0,0,.25);
}
/* Asegura que el contenido quede por encima del overlay */
.hero-home > * {
  position: relative;
  z-index: 1;
}
.rounded-custom{
  border-top-left-radius: 12px;
  border-top-right-radius: 32px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 56px;
}
/* ===== Hero ===== */



/* ===== CTA full-bleed ===== */
.cta-full {
 background: linear-gradient(to bottom, #ededed, #ffffff);
}
/* Variante con gradiente de marca (opcional) */
.cta-full.brand {
  --cta-bg: linear-gradient(180deg, #31BBF1 0%, #0292CC 100%);
  color: #fff;
}
.cta-full.brand a,
.cta-full.brand h2,
.cta-full.brand p { color: #fff; }
.cta-full.brand p.text-secondary { color: rgba(255,255,255,.85) !important; }
/* ===== CTA full-bleed ===== */



/* ===== CERTIFICACIONES full-bleed ===== */
.certs-full{
  position: relative;
  border-bottom: 1px solid #FFBF00 !important;
  background-image:
    url('assets/img/bg-normas-top.png'),
    linear-gradient(180deg, #FF9900 0%, #FFB025 100%);
  background-repeat:
    repeat-x,
    no-repeat;
  background-position:
    center top,
    center;
  background-size:
    auto,
    cover;
}
.certs-full::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 30px;                /* grosor de la sombra */
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.03),
    rgba(0,0,0,.0) 40%,
    rgba(0,0,0,0) 100%
  );
}
.certs-full h2, .certs-full p{
	color: #fff!important;
}
/* ===== CERTIFICACIONES full-bleed ===== */



/* ===== Footer ===== */
.footer-gray{
  position: relative;
  background: linear-gradient(180deg, #333 0%, #666 100%) !important;
  color: #fff;
}
/* Sombra superior suave (separación con el contenido) */
.footer-gray::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:30px;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,0) 40%);
}
/* Links del menú del footer en blanco “light” */
.footer-gray .footer-links a{
  color: rgba(255,255,255,.85) !important;
  text-decoration: none;
}
.footer-gray .footer-links a:hover,
.footer-gray .footer-links a:focus{
  color:#fff !important;
  text-decoration: underline;
}
/* Texto secundario (copyright) más suave */
.footer-gray .text-white-50{ color: rgba(255,255,255,.7) !important; }
/* ===== Footer ===== */



/* ===== BTN Orange ===== */
.btn-orange{
  border-radius: var(--bs-border-radius) !important;
  background: linear-gradient(180deg, #FFBD00 0%, #FF9900 100%) !important;
  color: #fff !important;
  border: 1px solid #FF9900 !important;
  border-bottom-color: #FFBD00 !important;
  box-shadow: 0 2px 2px rgba(0,0,0,.40);
  text-decoration: none;
}
.btn-orange i,
.btn-orange .bi{ color:#fff !important; }
.btn-orange:hover,
.btn-orange:focus{
  background: linear-gradient(180deg, #FFC933 0%, #FFAA18 100%) !important;
  border-color: #FFB51A !important;
  border-bottom-color: #FFBD00 !important;
  color: #C96F00 !important;               /* ← naranja oscuro */
}
.btn-orange:hover i,
.btn-orange:hover .bi,
.btn-orange:focus i,
.btn-orange:focus .bi{
  color: #C96F00 !important;
}
.btn-orange:active,
.btn-orange.active,
.btn-orange.show,
.btn-orange[aria-expanded="true"]{
  background: linear-gradient(180deg, #FFAA18 0%, #FF9900 100%) !important;
  border-color: #FF9900 !important;
  border-bottom-color: #FFBD00 !important;
  color: #fff !important;
}
.btn-orange:active i,
.btn-orange.active i,
.btn-orange.show i{ color:#fff !important; }
.btn-orange:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(255,153,0,.25), 0 2px 2px rgba(0,0,0,.30);
}
.btn-orange:disabled,
.btn-orange.disabled{
  opacity: .65;
  pointer-events: none;
}
/* ===== BTN Orange ===== */



/* ===== BTN Gray ===== */
.btn-gray{
  border-radius: var(--bs-border-radius) !important;
  background: linear-gradient(180deg, #555 0%, #444 100%) !important;
  color: #fff !important;
  border: 1px solid #444 !important;
  border-bottom-color: #555 !important;
  box-shadow: 0 2px 2px rgba(0,0,0,.40);
  text-decoration: none;
}
.btn-gray:hover,
.btn-gray:focus{
  background: linear-gradient(180deg, #666 0%, #3d3d3d 100%) !important;
  border-color: #555 !important;
  border-bottom-color: #666 !important;
  color: #ccc !important;
}
.btn-gray:hover i,
.btn-gray:hover .bi,
.btn-gray:focus i,
.btn-gray:focus .bi{
  color: #ccc !important;
}
.btn-gray:active,
.btn-gray.active,
.btn-gray.show,
.btn-gray[aria-expanded="true"]{
  background: linear-gradient(180deg, #444 0%, #2e2e2e 100%) !important;
  border-color: #3a3a3a !important;
  border-bottom-color: #555 !important;
  color: #fff !important;
}
.btn-gray:active i,
.btn-gray.active i,
.btn-gray.show i{
  color: #fff !important;
}
.btn-gray:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(204,204,204,.25), 0 2px 2px rgba(0,0,0,.40);
}
.btn-gray:disabled,
.btn-gray.disabled{
  opacity: .65;
  pointer-events: none;
}
/* ===== BTN Gray ===== */




/* Meta del producto: etiqueta en negrita, valor regular + línea gris */
.product-attrs .item{
  padding:.35rem 0;
  border-bottom:1px solid #e5e7eb; /* gris suave */
}
.product-attrs .item:last-child{ border-bottom:0; }
.product-attrs .label{ font-weight:600; }   /* bold */
.product-attrs .value{ font-weight:400; }   /* regular */

/* Cantidad con botones +/- siempre visibles */
.qty-group .btn{ min-width: 2.25rem; }              /* ancho cómodo para + / - */
.qty-group .form-control{ text-align:center; }

.text-price{
	color: #ff9900!important;
	font-weight: 900!important;
}

/* =========================
   Ajustes varios
   ========================= */
.card .card-title a{color:var(--bs-link-color)!important;}
.card .card-title a:hover{color:var(--bs-link-hover-color)!important;}

/* Utilidad: separadores suaves */
.hr-soft{border:0;height:1px;background:linear-gradient(90deg,transparent,#e9ecef,transparent);}

 .card-servicios{
background: linear-gradient(to bottom, #ededed, #ffffff)!important;	
 }