/* =====================================================================
   MV Aseguradores — tarjetas de "Otros seguros en esta categoria"
   Agosto 2026.

   Este bloque nacio dentro de css/premium-producto.css, acotado a las dos
   fichas premium (remolque y jubilacion). Como el rediseno de las tarjetas no
   depende de nada del resto de la ficha premium, se saca a su propio fichero y
   pasa a TODAS las fichas de seguro, que es donde se pinta el bloque.

   Lo que cambia respecto a las tarjetas de serie:
     * 8 tarjetas en dos filas de cuatro en vez de 12 de tres en fila. Con 12,
       el scroll del final de la ficha se hacia eterno.
     * Todas claras. La alternancia clara/oscura del original marea con 8.
     * Se quita el velo negro del ::before, que sin foto de fondo solo
       ensuciaba y dejaba las tarjetas alternas grises en vez de blancas.
     * El boton "Acceder" pasa a ser una flecha: el <article> entero ya lleva
       onclick, el boton era ruido.

   ALCANCE: todo cuelga de .site-products.relacionados-premium, que solo pinta
   contenido/inc-relacionados.php. No puede alcanzar a inc-productos.php,
   inc-categorias.php ni inc-destacados.php, que comparten la clase
   .site-products pero no esta.

   Las variables van con prefijo --rp- y se declaran aqui mismo: este fichero
   se carga tambien en fichas que NO son premium, donde las --pm- de
   premium-producto.css no existen.

   PESO DE LOS SELECTORES: van como compuesto .site-products.relacionados-premium
   y no como .relacionados-premium a secas. El <section> lleva las dos clases, asi
   que el resultado es el mismo, pero el compuesto suma 3 clases y devuelve a estas
   reglas el peso que tenian cuando vivian aqui como
   ".producto-premium .site-products X".
   Sin eso, en las fichas premium (que ademas cargan premium-producto.css DESPUES
   de este fichero) reglas como .producto-premium .btn-primary, con las mismas 2
   clases, ganaban el empate por orden de carga: el boton de cada tarjeta volvia a
   pintarse como una pastilla roja gigante en vez de la flecha, y los subtitulos
   saltaban de 0,74rem a 16,8px.
   ===================================================================== */

.site-products.relacionados-premium {
  --rp-red: #b02d30;
  --rp-ink: #23242e;
  --rp-muted: #7a7d8c;
  --rp-line: #e4e5ea;
  --rp-paper: #ffffff;
  --rp-wash: #f7f8f7;

  --rp-shadow-s: 0 1px 2px rgba(42, 43, 55, .06), 0 2px 8px rgba(42, 43, 55, .05);
  --rp-shadow-l: 0 4px 8px rgba(42, 43, 55, .07), 0 24px 56px rgba(42, 43, 55, .13);

  --rp-r: 14px;
  --rp-ease: cubic-bezier(.22, .61, .36, 1);
}

.site-products.relacionados-premium .row {
  margin-left: -.4rem;
  margin-right: -.4rem;
}

.site-products.relacionados-premium .row > article {
  padding: 0 .4rem;
  margin-bottom: .8rem;
  flex: 0 0 100%;
  max-width: 100%;
}

.site-products.relacionados-premium .row > article.pb-5 { padding-bottom: 0 !important; }

/* La tarjeta */
.site-products.relacionados-premium .article {
  position: relative;
  border-radius: var(--rp-r);
  overflow: hidden;
  padding: 1.15rem .9rem 1.05rem !important;
  min-height: 0;
  border: 1px solid var(--rp-line);
  box-shadow: var(--rp-shadow-s);
  transition: transform .3s var(--rp-ease), box-shadow .3s var(--rp-ease),
              border-color .3s var(--rp-ease);
}

.site-products.relacionados-premium .article:hover {
  transform: translateY(-4px);
  box-shadow: var(--rp-shadow-l);
  border-color: var(--rp-red);
}

/* Sin alternancia clara/oscura: 8 tarjetas a dos tonos marean. Todas claras
   y el color lo pone el acento. */
.site-products.relacionados-premium .overlay-dark,
.site-products.relacionados-premium .overlay-light {
  background-color: var(--rp-paper) !important;
}

.site-products.relacionados-premium .overlay-dark h3 a,
.site-products.relacionados-premium .overlay-dark p,
.site-products.relacionados-premium .overlay-dark .text-white {
  color: var(--rp-ink) !important;
}

/* La tarjeta original lleva un ::before con un velo negro al 50 % para dar
   contraste sobre la foto de fondo. Sin foto detras solo ensucia: las tarjetas
   alternas se veian grises en vez de blancas. */
.site-products.relacionados-premium .article::before {
  content: none !important;
  background: none !important;
}

/* Icono mas pequeno y con su propio circulo */
.site-products.relacionados-premium figure {
  margin: 0 0 .6rem !important;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--rp-wash);
  transition: background .3s var(--rp-ease);
}

.site-products.relacionados-premium .article:hover figure { background: #fbeceb; }
.site-products.relacionados-premium figure img { width: 28px !important; height: 28px !important; }

/* Titulo: sin subrayado ni mayusculas forzadas, que hacian bloques ilegibles */
.site-products.relacionados-premium h3 {
  margin: 0 !important;
  font-size: .82rem !important;
  line-height: 1.3;
  text-transform: none !important;
  letter-spacing: normal;
}

.site-products.relacionados-premium h3 a {
  color: var(--rp-ink) !important;
  text-decoration: none !important;
  font-weight: 700;
  transition: color .2s var(--rp-ease);
}

.site-products.relacionados-premium .article:hover h3 a { color: var(--rp-red) !important; }

.site-products.relacionados-premium .flex-grow-1 {
  margin-bottom: .5rem !important;
  flex-grow: 0 !important;
}

.site-products.relacionados-premium .flex-grow-1 p {
  font-size: .74rem;
  line-height: 1.4;
  margin: .3rem 0 0 !important;
  color: var(--rp-muted) !important;
}

/* El boton de cada tarjeta pasa a ser una flecha discreta */
.site-products.relacionados-premium .article > p:last-child { margin: 0 !important; }

.site-products.relacionados-premium .btn-more {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--rp-red) !important;
  font-size: 0 !important;
  box-shadow: none !important;
  min-width: 0;
}

.site-products.relacionados-premium .btn-more i {
  font-size: .8rem !important;
  margin: 0 !important;
  transition: transform .3s var(--rp-ease);
}

.site-products.relacionados-premium .article:hover .btn-more i { transform: translateX(4px); }

@media (min-width: 576px) {
  .site-products.relacionados-premium .row > article { flex: 0 0 50%; max-width: 50%; }
}

@media (min-width: 992px) {
  .site-products.relacionados-premium .row > article { flex: 0 0 25%; max-width: 25%; }
  .site-products.relacionados-premium .article { padding: 1.35rem 1rem 1.2rem !important; }
  .site-products.relacionados-premium h3 { font-size: .86rem !important; }
}