/* =====================================================
   CRAVERO HERMANOS - CSS Principal Modernizado v2.0
   Bootstrap 5 + Custom Design System
   Paleta: Azul Corporativo #003C7A + Rojo Acento #CC1B1B
   ===================================================== */

/* -------- Variables -------- */
:root {
  --crv-blue:        #003C7A;
  --crv-blue-light:  #0055A8;
  --crv-blue-dark:   #002855;
  --crv-red:         #CC1B1B;
  --crv-red-light:   #E82020;
  --crv-gray-bg:     #F4F6F9;
  --crv-gray-border: #DEE3EA;
  --crv-text:        #222222;
  --crv-text-muted:  #6B7280;
  --crv-radius:      8px;
  --crv-shadow:      0 2px 12px rgba(0,60,122,.10);
  --crv-transition:  .2s ease;
}

/* -------- Reset / Base -------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: var(--crv-text);
  background: var(--crv-gray-bg);
  min-height: 100vh;
}

a { color: var(--crv-blue-light); text-decoration: none; }
a:hover { color: var(--crv-red); text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* -------- Botones custom -------- */
.crv-btn-primary {
  background: var(--crv-blue);
  color: #fff !important;
  border: none;
  border-radius: var(--crv-radius);
  font-weight: 600;
  transition: background var(--crv-transition);
}
.crv-btn-primary:hover {
  background: var(--crv-blue-light);
  color: #fff !important;
}

.crv-btn-outline {
  background: transparent;
  color: var(--crv-blue) !important;
  border: 1.5px solid var(--crv-blue);
  border-radius: var(--crv-radius);
  font-weight: 500;
  transition: all var(--crv-transition);
}
.crv-btn-outline:hover {
  background: var(--crv-blue);
  color: #fff !important;
}

.crv-btn-danger {
  background: var(--crv-red);
  color: #fff !important;
  border: none;
  border-radius: var(--crv-radius);
}

/* -------- HEADER / NAVBAR -------- */
.crv-header {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,60,122,.12);
  z-index: 1030;
}

#mainNav {
  background: #fff;
  padding: .5rem 0;
}

.crv-logo {
  transition: opacity var(--crv-transition);
}
.crv-logo:hover { opacity: .85; }

