/* Radio Vintage – plantilla hija de Cassiopeia.
   Réplica del aspecto de la plantilla anterior (online-store, Bootstrap 3):
   valores medidos sobre el sitio original (Roboto 13px, contenedor 1170px, cabecera #ffffdf, etc.). */
:root {
  --rv-cream: #ffffdf;
  --rv-orange: #fc8006;
  --rv-hover: #12abff;
  --rv-text: #333;
  --rv-muted: #888;
  --rv-footer-bg: #252525;
  --cassiopeia-color-primary: #000;
  --cassiopeia-color-link: #333;
  --cassiopeia-color-hover: #12abff;
  --cassiopeia-font-family-body: Roboto, sans-serif;
  --cassiopeia-font-family-headings: Roboto, sans-serif;
  --cassiopeia-font-weight-headings: 500;
  --body-font-size: 13px;
}

/* ---------- Tipografía base (igual a Bootstrap 3 + online-store) ---------- */
body { font-family: Roboto, sans-serif; font-size: 13px; line-height: 1.5; color: var(--rv-text); background: #fff; }
h1, h2, h3, h4, h5, h6 { font-family: Roboto, sans-serif; font-weight: 500; line-height: 1.1; color: inherit; }
h1 { font-size: 36px; } h2 { font-size: 30px; } h3 { font-size: 24px; } h4 { font-size: 18px; } h5 { font-size: 14px; } h6 { font-size: 12px; }
p { margin: 0 0 10px; }
a { color: var(--rv-text); text-decoration: none; }
a:hover, a:focus { color: var(--rv-hover); text-decoration: none; }
main a:not(.btn) { text-decoration: none; }

/* Reglas base de online-store para el contenido */
main h1, main h2, main h3, .container-component h1, .container-component h2 {
  font-size: 30px; line-height: 32px; color: #000; text-transform: uppercase; margin: 20px 0 10px;
}
main h5 { font-size: 18px; line-height: 22px; color: var(--rv-muted); }
main h6 { font-size: 16px; line-height: 16px; color: var(--rv-muted); }
main p, main blockquote { font-size: 14px; line-height: 20px; color: var(--rv-muted); margin: 0 0 10px; }
main ul { list-style-type: none; }
main ul li { font-size: 14px; line-height: 20px; color: var(--rv-muted); }
main .form-control, main .form-select, main label, main .vm-pagination, main .orderby-displaynumber { font-size: 14px; }
.page-header { margin: 10px 0; border-bottom: 1px solid #eee; }
.mod-breadcrumbs__wrapper .breadcrumb, nav .breadcrumb { font-size: 14px; line-height: 20px; padding: 8px 15px 8px 0; margin: 0 0 20px; }
.breadcrumb a { color: var(--rv-text); padding: 0 5px; }
.breadcrumb .mod-breadcrumbs__divider, .breadcrumb .icon-location { color: #428bca; }

/* ---------- Ancho de contenido 1140px (container 1170 de Bootstrap 3) ---------- */
.site-grid {
  grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 275.25px)) [main-end] minmax(0, 1fr) [full-end];
}

/* ---------- Cabecera: fondo crema, logo a la izquierda, menú negro a la derecha ---------- */
.container-header {
  background: var(--rv-cream) !important; background-image: none !important; box-shadow: none;
  color: var(--rv-text);
}
.container-header .grid-child { max-width: none; padding: 0; }
.container-header .navbar-brand { padding: 0; margin: 0; }
.container-header .brand-logo img { display: block; width: 249px; height: auto; max-height: none; }
.container-header .navbar-toggler { color: #fff; background: #000; border: 0; }

@media (min-width: 992px) {
  .container-header {
    display: flex; flex-wrap: nowrap; align-items: flex-start; min-height: 190px;
    padding: 0 max(15px, calc((100% - 1140px) / 2));
  }
  .container-header > .grid-child:first-child { flex: 0 0 293px; padding: 10px 0; }
  .container-header > .container-nav { flex: 1 1 auto; display: flex; justify-content: center; align-items: flex-start; padding: 0 0 0 15px; margin: 0; }
  .container-nav .navbar { padding: 0; margin: 0; }
  .container-nav .navbar-collapse { display: block !important; }

  .container-nav ul.mod-menu.metismenu { display: flex; flex-wrap: nowrap; background: #000; margin: 0; padding: 0; }
  .container-nav .metismenu.mod-menu > .metismenu-item { position: relative; padding: 0; margin: 0; font-size: 14px; line-height: 20px; }
  .container-nav .metismenu.mod-menu > .metismenu-item > a,
  .container-nav .metismenu.mod-menu > .metismenu-item > .mod-menu__heading,
  .container-nav .metismenu.mod-menu > .metismenu-item > .mod-menu__separator {
    display: inline-block; padding: 26px 20px; color: #fff; font-size: 14px; font-weight: 500; line-height: 20px;
    text-transform: uppercase; text-decoration: none; background: #000; transition: background .4s;
  }
  .container-nav .metismenu.mod-menu > .metismenu-item.parent > a { padding-right: 24px; }
  .container-nav .metismenu.mod-menu > .metismenu-item > a:hover,
  .container-nav .metismenu.mod-menu > .metismenu-item:hover > a { background: var(--rv-orange); color: #fff; }
  .container-nav .metismenu.mod-menu > .metismenu-item.active > a,
  .container-nav .metismenu.mod-menu > .metismenu-item.current > a { color: #fff; border: 0; text-decoration: none; }
  .container-nav .metismenu.mod-menu > .metismenu-item > a::after { display: none; }
  /* flecha blanca pequeña (8x6) dentro del padding derecho */
  .container-nav .metismenu.mod-menu > .metismenu-item > .mm-toggler {
    position: absolute; right: 8px; top: 33px; width: 8px; height: 6px; padding: 0; margin: 0; border: 0; background: transparent; color: #fff; z-index: 2;
  }
  .container-nav .metismenu.mod-menu > .metismenu-item > .mm-toggler::after {
    content: ""; position: absolute; left: 0; top: 0; margin: 0; border-top: 6px solid #fff; border-left: 4px solid transparent; border-right: 4px solid transparent; transform: none;
  }
  /* submenú: fondo blanco, texto negro 12px mayúsculas */
  .container-nav .metismenu.mod-menu .mm-collapse {
    background: #fff; min-width: 200px; padding: 5px 0; box-shadow: 0 6px 12px rgba(0,0,0,.175); border: 0; border-radius: 0; left: 0; top: 100%;
  }
  .container-nav .metismenu.mod-menu .mm-collapse .metismenu-item { padding: 0; font-size: 12px; }
  .container-nav .metismenu.mod-menu .mm-collapse a {
    display: block; padding: 7px 10px; color: #000; font-size: 12px; font-weight: 500; line-height: 20px; text-transform: uppercase; background: #fff;
  }
  .container-nav .metismenu.mod-menu > .metismenu-item:hover > .mm-collapse { display: block; height: auto !important; }
  .container-nav .metismenu.mod-menu .mm-collapse a:hover { color: var(--rv-hover); background: #fff; }
}
@media (max-width: 991.98px) {
  .container-header { padding: 10px 15px; }
  .container-header .brand-logo img { width: 200px; }
  .container-nav ul.mod-menu { background: #000; padding: 0 10px; }
  .container-nav .metismenu.mod-menu .metismenu-item > a { color: #ffba00; text-transform: uppercase; font-weight: 500; font-size: 14px; }
  .container-nav .metismenu.mod-menu .metismenu-item > a:hover { color: #fff; }
  .container-nav .metismenu.mod-menu .mm-toggler { color: #fff; }
  .container-nav .metismenu.mod-menu .mm-collapse { background: #111; }
}

/* ---------- Slider de portada: franja crema, imagen 1025px centrada, puntos debajo ---------- */
.container-banner { background: var(--rv-cream); padding: 0; margin-bottom: 0 !important; }
.rv-slider { position: relative; overflow: hidden; max-width: 1025px; margin: 0 auto; padding: 0 0 54px; background: transparent; border-radius: 0; }
.rv-slides { display: flex; transition: transform .6s ease; }
.rv-slide { flex: 0 0 100%; margin: 0; position: relative; }
.rv-slide img { width: 100%; height: auto; aspect-ratio: 1025 / 683; object-fit: fill; display: block; }
.rv-slide figcaption { position: absolute; left: 69%; top: 16%; right: auto; bottom: auto; padding: 0; background: none; color: #333; font-size: 11px; }
.rv-prev, .rv-next { display: none; }
.rv-dots { position: absolute; left: 0; right: 0; bottom: 20px; top: auto; text-align: center; }
.rv-dots button { width: 11px; height: 11px; border-radius: 50%; border: 0; margin: 0 6px; padding: 0; cursor: pointer;
  background: radial-gradient(circle at 35% 35%, #8a8a8a, #2a2a2a 70%); }
.rv-dots button.active { background: radial-gradient(circle at 35% 35%, #d6f1fb, #6fc0dd 70%); }

/* ---------- Bloques de la portada sin "tarjeta": título centrado en mayúsculas ---------- */
.container-top-a { display: block !important; margin-top: 0; }
.container-top-a > * { width: 100%; max-width: 100%; margin: 0 !important; }
.no-card > h3, .card > .card-header {
  font-size: 30px; font-weight: 500; line-height: 32px; text-transform: uppercase; text-align: center; color: #000;
  padding: 20px 0; margin: 20px 0 10px; background: none; border: 0;
}
.row > .sixteen.columns { display: contents; }

/* Servicios (círculos naranjos) */
.section_featured_texts { text-align: center; padding: 0; }
.section_featured_texts .icon_bgr {
  width: 100px; height: 100px; margin: 0 auto 28px; border-radius: 100px;
  background-color: var(--rv-orange); background-image: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(0,0,0,.1));
  box-shadow: 0 1px 3px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center;
}
.section_featured_texts .icon_bgr img { width: 80px; height: auto; max-width: none; padding: 8px 0; }
.section_featured_texts h4 { font-size: 18px; font-weight: 500; line-height: 19.8px; color: var(--rv-text); margin: 10px 0; }
.section_featured_texts h4 a { color: var(--rv-text); text-decoration: none; }
.section_featured_texts h4 a:hover { color: var(--rv-hover); }
.section_featured_texts p { font-size: 14px; line-height: 20px; color: var(--rv-muted); margin: 0 0 10px; }

/* Tips y Notas Radiales (layout 4columnas) */
.rv-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 -15px; align-items: start; }
.rv-cards > .item { width: auto; max-width: none; margin: 10px; min-height: 350px; padding: 20px 20px 0; border: 1px solid #ddd; background: #fff; }
.rv-cards .uc-card { display: block; height: auto; border: 0; border-radius: 0; background: none; overflow: visible; }
.rv-cards .item-image img { width: 100%; height: 200px; object-fit: cover; aspect-ratio: auto; margin: 0 0 10px; }
.rv-cards .uc-card_body { display: block; padding: 0; }
.rv-cards .rv-card-date { font-size: 14px; line-height: 20px; color: var(--rv-muted); margin: 0 0 10px; }
.rv-cards h4 { font-size: 18px; font-weight: 500; line-height: 19.8px; margin: 10px 0; }
.rv-cards h4 a { color: var(--rv-text); text-decoration: none; }
.rv-cards h4 a:hover { color: var(--rv-hover); }
.rv-cards .uc-text-divider { display: none; }
.rv-cards .mod-articles-category-introtext:empty { display: none; }
.rv-cards .text-end { text-align: right; margin: 0; }
.rv-cards .btn-inline { font-size: 13px; color: var(--rv-text); font-weight: 400; }
@media (max-width: 991.98px) { .rv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 -10px; } }
@media (max-width: 575.98px) { .rv-cards { grid-template-columns: 1fr; } }

/* "Ver todos los tips" */
.main-top.no-card { margin: 30px 0 0; }
.heading-container h2 { margin: 0; line-height: 1; }
.uc-btn { display: inline; padding: 0; background: none; border-radius: 0; color: var(--rv-text) !important; }
.heading-container .uc-btn.btn-inline { font-size: 13px !important; font-weight: 500; text-transform: uppercase; }
.heading-container .uc-btn.btn-inline:hover { color: var(--rv-hover) !important; }

/* ---------- VirtueMart (ficha de producto como en online-store) ---------- */
main, .container-component { font-size: 14px; line-height: 20px; }
.productdetails-view .product-price, .productdetails-view .PricesalesPrice { font-size: 20px; color: #428bca; margin-top: 15px; }
.productdetails-view .PricesalesPrice .vm-price-desc { font-size: 20px; color: #428bca; margin: 0 4px 0 0; }
.productdetails-view .main-image { text-align: left; }
.productdetails-view .main-image img { display: block; margin: 0; }
.productdetails-view .additional-images img { height: 99px; width: auto; max-width: none; }
.productdetails-view .notify { background: none !important; border: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 14px; color: var(--rv-text) !important; box-shadow: none !important; }
.productdetails-view .notify:hover { color: var(--rv-hover); }

/* ---------- Blog de categoría (Tips Radiales, QSL): igual al override "blog-noticias" ---------- */
.com-content-category-blog .blog-items[class*="masonry-"], .com-content-category-blog .blog-items {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); column-count: auto; gap: 0; align-items: start; margin: 0;
}
.com-content-category-blog .blog-item {
  display: flex; flex-direction: column; margin: 5px !important; padding: 10px 30px; min-height: 350px; border: 1px solid #ddd; background: #fff; break-inside: auto;
}
.com-content-category-blog .blog-item .item-content { order: 1; }
.com-content-category-blog .blog-item .item-image { order: 2; float: none; margin: 0 0 10px; }
.com-content-category-blog .blog-item .item-image img { width: 100%; height: 200px; object-fit: cover; }
@media (max-width: 767.98px) { .com-content-category-blog .blog-item .item-image img { height: auto; } }
.com-content-category-blog .blog-item .page-header { margin: 0; padding: 0; border: 0; }
.com-content-category-blog h2, .com-content-category-blog .blog-item h2 { font-size: 18px; line-height: 110%; margin: 20px 0 10px; text-transform: uppercase; }
.com-content-category-blog .blog-item h2 a { color: var(--rv-text); }
.com-content-category-blog .blog-item h2 a:hover { color: var(--rv-hover); }
.com-content-category-blog .article-info { font-size: 14px; line-height: 20px; color: var(--rv-text) !important; margin: 0 0 20px; }
.com-content-category-blog .article-info .article-info-term, .com-content-category-blog .article-info .icon-calendar { display: none; }
.com-content-category-blog .article-info dd { margin: 0; }
@media (max-width: 1199.98px) { .com-content-category-blog .blog-items[class*="masonry-"], .com-content-category-blog .blog-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .com-content-category-blog .blog-items[class*="masonry-"], .com-content-category-blog .blog-items { grid-template-columns: 1fr; } }
/* Paginación estilo Bootstrap 3 */
.pagination { margin: 20px 0; font-size: 14px; }
.pagination .page-link { font-size: 14px; color: #777; padding: 5px 10px; line-height: 20px; border: 1px solid #ddd; border-radius: 0 !important; background: #fff; }
.pagination .page-link:hover { color: var(--rv-hover); background: #eee; }
.pagination .active .page-link, .pagination .page-item.active .page-link { color: #fff; background: #428bca; border-color: #428bca; }

/* ---------- Pie de página ---------- */
.container-footer { background: var(--rv-footer-bg) !important; background-image: none !important; color: var(--rv-muted); margin-top: 40px; padding: 10px 0 21px; }
.container-footer .grid-child {
  display: grid; grid-template-columns: 293px 488px 1fr; grid-template-rows: auto 1fr; align-items: start;
  max-width: 1170px; margin: 0 auto; padding: 0;
}
.container-footer .grid-child > * { padding: 0 15px; margin: 0; }
.container-footer #mod-custom139 { grid-column: 1; grid-row: 1; }
.container-footer #mod-custom170 { grid-column: 2; grid-row: 1 / span 2; }
.container-footer #mod-custom182 { grid-column: 1; grid-row: 2; }
.container-footer h3 {
  font-size: 20px; font-weight: 500; line-height: 32px; text-transform: uppercase; color: #fff;
  padding: 20px 0; margin: 20px 0 10px; border-bottom: 1px solid #999;
}
.container-footer ul { list-style: none; padding: 0; margin: 0 0 10px; }
.container-footer li { font-size: 14px; color: var(--rv-muted); margin: 0 0 10px; }
.container-footer p { font-size: 14px; line-height: 20px; color: var(--rv-muted); margin: 0 0 10px; }
.container-footer a { color: #b4b4b4; padding: 0 5px; text-decoration: none; font-size: 14px; }
.container-footer a:hover { color: var(--rv-hover); }
.container-footer .fa { display: none; }
.footer-block1 .item > ul > li > .item h3 { margin-top: 20px; }
.redes-sociales a { padding: 0; }
.redes-sociales img { width: 48px; height: 48px; margin: 0; }
@media (max-width: 991.98px) {
  .container-footer .grid-child { grid-template-columns: 1fr; }
  .container-footer #mod-custom139, .container-footer #mod-custom170, .container-footer #mod-custom182 { grid-column: 1; grid-row: auto; }
}

/* ---------- Compatibilidad Bootstrap 3 del contenido antiguo ---------- */
.pull-right { float: right !important; }
.pull-left { float: left !important; }
.img-responsive { max-width: 100%; height: auto; }
.btn-default { color: #333; background: #fff; border: 1px solid #ccc; }
.btn-default:hover { background: #e6e6e6; }
.btn-xs { padding: .1rem .4rem; font-size: .75rem; }
@media (min-width: 768px) { .hidden-sm, .hidden-md { display: none !important; } }
@media (max-width: 767.98px) { .hidden-xs { display: none !important; } }

/* Documentos */
ul.documentos li { margin-bottom: .5rem; }