/* Bloques propios del Diseño de la página (WireVet → Landing Page → Diseño). Prefijo wvd-. */

.wvd-bloque { position: relative; }
.wvd-esp-none { padding: 10px 0; }
.wvd-esp-s { padding: 40px 0; }
.wvd-esp-m { padding: 80px 0; }
.wvd-esp-l { padding: 120px 0; }

.wvd-titulo { margin-bottom: 20px; }
.wvd-titulo:last-child { margin-bottom: 0; }
.wvd-titulo .title { margin-bottom: 0; }
.wvd-titulo .sub-title { margin-bottom: 10px; }

.wvd-con-color .title,
.wvd-con-color .sub-title,
.wvd-con-color .wvd-html,
.wvd-con-color .wvd-desc { color: var(--wvd-color); }

.wvd-desc { margin: 15px auto 0; max-width: 760px; }
.wvd-bloque[style*="text-align:left"] .wvd-desc { margin-left: 0; }
.wvd-bloque[style*="text-align:right"] .wvd-desc { margin-right: 0; }

.wvd-html p:last-child { margin-bottom: 0; }
.wvd-html ul, .wvd-html ol { display: inline-block; text-align: left; padding-left: 20px; }
.wvd-html ul { list-style: disc; }
.wvd-html ol { list-style: decimal; }
.wvd-html .ql-align-center { text-align: center; }
.wvd-html .ql-align-right { text-align: right; }
.wvd-html .ql-align-justify { text-align: justify; }

.wvd-boton { margin-top: 30px; }

.wvd-imagen img { display: block; max-width: 100%; height: auto; border-radius: 20px; margin: 0 auto; }
.wvd-tam-pequeno img { max-width: 320px; }
.wvd-tam-mediano img { max-width: 680px; }
.wvd-bloque[style*="text-align:left"] .wvd-imagen img { margin-left: 0; }
.wvd-bloque[style*="text-align:right"] .wvd-imagen img { margin-right: 0; }

.wvd-cols__img img { width: 100%; height: auto; border-radius: 20px; }
.wvd-cols--invertido .wvd-cols__img { order: 2; }

.wvd-video { position: relative; max-width: 900px; margin: 0 auto; aspect-ratio: 16 / 9; }
.wvd-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 20px; }

.wvd-espacio { display: flex; align-items: center; }
.wvd-espacio .container { width: 100%; }
.wvd-espacio hr { margin: 0; opacity: .25; }

@media (max-width: 991.98px) {
  .wvd-esp-m { padding: 60px 0; }
  .wvd-esp-l { padding: 80px 0; }
  .wvd-cols__img { margin-bottom: 30px; }
  .wvd-cols--invertido .wvd-cols__img { order: 0; }
}

/* Los títulos del tema van en "capitalize": en frases largas en español queda cada palabra con mayúscula. */
.wvd-bloque .section__title .title { text-transform: none; }

.wvd-tarjetas { display: grid; gap: 24px; text-align: left; }
.wvd-tarjetas--1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.wvd-tarjetas--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wvd-tarjetas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wvd-tarjetas--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wvd-tarjeta {
  background: #fff;
  color: var(--tg-body-color);
  border-radius: 20px;
  padding: 30px 26px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .07);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wvd-tarjeta:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(15, 23, 42, .12); }
.wvd-tarjeta__icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 16px; margin-bottom: 18px;
  background: var(--tg-theme-primary); color: #fff; font-size: 24px;
}
.wvd-tarjeta__titulo { font-size: 20px; margin-bottom: 8px; color: var(--tg-heading-color); }
.wvd-tarjeta__texto { margin: 0; font-size: 15px; line-height: 1.6; }
.wvd-bloque[style*="text-align:center"] .wvd-tarjeta { text-align: center; }

.wvd-aviso-plantilla {
  position: fixed; left: 18px; bottom: 18px; z-index: 9998;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100% - 24px); padding: 10px 18px; border-radius: 40px;
  background: #0f172a; color: #fff; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.wvd-aviso-plantilla strong { color: #fff; }

@media (max-width: 1199.98px) {
  .wvd-tarjetas--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .wvd-tarjetas--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .wvd-tarjetas--2, .wvd-tarjetas--3, .wvd-tarjetas--4 { grid-template-columns: 1fr; }
}

/* Con acento propio del bloque, el botón lo usa aunque la clínica tenga un color de botón general. */
.wvd-bloque[style*="--wvd-acento"] .btn,
.wvd-bloque[style*="--wvd-acento"] .btn:hover,
.wvd-bloque[style*="--wvd-acento"] .btn:focus-visible { background: var(--wvd-acento); color: #fff; }