/* Buscador en header */
.crv-search-input {
  border: 1.5px solid var(--crv-gray-border);
  border-radius: var(--crv-radius) 0 0 var(--crv-radius) !important;
  font-size: 13px;
  padding: .45rem .75rem;
  transition: border-color var(--crv-transition);
}
.crv-search-input:focus {
  border-color: var(--crv-blue);
  box-shadow: 0 0 0 3px rgba(0,60,122,.1);
}
.crv-btn-search {
  background: var(--crv-blue);
  color: #fff;
  border: none;
  border-radius: 0 var(--crv-radius) var(--crv-radius) 0 !important;
  padding: .45rem .9rem;
}
.crv-btn-search:hover { background: var(--crv-blue-light); color: #fff; }

/* Nav links */
.crv-nav .nav-link {
  color: var(--crv-text) !important;
  font-weight: 500;
  font-size: 13.5px;
  padding: .5rem .8rem;
  border-radius: 6px;
  transition: all var(--crv-transition);
}
.crv-nav .nav-link:hover,
.crv-nav .nav-link.active {
  color: var(--crv-blue) !important;
  background: rgba(0,60,122,.06);
}
.crv-nav .nav-link.active { font-weight: 700; }

.crv-user-name {
  font-size: 13px;
  color: var(--crv-text-muted);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -------- CONTENIDO PRINCIPAL -------- */
.crv-main {
  min-height: calc(100vh - 240px);
}

/* -------- SLIDER HOME (Swiper) -------- */
.crv-hero-slider {
  width: 100%;
  max-height: 460px;
  overflow: hidden;
  border-radius: 0;
}
.crv-hero-slider .swiper-slide img {
  width: 100%;
  height: 460px;
  object-fit: cover;
}
@media (max-width: 768px) {
  .crv-hero-slider .swiper-slide img { height: 220px; }
  .crv-hero-slider { max-height: 220px; }
}
.crv-hero-slider .swiper-button-next,
.crv-hero-slider .swiper-button-prev {
  color: #fff;
  background: rgba(0,0,0,.35);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 8px;
}
.crv-hero-slider .swiper-button-next::after,
.crv-hero-slider .swiper-button-prev::after {
  font-size: 16px;
}
.crv-hero-slider .swiper-pagination-bullet-active {
  background: var(--crv-blue);
}

/* -------- CARDS GENERALES -------- */
.crv-card {
  background: #fff;
  border: 1px solid var(--crv-gray-border);
  border-radius: var(--crv-radius);
  box-shadow: var(--crv-shadow);
  transition: box-shadow var(--crv-transition), transform var(--crv-transition);
  overflow: hidden;
}
.crv-card:hover {
  box-shadow: 0 6px 24px rgba(0,60,122,.15);
  transform: translateY(-2px);
}

/* -------- CARDS DE PRODUCTO -------- */
.crv-producto-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--crv-gray-border);
  border-radius: var(--crv-radius);
  overflow: hidden;
  transition: box-shadow var(--crv-transition), transform var(--crv-transition);
}
.crv-producto-card:hover {
  box-shadow: 0 8px 28px rgba(0,60,122,.18);
  transform: translateY(-3px);
  text-decoration: none;
}
.crv-producto-card .crv-img-wrap {
  position: relative;
  background: #f9fafb;
  height: 185px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.crv-producto-card .crv-img-wrap img {
  max-height: 175px;
  max-width: 100%;
  object-fit: contain;
  transition: transform var(--crv-transition);
}
.crv-producto-card:hover .crv-img-wrap img {
  transform: scale(1.04);
}
.crv-producto-card .crv-badge-oferta {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--crv-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
}
.crv-producto-card .crv-badge-outlet {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #f59e0b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
}
.crv-producto-card .crv-card-body {
  padding: 12px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.crv-producto-card .crv-codigo {
  font-size: 10px;
  color: var(--crv-text-muted);
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.crv-producto-card .crv-nombre {
  font-size: 13px;
  font-weight: 600;
  color: var(--crv-text);
  line-height: 1.35;
  margin: 4px 0;
  flex-grow: 1;
}
.crv-producto-card .crv-detalle {
  font-size: 11.5px;
  color: var(--crv-text-muted);
  margin-bottom: 6px;
}
.crv-producto-card .crv-precio {
  font-size: 16px;
  font-weight: 700;
  color: var(--crv-blue);
}
.crv-producto-card .crv-precio-tachado {
  font-size: 12px;
  color: var(--crv-text-muted);
  text-decoration: line-through;
  margin-right: 6px;
}
.crv-producto-card .crv-descuento {
  font-size: 11px;
  color: var(--crv-red);
  font-weight: 700;
}
.crv-producto-card .crv-card-footer {
  padding: 8px 12px;
  background: #fafbfc;
  border-top: 1px solid var(--crv-gray-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* -------- FICHA DE PRODUCTO -------- */
.crv-ficha-img-principal {
  width: 100%;
  max-height: 380px;
  object-fit: contain;
  border-radius: var(--crv-radius);
  background: #f9fafb;
  padding: 12px;
  border: 1px solid var(--crv-gray-border);
  cursor: zoom-in;
}
.crv-ficha-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.crv-ficha-thumbs img {
  width: 65px;
  height: 65px;
  object-fit: contain;
  border: 2px solid transparent;
  border-radius: 6px;
  background: #f9fafb;
  padding: 3px;
  cursor: pointer;
  transition: border-color var(--crv-transition);
}
.crv-ficha-thumbs img.active,
.crv-ficha-thumbs img:hover {
  border-color: var(--crv-blue);
}
.crv-ficha-precio {
  font-size: 28px;
  font-weight: 800;
  color: var(--crv-blue);
}
.crv-ficha-precio-original {
  font-size: 16px;
  color: var(--crv-text-muted);
  text-decoration: line-through;
  margin-right: 8px;
}
.crv-ficha-descuento {
  background: var(--crv-red);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}

/* -------- MENÚ DE CATEGORÍAS (Productos) -------- */
.crv-cat-sidebar {
  background: #fff;
  border: 1px solid var(--crv-gray-border);
  border-radius: var(--crv-radius);
  box-shadow: var(--crv-shadow);
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.crv-cat-sidebar::-webkit-scrollbar { width: 5px; }
.crv-cat-sidebar::-webkit-scrollbar-track { background: #f1f1f1; }
.crv-cat-sidebar::-webkit-scrollbar-thumb { background: var(--crv-blue); border-radius: 3px; }

.crv-cat-seccion {
  padding: 10px 14px 4px;
  font-size: 11px;
  font-weight: 800;
  color: var(--crv-blue);
  text-transform: uppercase;
  letter-spacing: .6px;
  border-top: 1px solid var(--crv-gray-border);
  margin-top: 4px;
}
.crv-cat-seccion:first-child { border-top: none; margin-top: 0; }

.crv-cat-rubro {
  padding: 5px 14px 2px 20px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--crv-text);
}
.crv-cat-subrubro a {
  display: block;
  padding: 4px 14px 4px 32px;
  font-size: 12.5px;
  color: var(--crv-text-muted);
  border-radius: 4px;
  transition: all var(--crv-transition);
}
.crv-cat-subrubro a:hover,
.crv-cat-subrubro a.active {
  background: rgba(0,60,122,.07);
  color: var(--crv-blue);
  text-decoration: none;
  font-weight: 600;
}

/* -------- PAGINACIÓN -------- */
.crv-pagination .page-link {
  color: var(--crv-blue);
  border-color: var(--crv-gray-border);
}
.crv-pagination .page-item.active .page-link {
  background-color: var(--crv-blue);
  border-color: var(--crv-blue);
}
.crv-pagination .page-link:hover {
  color: var(--crv-blue-light);
}

/* -------- SECCIÓN TITULO (migas de pan) -------- */
.crv-section-header {
  background: #fff;
  border-bottom: 2px solid var(--crv-blue);
  padding: 14px 0;
  margin-bottom: 24px;
}
.crv-section-header h1,
.crv-section-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--crv-blue);
  margin: 0;
}
.crv-breadcrumb {
  font-size: 12px;
  color: var(--crv-text-muted);
}
.crv-breadcrumb a { color: var(--crv-text-muted); }
.crv-breadcrumb a:hover { color: var(--crv-blue); }

/* -------- HOME: FEATURE BOXES -------- */
.crv-feature-box {
  background: #fff;
  border: 1px solid var(--crv-gray-border);
  border-radius: var(--crv-radius);
  padding: 28px 22px;
  text-align: center;
  transition: all var(--crv-transition);
  display: block;
  color: var(--crv-text);
}
.crv-feature-box:hover {
  border-color: var(--crv-blue);
  box-shadow: 0 6px 20px rgba(0,60,122,.14);
  transform: translateY(-3px);
  text-decoration: none;
  color: var(--crv-text);
}
.crv-feature-icon {
  width: 64px;
  height: 64px;
  background: rgba(0,60,122,.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 28px;
  color: var(--crv-blue);
  transition: all var(--crv-transition);
}
.crv-feature-box:hover .crv-feature-icon {
  background: var(--crv-blue);
  color: #fff;
}
.crv-feature-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--crv-blue);
  margin-bottom: 8px;
}
.crv-feature-text { font-size: 13px; color: var(--crv-text-muted); }

/* -------- HOME: MARCAS SLIDER -------- */
.crv-marcas-section {
  background: #fff;
  border-top: 1px solid var(--crv-gray-border);
  border-bottom: 1px solid var(--crv-gray-border);
  padding: 24px 0;
}
.crv-marcas-slider .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.crv-marcas-slider .swiper-slide img {
  max-height: 55px;
  max-width: 130px;
  object-fit: contain;
  filter: grayscale(30%);
  opacity: .8;
  transition: all var(--crv-transition);
}
.crv-marcas-slider .swiper-slide img:hover {
  filter: none;
  opacity: 1;
}

/* -------- HOME: LISTA DE PRECIOS -------- */
.crv-precios-box {
  background: linear-gradient(135deg, var(--crv-blue) 0%, var(--crv-blue-light) 100%);
  border-radius: var(--crv-radius);
  color: #fff;
  padding: 32px;
  text-align: center;
}
.crv-precios-box h3 { font-size: 20px; font-weight: 700; }
.crv-precios-box p  { opacity: .85; font-size: 13.5px; }

/* -------- FORMULARIOS -------- */
.crv-form-card {
  background: #fff;
  border-radius: var(--crv-radius);
  border: 1px solid var(--crv-gray-border);
  box-shadow: var(--crv-shadow);
  padding: 32px;
}
.crv-form-card .form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--crv-text);
}
.crv-form-card .form-control:focus,
.crv-form-card .form-select:focus {
  border-color: var(--crv-blue);
  box-shadow: 0 0 0 3px rgba(0,60,122,.1);
}

/* -------- PANEL ADMIN -------- */
.crv-admin-sidebar {
  background: var(--crv-blue-dark);
  min-height: 100vh;
  padding-top: 20px;
}
.crv-admin-sidebar .nav-link {
  color: rgba(255,255,255,.75);
  padding: 10px 16px;
  border-radius: 6px;
  margin: 2px 8px;
  font-size: 13.5px;
  transition: all var(--crv-transition);
}
.crv-admin-sidebar .nav-link:hover,
.crv-admin-sidebar .nav-link.active {
  color: #fff;
  background: rgba(255,255,255,.12);
}
.crv-admin-sidebar .nav-link i { margin-right: 8px; }

/* -------- ALERTS -------- */
.crv-alert-success {
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  color: #065f46;
  border-radius: var(--crv-radius);
  padding: 12px 16px;
  font-size: 13.5px;
}
.crv-alert-danger {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #7f1d1d;
  border-radius: var(--crv-radius);
  padding: 12px 16px;
  font-size: 13.5px;
}

/* -------- TABLA -------- */
.crv-table th {
  background: var(--crv-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  border: none;
}
.crv-table td { font-size: 13px; vertical-align: middle; }
.crv-table tr:hover td { background: rgba(0,60,122,.04); }

/* -------- FOOTER -------- */
.crv-footer {
  background: #1a2233;
  color: #cdd3db;
}
.crv-footer h6,
.crv-footer-title {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom: 14px;
}
.crv-footer-links li { margin-bottom: 7px; }
.crv-footer-links a {
  color: #9aa3af;
  font-size: 13px;
  transition: color var(--crv-transition);
}
.crv-footer-links a:hover {
  color: #fff;
  text-decoration: none;
}
.crv-footer-logo-text {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}
.crv-subfooter {
  border-top: 1px solid rgba(255,255,255,.1);
}

/* -------- RESPONSIVE TWEAKS -------- */
@media (max-width: 991px) {
  .crv-cat-sidebar {
    position: static;
    max-height: none;
  }
  .crv-hero-slider { border-radius: 0; }
}
@media (max-width: 576px) {
  .crv-ficha-precio { font-size: 22px; }
  .crv-form-card { padding: 20px; }
}

/* -------- UTILITIES -------- */
.crv-divider {
  height: 3px;
  background: linear-gradient(90deg, var(--crv-blue) 0%, var(--crv-blue-light) 60%, transparent 100%);
  border: none;
  margin: 24px 0;
}
.text-crv-blue  { color: var(--crv-blue) !important; }
.text-crv-red   { color: var(--crv-red) !important; }
.bg-crv-blue    { background: var(--crv-blue) !important; }
.fw-800 { font-weight: 800 !important; }

/* -------- Spinner de carga -------- */
.crv-spinner-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* ==========================================================
   COMPATIBILIDAD CON CLASES LEGACY (960.gs + CI2)
   Estas reglas hacen que el contenido viejo se vea bien
   dentro del nuevo layout Bootstrap 5
   ========================================================== */

/* --- Container 960 → ancho moderno centrado --- */
.container_12 {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
  float: none !important;
}

/* --- Ocultar header y nav viejos (ya los reemplazamos) --- */
.crv-main .header,
.crv-main .navmenu,
.crv-main .navmenu_izq,
.crv-main .navmenu_cont,
.crv-main .navmenu_der {
  display: none !important;
}

/* --- Ocultar menú desplegable horizontal (redundante con sidebar) --- */
.menunvo_contenedor {
  display: none !important;
}

/* --- Layout de productos: sidebar izq + grilla der --- */
.container_16 {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

/* menu_cont solo contiene el sidebar */
#menu_cont {
  float: left !important;
  width: 230px !important;
  margin-right: 16px !important;
}
#menu {
  width: 100% !important;
  float: none !important;
  position: relative !important;
  overflow: visible !important;
}
.container_16 .grid_5 {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

/* grilla al lado del sidebar */
#grilla {
  float: none !important;
  width: auto !important;
  overflow: hidden !important;
}
.container_16 .grid_11 {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

/* Slider de secciones - ocultar */
.seccion_slider { display: none !important; }

/* Forzar que el accordion de secciones sea visible */
.prod_menu .basic {
  display: block !important;
}

/* Las sub-secciones empiezan ocultas, el JS las muestra */
.prod_menu .seccion_slide {
  display: none;
}

@media (max-width: 992px) {
  #menu_cont {
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 16px !important;
  }
}

/* --- Menú lateral de productos (Secciones) --- */
.prod_menu {
  width: 100% !important;
  float: none !important;
  position: relative;
  background: #fff;
  border: 1px solid var(--crv-gray-border);
  border-radius: var(--crv-radius);
  box-shadow: var(--crv-shadow);
  padding: 0 !important;
  overflow: hidden;
}
.prod_menutit {
  width: 100% !important;
  background: var(--crv-blue) !important;
  height: auto !important;
  padding: 10px 14px !important;
}
.prod_menutit_izq, .prod_menutit_der { display: none !important; }
.prod_menutit_cont {
  width: 100% !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  height: auto !important;
  line-height: 1.4 !important;
  text-align: left !important;
}
.prod_menuopt {
  width: 100% !important;
  background: #fff !important;
}
.prod_menuopt a {
  display: block !important;
  padding: 8px 14px !important;
  font-size: 12.5px !important;
  color: var(--crv-text) !important;
  border-bottom: 1px solid #f0f0f0 !important;
  transition: all .2s;
  background: transparent !important;
  width: 100% !important;
  height: auto !important;
  line-height: 1.4 !important;
}
.prod_menuopt a:hover {
  background: rgba(0,60,122,.06) !important;
  color: var(--crv-blue) !important;
  text-decoration: none !important;
}
.prod_menuopt_sel a,
.prod_menuopt a.sel {
  background: rgba(0,60,122,.1) !important;
  color: var(--crv-blue) !important;
  font-weight: 600 !important;
}
.prod_menu_oculta, .prod_menu_muestra {
  display: none !important;
}

/* --- Area de contenido de productos (al lado del menu) --- */
.prod_contenido {
  float: left !important;
  width: calc(100% - 260px) !important;
}

/* --- Grilla de productos contenedor --- */
#grilla_cont {
  width: 100% !important;
}
.box_nov_cont {
  width: 100% !important;
}

