/* ==================================================
   VIZAM - Esquema de color y tipografía
   Azul principal  #10345a
   Dorado (acento) #e09e00
   Tipografía      Montserrat Regular (400) + cursivas
   ================================================== */
* {
  /* El acento de la plantilla: se usa en botones, iconos y detalles
     sobre fondo oscuro, por eso lleva el dorado y no el azul. */
  --primary-color: #e09e00;
  --primary-color-rgb: 224, 158, 0;

  /* El azul de marca sostiene los fondos oscuros y el logo. */
  --secondary-color: #10345a;
  --bg-dark-1: #0b2440;
  --bg-dark-2: #10345a;
  --bg-dark-3: #17456f;
  --bg-dark-1-rgb: 11, 36, 64;

  /* Texto blanco sobre el dorado (decisión de marca). */
  --btn-color: #ffffff;

  /* --- Tipografía VIZAM: Montserrat Regular --------------------------
     Reemplaza Manrope (cuerpo) y Oxanium (títulos) de la plantilla.
     Todo en Regular 400; el Black queda solo para el logo.           */
  --body-font: "Montserrat", Helvetica, Arial, sans-serif;
  --body-font-weight: 400;

  --heading-font: "Montserrat", Helvetica, Arial, sans-serif;
  --heading-font-weight: 400;

  /* La plantilla fija estos aparte del token general: también a Regular. */
  --h1-font-weight: 400;
  --h2-font-weight: 400;
  --h3-font-weight: 400;
  --h4-font-weight: 400;
  --h5-font-weight: 400;
  --h6-font-weight: 400;
  --mainmenu-font-weight: 400;
  --btn-font-weight: 400;
}

/* La plantilla fija 600 en h3-h6 y 500 en h1-h2: todo a Regular. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--heading-font);
  font-weight: 400;
}

/* .subtitle fija font-weight:500 en style.css. */
.subtitle {
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Botones y menú en Regular. */
a.btn-main,
.btn-main,
input[type=button].btn-main,
a.btn-line,
#mainmenu a {
  font-family: var(--body-font);
  font-weight: 400;
}

/* Otros pesos sueltos de la plantilla (fw-bold, strong) a Regular. */
.fw-bold,
strong,
b {
  font-weight: 400;
}

/* ==================================================
   Opiniones: marquee continuo de dos filas
   Las tarjetas se desplazan solas y se detienen al pasar el mouse.
   ================================================== */
.vz-op-wrap {
  position: relative;
  overflow: hidden;
  padding: 10px 0 30px;
}

/* Degradado en los bordes para que las tarjetas no se corten en seco. */
.vz-op-wrap::before,
.vz-op-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12%;
  z-index: 2;
  pointer-events: none;
}
.vz-op-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg-dark-1) 0%, rgba(11, 36, 64, 0) 100%);
}
.vz-op-wrap::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg-dark-1) 0%, rgba(11, 36, 64, 0) 100%);
}

.vz-op-row {
  overflow: hidden;
  margin-bottom: 24px;
}
.vz-op-row:last-child {
  margin-bottom: 0;
}

.vz-op-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: vz-op-scroll 60s linear infinite;
}
/* La segunda fila viaja en sentido contrario: da sensación de volumen. */
.vz-op-track--rev {
  animation-direction: reverse;
}

/* Al pasar el mouse se detiene para poder leer con calma. */
.vz-op-wrap:hover .vz-op-track {
  animation-play-state: paused;
}

@keyframes vz-op-scroll {
  from { transform: translateX(0); }
  /* -50% porque el contenido está duplicado: el salto es imperceptible. */
  to   { transform: translateX(-50%); }
}

.vz-op-card {
  flex: 0 0 auto;
  width: 360px;
  margin: 0;
  padding: 26px;
  background: var(--bg-dark-2);
  border: solid 1px rgba(255, 255, 255, .07);
  border-radius: var(--rounded-1);
}

.vz-op-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.vz-op-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.vz-op-name {
  color: #fff;
  line-height: 1.3;
}
.vz-op-date {
  opacity: .6;
}
.vz-op-stars {
  color: var(--primary-color);
  font-size: 13px;
  margin-bottom: 10px;
}
.vz-op-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
}

@media (max-width: 575px) {
  .vz-op-card { width: 290px; padding: 22px; }
  .vz-op-wrap::before,
  .vz-op-wrap::after { width: 8%; }
}

/* Accesibilidad: hay gente a la que el movimiento constante le causa mareo. */
@media (prefers-reduced-motion: reduce) {
  .vz-op-track {
    animation: none;
    transform: none;
  }
  .vz-op-row {
    overflow-x: auto;
    scrollbar-width: thin;
  }
}

/* Acceso al portal de clientes desde la web */
.menu_side_area { display: flex; align-items: center; gap: 14px; }
.vz-portal-link { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; padding: 8px 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 30px; transition: background .2s, border-color .2s; white-space: nowrap; }
.vz-portal-link:hover { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }
.vz-portal-link i { color: var(--primary-color, #e09e00); }
header.smaller .vz-portal-link { border-color: rgba(255,255,255,.2); }
#mainmenu li.vz-menu-portal { display: none !important; }
.vz-portal-nota { margin: 16px 0 0; font-size: 14px; }
.vz-portal-nota a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 992px) {
  .vz-portal-link span { display: none; }
  .vz-portal-link { padding: 8px 11px; }
  #mainmenu li.vz-menu-portal { display: block !important; }
}.vz-portal-link, .vz-portal-link span { color: #fff !important; }