/* --- Productos: grilla reducida (cards lado a lado) --- */
.prod_grilla_red,
.grilla_producto,
.prod_item {
  display: inline-block !important;
  vertical-align: top;
  width: calc(33.33% - 12px) !important;
  margin: 5px !important;
  background: #fff;
  border: 1px solid var(--crv-gray-border);
  border-radius: var(--crv-radius);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
  box-sizing: border-box;
}
.prod_grilla_red:hover,
.grilla_producto:hover,
.prod_item:hover {
  box-shadow: 0 6px 20px rgba(0,60,122,.14);
  transform: translateY(-2px);
}

/* Paginación de productos */
.paginacion_cont {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.paginacion_texto {
  font-size: 13px;
  font-weight: 600;
  color: var(--crv-blue);
}
.paginacion_pag a {
  display: inline-block;
  padding: 4px 10px;
  margin: 1px;
  border: 1px solid var(--crv-gray-border);
  border-radius: 4px;
  font-size: 12px;
  color: var(--crv-blue);
  text-decoration: none;
  transition: all .2s;
}
.paginacion_pag a:hover {
  background: var(--crv-blue);
  color: #fff;
  text-decoration: none;
}
.paginacion_pag strong,
.paginacion_pag b {
  display: inline-block;
  padding: 4px 10px;
  margin: 1px;
  background: var(--crv-blue);
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
}

/* Breadcrumb de categoría (MUEBLERIA > Living > Futones) */
.titulo_seccion_cont {
  margin-bottom: 10px;
  font-size: 14px;
}
.titulo_seccion {
  font-weight: 800;
  color: var(--crv-blue);
  text-transform: uppercase;
}
.titulo_rubro {
  font-weight: 600;
  color: var(--crv-text);
}
.titulo_subrubro {
  font-weight: 400;
  color: var(--crv-text-muted);
}

@media (max-width: 992px) {
  .container_16 #menu_cont {
    flex-direction: column;
  }
  .container_16 #menu {
    width: 100% !important;
    min-width: auto !important;
  }
  .prod_grilla_red,
  .grilla_producto,
  .prod_item {
    width: calc(50% - 12px) !important;
  }
}
@media (max-width: 576px) {
  .prod_grilla_red,
  .grilla_producto,
  .prod_item {
    width: 100% !important;
    margin: 4px 0 !important;
  }
}

/* --- Grid legacy → restaurar con anchos proporcionales --- */
.crv-main .grid_12 { width: 100% !important; float: left; }
.crv-main .grid_9  { width: 74% !important; float: left; }
.crv-main .grid_8  { width: 66% !important; float: left; }
.crv-main .grid_7  { width: 58% !important; float: left; }
.crv-main .grid_6  { width: 49% !important; float: left; }
.crv-main .grid_5  { width: 41% !important; float: left; }
.crv-main .grid_4  { width: 32% !important; float: left; }
.crv-main .grid_3  { width: 24% !important; float: left; }
.crv-main .grid_2  { width: 16% !important; float: left; }
.crv-main .grid_1  { width: 8% !important; float: left; }
.crv-main .grid_10 { width: 82% !important; float: left; }
.crv-main .grid_11 { width: 91% !important; float: left; }

.crv-main .grid_1,.crv-main .grid_2,.crv-main .grid_3,.crv-main .grid_4,
.crv-main .grid_5,.crv-main .grid_6,.crv-main .grid_7,.crv-main .grid_8,
.crv-main .grid_9,.crv-main .grid_10,.crv-main .grid_11,.crv-main .grid_12 {
  margin-left: 0.5% !important;
  margin-right: 0.5% !important;
  box-sizing: border-box;
}

.alpha { margin-left: 0 !important; }
.omega { margin-right: 0 !important; }
.clear { clear: both; }

/* En mobile, todo a 100% */
@media (max-width: 768px) {
  .crv-main .grid_1,.crv-main .grid_2,.crv-main .grid_3,.crv-main .grid_4,
  .crv-main .grid_5,.crv-main .grid_6,.crv-main .grid_7,.crv-main .grid_8,
  .crv-main .grid_9,.crv-main .grid_10,.crv-main .grid_11 {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* --- Contenedor y contenido legacy --- */
.contenedor {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
}
.contenido {
  width: 100% !important;
  padding: 20px 0 !important;
}

/* --- Pie viejo → ocultar (ya tenemos footer nuevo) --- */
.crv-main .pie,
.crv-main .pie_sub,
.crv-main .pie_fin {
  display: none !important;
}

/* --- Sección título legacy (productos, empresa, etc.) --- */
.seccion_titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-bottom: 3px solid var(--crv-blue);
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: var(--crv-radius) var(--crv-radius) 0 0;
}
.seccion_titulo h2 {
  color: var(--crv-blue) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
.seccion_icono_producto,
.seccion_icono_empresa,
.seccion_icono_derecha,
.seccion_icono_derecha_producto {
  display: none;
}
.seccion_titulo_texto,
.seccion_titulo_texto_producto {
  flex-grow: 1;
}

/* --- Buscador legacy en productos --- */
.productos_buscador {
  display: flex;
  align-items: center;
  gap: 4px;
}
.productos_buscador input {
  border: 1.5px solid var(--crv-gray-border) !important;
  border-radius: var(--crv-radius) !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  outline: none !important;
  min-width: 200px;
}
.productos_buscador input:focus {
  border-color: var(--crv-blue) !important;
  box-shadow: 0 0 0 3px rgba(0,60,122,.1);
}

/* --- Menú de categorías legacy (productos) --- */
.menunvo_contenedor {
  background: #fff;
  border: 1px solid var(--crv-gray-border);
  border-radius: var(--crv-radius);
  box-shadow: var(--crv-shadow);
  padding: 16px;
  margin-bottom: 20px;
}
.menunvo_contenedor h3 {
  color: var(--crv-blue) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 10px 0 4px !important;
}
.menunvo_contenedor h4 {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--crv-text) !important;
  margin: 4px 0 2px 8px !important;
}
.menunvo_contenedor ul {
  list-style: none !important;
  padding-left: 16px !important;
  margin: 0 0 6px !important;
}
.menunvo_contenedor ul li a {
  font-size: 12.5px;
  color: var(--crv-text-muted);
  display: block;
  padding: 3px 8px;
  border-radius: 4px;
  transition: all .2s;
}
.menunvo_contenedor ul li a:hover {
  background: rgba(0,60,122,.07);
  color: var(--crv-blue);
  text-decoration: none;
}
.menunvo_contenido {
  max-height: 500px;
  overflow-y: auto;
}
.menunvo_contenido table {
  width: 100% !important;
}
.menunvo_contenido .td,
.menunvo_contenido .td_sep {
  vertical-align: top;
  padding: 0 8px;
}

/* --- Grilla de productos legacy --- */
.productos_grilla,
.grilla_producto {
  display: inline-block;
  vertical-align: top;
  width: 200px;
  margin: 8px;
  background: #fff;
  border: 1px solid var(--crv-gray-border);
  border-radius: var(--crv-radius);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.grilla_producto:hover {
  box-shadow: 0 6px 20px rgba(0,60,122,.15);
  transform: translateY(-2px);
}
.grilla_producto img {
  max-width: 100%;
  height: auto;
}

/* --- Ficha de producto legacy --- */
.ficha_producto_foto {
  text-align: center;
  padding: 12px;
  background: #f9fafb;
  border-radius: var(--crv-radius);
  border: 1px solid var(--crv-gray-border);
}
.ficha_producto_foto img {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
}

/* --- Textos institucionales (empresa, fabrica, etc.) --- */
.textos_institucionales {
  background: #fff;
  padding: 24px;
  border-radius: var(--crv-radius);
  border: 1px solid var(--crv-gray-border);
  line-height: 1.7;
  font-size: 14px;
  color: var(--crv-text);
}
.textos_institucionales strong {
  color: var(--crv-blue);
}

/* --- Contacto legacy --- */
.contacto_datos {
  background: #fff;
  padding: 20px;
  border-radius: var(--crv-radius);
  border: 1px solid var(--crv-gray-border);
}

/* --- Botones legacy --- */
.boton_volver, .boton_comparativa {
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--crv-radius);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all .2s;
}

/* --- Gap legacy --- */
.gap_horizontal { height: 16px !important; clear: both; }
.gap_horizontal_10 { height: 8px !important; clear: both; }

/* --- Box de características (home viejo) --- */
.boxcaract {
  background: #fff;
  border: 1px solid var(--crv-gray-border);
  border-radius: var(--crv-radius);
  padding: 20px;
  margin-bottom: 16px;
  transition: all .2s;
}
.boxcaract:hover {
  box-shadow: 0 4px 16px rgba(0,60,122,.12);
}
.boxcaract h3 {
  color: var(--crv-blue) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* --- Precios legacy --- */
.titulos_azul {
  color: var(--crv-blue) !important;
  font-weight: 700 !important;
}

/* --- Centrar imágenes grandes --- */
.centrar {
  text-align: center;
}
.centrar img {
  max-width: 100%;
  height: auto;
  border-radius: var(--crv-radius);
}

/* --- Ocultar elementos legacy innecesarios --- */
.presentacion,
.banner_productos .cont_productos,
.banner_logos .cont_logos {
  /* Los sliders viejos se ocultan, usamos Swiper */
}

/* --- Separador vertical --- */
.linea_vert_gb,
.sepvertizq_home {
  display: none;
}

/* --- Fix: contenido no debe solapar el footer --- */
.crv-main .contenedor::after {
  content: "";
  display: table;
  clear: both;
}

/* --- Fix: links legacy --- */
.crv-main a:link { color: var(--crv-blue-light); }
.crv-main a:hover { color: var(--crv-red); }
.crv-main a:visited { color: var(--crv-blue); }

/* --- Fix: tablas legacy --- */
.crv-main table {
  border-collapse: collapse;
}
.crv-main table td,
.crv-main table th {
  padding: 4px 8px;
}

/* --- Leer más links --- */
.leer_mas {
  color: var(--crv-blue);
  font-weight: 600;
  font-size: 13px;
}

/* --- Novedades badge --- */
.icn_nuevo {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--crv-red);
  border-radius: 50%;
  margin-right: 4px;
}

/* --- Vista grilla toggle buttons --- */
.btnvistagrilla_cnt {
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
}

/* --- Responsive: stack columns on mobile --- */
@media (max-width: 768px) {
  .container_12 {
    padding: 0 10px !important;
  }
  .contenedor {
    padding: 0 10px !important;
  }
  .menunvo_contenedor {
    padding: 10px;
  }
  .textos_institucionales {
    padding: 16px;
  }
}