/* =========================================================
   Vival Salud - Vista artículo Joomla / Salud al día
   ========================================================= */

.vival-articulo-salud {
  --vival-azul: #0e4c63;
  --vival-verde: #0e9186;
  --vival-verde-claro: #12b09f;
  --vival-mint: #d3f0ef;
  --vival-fondo: #f4fbfa;
  --vival-linea: rgba(14, 76, 99, 0.14);
  --vival-sombra: 0 16px 38px rgba(14, 76, 99, 0.11);

  max-width: 1080px;
  margin: 0 auto 46px;
  color: var(--vival-azul);
}

/* Mantiene la intro para el home, pero la oculta en la vista completa del artículo */
.com-content.view-article .article-details [itemprop="articleBody"] > .vh-card-intro {
  display: none !important;
}

/* Oculta barra social / RSS / compartir en la vista de artículo */
.com-content.view-article .article-ratings-social-share,
.com-content.view-article .article-social-share,
.com-content.view-article .icons {
  display: none !important;
}

/* Reduce aire superior propio de la vista de artículo */
.com-content.view-article .article-details {
  padding-top: 0 !important;
}

.com-content.view-article #sp-main-body {
  padding-top: 24px;
}

/* =========================================================
   Hero principal
   ========================================================= */

.vival-articulo-salud__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.95fr);
  gap: clamp(20px, 3vw, 34px);
  align-items: center;
  padding: clamp(18px, 3vw, 34px);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(18, 176, 159, 0.15), transparent 38%),
    linear-gradient(135deg, #eefaf9 0%, #ffffff 68%);
  border: 1px solid rgba(14, 76, 99, 0.10);
  box-shadow: var(--vival-sombra);
  overflow: hidden;
}

.vival-articulo-salud__hero-media {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(14, 76, 99, 0.13);
}

.vival-articulo-salud__hero-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.vival-articulo-salud__hero-copy {
  max-width: 560px;
}

.vival-articulo-salud__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 14px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(14, 145, 134, 0.12);
  color: var(--vival-verde);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vival-articulo-salud__hero h1 {
  margin: 0;
  color: var(--vival-azul);
  font-size: clamp(2rem, 4.2vw, 3.35rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.vival-articulo-salud__bajada {
  margin: 18px 0 0;
  max-width: 54ch;
  color: rgba(14, 76, 99, 0.84);
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  line-height: 1.58;
  text-align: justify;
  hyphens: none;
}

/* =========================================================
   Intro
   ========================================================= */

.vival-articulo-salud__intro {
  max-width: 890px;
  margin: clamp(24px, 4vw, 38px) auto 0;
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid var(--vival-linea);
  box-shadow: 0 10px 26px rgba(14, 76, 99, 0.07);
}

.vival-articulo-salud__intro p {
  margin: 0;
  color: var(--vival-azul);
  font-size: clamp(1.08rem, 1.35vw, 1.25rem);
  line-height: 1.7;
  font-weight: 500;
  text-align: justify;
  hyphens: none;
}

/* =========================================================
   Cuerpo del artículo
   ========================================================= */

.vival-articulo-salud__body {
  max-width: 890px;
  margin: clamp(28px, 4vw, 44px) auto 0;
}

.vival-articulo-salud__body h2 {
  margin: clamp(30px, 4vw, 44px) 0 16px;
  color: var(--vival-azul);
  font-size: clamp(1.55rem, 2.7vw, 2.15rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.vival-articulo-salud__body h2::after {
  content: "";
  display: block;
  width: 68px;
  height: 4px;
  margin-top: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vival-verde), var(--vival-verde-claro));
}

.vival-articulo-salud__body p {
  margin: 0 0 20px;
  color: rgba(14, 76, 99, 0.91);
  font-size: clamp(1.03rem, 1.18vw, 1.14rem);
  line-height: 1.76;
  text-align: justify;
  hyphens: none;
}

.vival-articulo-salud__lead {
  margin: 4px 0 22px !important;
  padding: clamp(17px, 2.2vw, 24px);
  border-left: 5px solid var(--vival-verde);
  border-radius: 0 20px 20px 0;
  background: var(--vival-fondo);
  color: var(--vival-azul) !important;
  font-size: clamp(1.12rem, 1.42vw, 1.28rem) !important;
  line-height: 1.66 !important;
  font-weight: 500;
  text-align: justify;
  hyphens: none;
}

/* Imagen interior */
.vival-articulo-salud__figure {
  margin: clamp(26px, 4vw, 40px) 0;
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(14, 76, 99, 0.12);
}

.vival-articulo-salud__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Cierre editorial */
.vival-articulo-salud__cierre {
  margin-top: clamp(26px, 4vw, 42px) !important;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(211, 240, 239, 0.82), rgba(255, 255, 255, 0.96));
  border: 1px solid rgba(14, 76, 99, 0.12);
  box-shadow: 0 12px 28px rgba(14, 76, 99, 0.08);
  color: var(--vival-azul) !important;
  font-size: clamp(1.1rem, 1.42vw, 1.26rem) !important;
  line-height: 1.7 !important;
  font-weight: 500;
  text-align: justify;
  hyphens: none;
}

/* =========================================================
   Bloque agendamiento
   ========================================================= */

.vival-articulo-salud__booking {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: clamp(20px, 3.5vw, 36px);
  align-items: center;
  margin-top: clamp(36px, 5vw, 56px);
  padding: clamp(24px, 3.5vw, 40px);
  border-radius: 30px;
  background:
    radial-gradient(circle at top right, rgba(18, 176, 159, 0.30), transparent 42%),
    linear-gradient(135deg, #0e4c63 0%, #0b3d50 100%);
  color: #ffffff;
  box-shadow: 0 20px 46px rgba(14, 76, 99, 0.22);
}

.vival-articulo-salud__booking h2 {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: clamp(1.55rem, 2.7vw, 2.25rem);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.03em;
}

.vival-articulo-salud__booking h2::after {
  display: none;
}

.vival-articulo-salud__booking p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1rem, 1.14vw, 1.1rem);
  line-height: 1.62;
  text-align: left;
}

.vival-articulo-salud__booking-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vival-articulo-salud__booking-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: all 0.25s ease;
}

.vival-articulo-salud__booking-btn:hover,
.vival-articulo-salud__booking-btn:focus {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
  text-decoration: none;
}

.vival-articulo-salud__booking-btn--primary {
  background: var(--vival-verde-claro);
  border-color: var(--vival-verde-claro);
  box-shadow: 0 10px 24px rgba(18, 176, 159, 0.30);
}

.vival-articulo-salud__booking-btn--primary:hover,
.vival-articulo-salud__booking-btn--primary:focus {
  background: #18c3b1;
  border-color: #18c3b1;
}

/* =========================================================
   Navegación anterior / siguiente
   ========================================================= */

.com-content.view-article .pagenavigation {
  max-width: 1080px;
  margin: 30px auto 0;
}

.com-content.view-article .pagenavigation .btn {
  border-radius: 999px;
  padding: 10px 18px;
  border: 1px solid rgba(14, 76, 99, 0.14);
  background: #ffffff;
  color: var(--vival-azul);
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(14, 76, 99, 0.08);
}

.com-content.view-article .pagenavigation .btn:hover {
  background: #0e9186;
  color: #ffffff;
  border-color: #0e9186;
}

/* =========================================================
   Responsive artículos
   ========================================================= */

@media (max-width: 991px) {
  .vival-articulo-salud {
    max-width: calc(100% - 32px);
  }

  .vival-articulo-salud__hero {
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 26px;
  }

  .vival-articulo-salud__hero-copy {
    order: -1;
    max-width: none;
    text-align: center;
  }

  .vival-articulo-salud__eyebrow {
    margin-left: auto;
    margin-right: auto;
  }

  .vival-articulo-salud__bajada {
    margin-left: auto;
    margin-right: auto;
  }

  .vival-articulo-salud__booking {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .vival-articulo-salud__booking p {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .com-content.view-article #sp-main-body {
    padding-top: 14px;
  }

  .vival-articulo-salud {
    max-width: calc(100% - 24px);
    margin-bottom: 38px;
  }

  .vival-articulo-salud__hero {
    gap: 18px;
    padding: 18px;
    border-radius: 24px;
  }

  .vival-articulo-salud__hero h1 {
    font-size: clamp(1.95rem, 8.6vw, 2.45rem);
    line-height: 1.07;
  }

  .vival-articulo-salud__bajada {
    font-size: 1.03rem;
    line-height: 1.58;
  }

  .vival-articulo-salud__hero-media img,
  .vival-articulo-salud__figure img {
    aspect-ratio: 4 / 3;
  }

  .vival-articulo-salud__intro {
    padding: 19px;
    border-radius: 22px;
  }

  .vival-articulo-salud__body h2 {
    margin-top: 34px;
  }

  .vival-articulo-salud__lead {
    padding: 18px;
    border-radius: 0 18px 18px 0;
  }

  .vival-articulo-salud__booking {
    padding: 24px 20px;
    border-radius: 26px;
  }

  .vival-articulo-salud__booking-btn {
    width: 100%;
    font-size: 0.98rem;
  }
}
/* =========================================================
   VIVAL SALUD — HOME HERO / SLIDER PRINCIPAL
   CSS único para custom.css
   No pegar dentro de SP Page Builder
   ========================================================= */

.vh-slider {
  --vh-dark: #0e4c63;
  --vh-mid: #007789;
  --vh-light: #d3f0ef;
  --vh-soft: #daedec;
  --vh-white: #ffffff;

  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  background-color: var(--vh-light);
  background-image: url('/images/2023/08/31/fondo-vival-salud.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  font-family: var(--vival-font-base, "Ruda", sans-serif);
}

@supports (height: 100dvh) {
  .vh-slider {
    height: 100dvh;
    min-height: 100dvh;
  }
}

.vh-slider::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(218, 237, 236, 0.04);
  z-index: 0;
  pointer-events: none;
}

/* =========================
   Slides
   ========================= */

.vh-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  animation: vhSliderFade 32s infinite ease-in-out;
}

.vh-slider__slide.s1 {
  animation-delay: 0s;
}

.vh-slider__slide.s2 {
  animation-delay: 8s;
}

.vh-slider__slide.s3 {
  animation-delay: 16s;
}

.vh-slider__slide.s4 {
  animation-delay: 24s;
}

.vh-slider__link {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
}

.vh-slider__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  will-change: transform, opacity;
}

/* Encuadre inicial de fotos — escritorio */

.vh-slider__slide.s1 img {
  object-position: calc(100% + 10px) -120px;
  transform-origin: 92% 8%;
  animation:
    vhZoom0091 32s infinite ease-in-out 0s,
    vhImageDim 32s infinite ease-in-out 0s;
}

.vh-slider__slide.s2 img {
  object-position: 18% center;
  transform-origin: 22% 52%;
  animation:
    vhZoom0200 32s infinite ease-in-out 8s,
    vhImageDim 32s infinite ease-in-out 0s;
}

.vh-slider__slide.s3 img {
  object-position: 52% center;
  transform-origin: 52% 50%;
  animation:
    vhZoom0158 32s infinite ease-in-out 16s,
    vhImageDim 32s infinite ease-in-out 0s;
}

.vh-slider__slide.s4 img {
  object-position: 50% center;
  transform-origin: 50% 50%;
  animation:
    vhZoom0239 32s infinite ease-in-out 24s,
    vhImageDim 32s infinite ease-in-out 0s;
}

/* =========================
   Contenido
   ========================= */

.vh-slider__content {
  position: absolute;
  top: 48%;
  left: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
  width: min(1120px, calc(100% - 40px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.vh-slider__messages {
  position: relative;
  width: 100%;
  min-height: 190px;
}

.vh-slider__message {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(28px, 3.8vw, 54px);
  line-height: 1.02;
  font-weight: var(--vival-fw-xbold, 800);
  letter-spacing: -0.02em;
  color: var(--vh-mid);
  text-shadow: none;
  opacity: 0;
  transform: translateY(12px) scale(0.992);
  animation: vhTextCycle 32s infinite ease-in-out;
  will-change: opacity, transform;
}

.vh-slider__message.t1 {
  animation-delay: 0s;
}

.vh-slider__message.t2 {
  animation-delay: 8s;
}

.vh-slider__message.t3 {
  animation-delay: 16s;
}

.vh-slider__message.t4 {
  animation-delay: 24s;
}

.vh-slider__message-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Píldora de texto más liviana */


/* =========================================================
   Vival Salud — Ajuste final pills slider
   Reemplaza el bloque final "Fondo tipo pill para textos del slider"
   ========================================================= */

.vh-slider__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(820px, calc(100vw - 48px));
  padding: clamp(10px, 1.25vw, 15px) clamp(20px, 3vw, 38px);
  border-radius: 999px;
  background: rgba(218, 237, 236, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.36);
  box-shadow:
    0 10px 26px rgba(4, 69, 77, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Primera pill más chica */
.vh-slider__message.t1 .vh-slider__pill {
  max-width: min(640px, calc(100vw - 48px));
  padding: clamp(8px, 1vw, 12px) clamp(17px, 2.4vw, 28px);
  font-size: clamp(22px, 3vw, 42px);
}

/* Separación entre primera pill y teléfono */
.vh-slider__message.t1 .vh-slider__message-inner {
  gap: 12px;
}

/* Teléfono con sombra más liviana */
.vh-slider__phone {
  background: rgba(218, 237, 236, 0.58);
  box-shadow: 0 8px 18px rgba(4, 69, 77, 0.07);
}

/* Responsive */
@media (max-width: 768px) {
  .vh-slider__pill {
    max-width: calc(100vw - 28px);
    padding: 9px 17px;
    border-radius: 24px;
  }

  .vh-slider__message.t1 .vh-slider__pill {
    max-width: calc(100vw - 38px);
    padding: 8px 14px;
    font-size: clamp(19px, 5.5vw, 28px);
  }

  .vh-slider__message.t1 .vh-slider__message-inner {
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .vh-slider__pill {
    padding: 8px 15px;
    border-radius: 22px;
  }

  .vh-slider__message.t1 .vh-slider__pill {
    max-width: calc(100vw - 34px);
    padding: 7px 13px;
    font-size: clamp(18px, 5.2vw, 24px);
  }
}
/* Teléfono */

.vh-slider__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  min-height: 42px;
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(218, 237, 236, 0.58);
  box-shadow: 0 8px 18px rgba(4, 69, 77, 0.08);
  font-size: clamp(17px, 1.6vw, 24px);
  line-height: 1;
  font-weight: var(--vival-fw-xbold, 800);
  letter-spacing: 0.01em;
  color: var(--vh-mid);
  text-decoration: none;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    color .2s ease;
}

.vh-slider__phone:hover,
.vh-slider__phone:focus {
  background: rgba(218, 237, 236, 0.72);
  color: var(--vh-mid);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(4, 69, 77, 0.11);
}

/* Logo */

.vh-slider__logo {
  margin-top: 16px;
  width: clamp(180px, 17vw, 290px);
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  animation: vhLogoCycle 32s infinite ease-in-out;
  filter: none;
  position: relative;
  z-index: 6;
}

.vh-slider__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================
   Tablet
   ========================= */

@media (max-width: 991px) {
  .vh-slider {
    height: clamp(420px, 62svh, 700px);
    min-height: 420px;
  }

  .vh-slider__content {
    top: 48%;
    width: min(940px, calc(100% - 28px));
  }

  .vh-slider__messages {
    min-height: 180px;
  }

  .vh-slider__message {
    font-size: clamp(26px, 4.8vw, 42px);
    line-height: 1.04;
  }

  .vh-slider__message-inner {
    gap: 13px;
  }

  .vh-slider__phone {
    min-height: 40px;
    font-size: clamp(16px, 2.4vw, 22px);
    padding: 9px 18px;
  }

  .vh-slider__logo {
    width: clamp(170px, 26vw, 260px);
    margin-top: 14px;
  }

  .vh-slider__slide.s1 img {
    object-position: calc(100% + 70px) -36px;
    transform-origin: 90% 10%;
    animation:
      vhZoom0091Tablet 32s infinite ease-in-out 0s,
      vhImageDim 32s infinite ease-in-out 0s;
  }

  .vh-slider__slide.s2 img {
    object-position: 24% center;
    transform-origin: 25% 50%;
    animation:
      vhZoom0200Tablet 32s infinite ease-in-out 8s,
      vhImageDim 32s infinite ease-in-out 0s;
  }

  .vh-slider__slide.s3 img {
    object-position: center center;
    transform-origin: 50% 50%;
    animation:
      vhZoom0158Tablet 32s infinite ease-in-out 16s,
      vhImageDim 32s infinite ease-in-out 0s;
  }

  .vh-slider__slide.s4 img {
    object-position: center center;
    transform-origin: 50% 50%;
    animation:
      vhZoom0239Tablet 32s infinite ease-in-out 24s,
      vhImageDim 32s infinite ease-in-out 0s;
  }
}

/* =========================
   Móvil
   ========================= */

@media (max-width: 768px) {
  .vh-slider {
    height: clamp(300px, 48svh, 460px);
    min-height: 300px;
  }

  .vh-slider__content {
    top: 48%;
    width: calc(100% - 18px);
  }

  .vh-slider__messages {
    min-height: 160px;
  }

  .vh-slider__message {
    font-size: clamp(23px, 6.4vw, 34px);
    line-height: 1.06;
  }

  .vh-slider__message-inner {
    gap: 12px;
  }

  .vh-slider__pill {
    max-width: calc(100vw - 28px);
    padding: 8px 16px;
    border-radius: 22px;
  }

  .vh-slider__message.t1 .vh-slider__pill {
    max-width: calc(100vw - 28px);
  }

  .vh-slider__phone {
    min-height: 38px;
    font-size: clamp(15px, 4.3vw, 19px);
    padding: 8px 16px;
  }

  .vh-slider__logo {
    width: clamp(140px, 40vw, 200px);
    margin-top: 10px;
  }

  .vh-slider__slide.s1 img {
    object-position: calc(100% + 78px) -28px;
    transform-origin: 88% 10%;
    animation:
      vhZoom0091Mobile 32s infinite ease-in-out 0s,
      vhImageDim 32s infinite ease-in-out 0s;
  }

  .vh-slider__slide.s2 img {
    object-position: 28% center;
    transform-origin: 28% 50%;
    animation:
      vhZoom0200Mobile 32s infinite ease-in-out 8s,
      vhImageDim 32s infinite ease-in-out 0s;
  }

  .vh-slider__slide.s3 img {
    object-position: center center;
    transform-origin: 50% 50%;
    animation:
      vhZoom0158Mobile 32s infinite ease-in-out 16s,
      vhImageDim 32s infinite ease-in-out 0s;
  }

  .vh-slider__slide.s4 img {
    object-position: center center;
    transform-origin: 50% 50%;
    animation:
      vhZoom0239Mobile 32s infinite ease-in-out 24s,
      vhImageDim 32s infinite ease-in-out 0s;
  }
}

/* =========================
   Móvil pequeño
   ========================= */

@media (max-width: 480px) {
  .vh-slider {
    height: clamp(300px, 50svh, 420px);
    min-height: 300px;
  }

  .vh-slider__messages {
    min-height: 150px;
  }

  .vh-slider__message {
    font-size: clamp(21px, 6.8vw, 29px);
  }

  .vh-slider__pill {
    padding: 7px 14px;
    border-radius: 20px;
  }

  .vh-slider__phone {
    min-height: 36px;
    font-size: clamp(14px, 4.1vw, 17px);
    padding: 7px 14px;
  }

  .vh-slider__logo {
    width: clamp(132px, 42vw, 180px);
  }
}

/* =========================
   Animaciones globales
   ========================= */

@keyframes vhSliderFade {
  0% { opacity: 0; }
  2% { opacity: 0.22; }
  7% { opacity: 1; }
  24% { opacity: 1; }
  28% { opacity: 0.28; }
  32% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes vhImageDim {
  0%, 6% { opacity: 1; }
  10%, 22% { opacity: 0.82; }
  26%, 32% { opacity: 1; }
  35%, 47% { opacity: 0.82; }
  51%, 57% { opacity: 1; }
  60%, 72% { opacity: 0.82; }
  76%, 82% { opacity: 1; }
  85%, 97% { opacity: 0.82; }
  100% { opacity: 1; }
}

@keyframes vhTextCycle {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.992);
  }

  5% {
    opacity: 0;
    transform: translateY(8px) scale(0.996);
  }

  9% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  19% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  22% {
    opacity: 0;
    transform: translateY(-8px) scale(1.004);
  }

  100% {
    opacity: 0;
    transform: translateY(-8px) scale(1.004);
  }
}

@keyframes vhLogoCycle {
  0%, 5% {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }

  10%, 22% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  26%, 31% {
    opacity: 0;
    transform: translateY(-5px) scale(1.005);
  }

  35%, 47% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  51%, 56% {
    opacity: 0;
    transform: translateY(-5px) scale(1.005);
  }

  60%, 72% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  76%, 81% {
    opacity: 0;
    transform: translateY(-5px) scale(1.005);
  }

  85%, 97% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-5px) scale(1.005);
  }
}

/* Zoom fotos — escritorio */

@keyframes vhZoom0091 {
  0% { transform: scale(1.98); }
  32%, 100% { transform: scale(1); }
}

@keyframes vhZoom0200 {
  0% { transform: scale(1.90); }
  32%, 100% { transform: scale(1); }
}

@keyframes vhZoom0158 {
  0% { transform: scale(1.82); }
  32%, 100% { transform: scale(1); }
}

@keyframes vhZoom0239 {
  0% { transform: scale(1.84); }
  32%, 100% { transform: scale(1); }
}

/* Zoom fotos — tablet */

@keyframes vhZoom0091Tablet {
  0% { transform: scale(1.96); }
  32%, 100% { transform: scale(1); }
}

@keyframes vhZoom0200Tablet {
  0% { transform: scale(1.82); }
  32%, 100% { transform: scale(1.01); }
}

@keyframes vhZoom0158Tablet {
  0% { transform: scale(1.76); }
  32%, 100% { transform: scale(1.01); }
}

@keyframes vhZoom0239Tablet {
  0% { transform: scale(1.78); }
  32%, 100% { transform: scale(1.01); }
}

/* Zoom fotos — móvil */

@keyframes vhZoom0091Mobile {
  0% { transform: scale(1.88); }
  32%, 100% { transform: scale(1.02); }
}

@keyframes vhZoom0200Mobile {
  0% { transform: scale(1.72); }
  32%, 100% { transform: scale(1); }
}

@keyframes vhZoom0158Mobile {
  0% { transform: scale(1.68); }
  32%, 100% { transform: scale(1.02); }
}

@keyframes vhZoom0239Mobile {
  0% { transform: scale(1.68); }
  32%, 100% { transform: scale(1.02); }
}

/* =========================================================
   Vival Salud — Pills slider unificadas
   Sin borde, mismo estilo y misma tipografía en todas las diapos
   ========================================================= */

.vh-slider__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  max-width: min(880px, calc(100vw - 48px));
  padding: clamp(12px, 1.45vw, 18px) clamp(24px, 3.4vw, 46px);
  border-radius: 999px;

  background: rgba(218, 237, 236, 0.62);
  border: 0 !important;

  box-shadow:
    0 10px 26px rgba(4, 69, 77, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  color: var(--vh-mid);
  font-size: clamp(25px, 3.35vw, 48px);
  line-height: 1.04;
  font-weight: var(--vival-fw-xbold, 800);
  letter-spacing: -0.02em;
  text-align: center;
}

/* Todas las pills principales quedan iguales */
.vh-slider__message.t1 .vh-slider__pill,
.vh-slider__message.t2 .vh-slider__pill,
.vh-slider__message.t3 .vh-slider__pill,
.vh-slider__message.t4 .vh-slider__pill {
  max-width: min(880px, calc(100vw - 48px));
  padding: clamp(12px, 1.45vw, 18px) clamp(24px, 3.4vw, 46px);
  border: 0 !important;
  font-size: clamp(25px, 3.35vw, 48px);
  line-height: 1.04;
  font-weight: var(--vival-fw-xbold, 800);
  letter-spacing: -0.02em;
}

/* Separación entre pill y teléfono en la primera diapo */
.vh-slider__message.t1 .vh-slider__message-inner {
  gap: 12px;
}

/* Teléfono: sin borde, con sombra liviana */
.vh-slider__phone {
  border: 0 !important;
  background: rgba(218, 237, 236, 0.58);
  box-shadow: 0 8px 18px rgba(4, 69, 77, 0.07);
}

/* Tablet y móvil */
@media (max-width: 768px) {
  .vh-slider__pill,
  .vh-slider__message.t1 .vh-slider__pill,
  .vh-slider__message.t2 .vh-slider__pill,
  .vh-slider__message.t3 .vh-slider__pill,
  .vh-slider__message.t4 .vh-slider__pill {
    max-width: calc(100vw - 28px);
    padding: 10px 20px;
    border-radius: 26px;
    font-size: clamp(21px, 6vw, 31px);
    line-height: 1.06;
  }

  .vh-slider__message.t1 .vh-slider__message-inner {
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .vh-slider__pill,
  .vh-slider__message.t1 .vh-slider__pill,
  .vh-slider__message.t2 .vh-slider__pill,
  .vh-slider__message.t3 .vh-slider__pill,
  .vh-slider__message.t4 .vh-slider__pill {
    max-width: calc(100vw - 24px);
    padding: 9px 17px;
    border-radius: 24px;
    font-size: clamp(20px, 5.8vw, 27px);
  }
}
/* =========================================================
   Vival Salud · Tabla Profesionales
   CSS depurado para tabla exportada desde Word
   ========================================================= */

.vh-profesionales-clean {
  --vh-dark: #0e4c63;
  --vh-mid: #007789;
  --vh-light: #daedec;
  --vh-white: #ffffff;
  --vh-border: rgba(14, 76, 99, 0.16);
  --vh-row: rgba(255, 255, 255, 0.94);
  --vh-row-soft: rgba(218, 237, 236, 0.16);
  --vh-number-bg: rgba(218, 237, 236, 0.38);

  width: 100%;
  padding: clamp(30px, 4vw, 60px) clamp(8px, 3vw, 34px);
  background: transparent !important;
  font-family: var(--vival-font-base, "Ruda", sans-serif);
  color: var(--vh-dark);
}

.vh-profesionales-clean__wrap {
  width: min(1180px, 100%);
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 24px;
  background: var(--vh-white);
  box-shadow: 0 18px 42px rgba(4, 69, 77, 0.08);
}

/* Tabla base */

.vh-profesionales-clean__table,
.vh-profesionales-clean table.MsoTableGrid {
  width: 100% !important;
  min-width: 720px !important;
  max-width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--vh-border) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: var(--vh-white) !important;
  font-family: var(--vival-font-base, "Ruda", sans-serif) !important;
}

/* Limpieza de estilos heredados de Word */

.vh-profesionales-clean *,
.vh-profesionales-clean p,
.vh-profesionales-clean span,
.vh-profesionales-clean td {
  font-family: var(--vival-font-base, "Ruda", sans-serif) !important;
}

.vh-profesionales-clean p {
  margin: 0 !important;
  line-height: 1.35 !important;
}

.vh-profesionales-clean span {
  color: inherit !important;
  line-height: inherit !important;
}

.vh-profesionales-clean td {
  height: auto !important;
  vertical-align: middle !important;
  border: 0 !important;
  border-right: 1px solid var(--vh-border) !important;
  border-bottom: 1px solid var(--vh-border) !important;
  padding: 12px 16px !important;
  background: var(--vh-row) !important;
  color: var(--vh-dark) !important;
  font-size: clamp(14px, 1vw, 16px) !important;
  line-height: 1.35 !important;
}

/* Quita borde derecho en última columna */

.vh-profesionales-clean td:last-child {
  border-right: 0 !important;
}

/* Quita borde inferior en última fila */

.vh-profesionales-clean tr:last-child td {
  border-bottom: 0 !important;
}

/* Encabezado principal: N°, Nombre, Especialidad */

.vh-profesionales-clean tr:first-child td {
  background: var(--vh-dark) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  padding: 15px 16px !important;
  text-align: center !important;
}

.vh-profesionales-clean tr:first-child p,
.vh-profesionales-clean tr:first-child span {
  color: #ffffff !important;
  font-size: clamp(13px, 1vw, 15px) !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

/* Filas de categoría: Broncopulmonar, Cardiología, etc. */

.vh-profesionales-clean td[colspan="3"],
.vh-profesionales-clean td[colspan='3'] {
  background: var(--vh-light) !important;
  color: var(--vh-dark) !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(14, 76, 99, 0.18) !important;
  padding: 13px 18px !important;
  text-align: center !important;
}

.vh-profesionales-clean td[colspan="3"] p,
.vh-profesionales-clean td[colspan="3"] span,
.vh-profesionales-clean td[colspan='3'] p,
.vh-profesionales-clean td[colspan='3'] span {
  color: var(--vh-dark) !important;
  font-size: clamp(15px, 1.08vw, 18px) !important;
  line-height: 1.24 !important;
  font-weight: 800 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

/* Columna N° */

.vh-profesionales-clean tr:not(:first-child) td:first-child:not([colspan]) {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  background: var(--vh-number-bg) !important;
  color: var(--vh-mid) !important;
  text-align: center !important;
  font-weight: 800 !important;
}

.vh-profesionales-clean tr:not(:first-child) td:first-child:not([colspan]) p,
.vh-profesionales-clean tr:not(:first-child) td:first-child:not([colspan]) span {
  color: var(--vh-mid) !important;
  font-weight: 800 !important;
  text-align: center !important;
}

/* Columna nombre */

.vh-profesionales-clean tr:not(:first-child) td:nth-child(2) {
  color: var(--vh-dark) !important;
  text-align: left !important;
  font-weight: 700 !important;
}

.vh-profesionales-clean tr:not(:first-child) td:nth-child(2) p,
.vh-profesionales-clean tr:not(:first-child) td:nth-child(2) span {
  color: var(--vh-dark) !important;
  text-align: left !important;
  font-weight: 700 !important;
}

/* Columna especialidad */

.vh-profesionales-clean tr:not(:first-child) td:nth-child(3) {
  color: var(--vh-mid) !important;
  text-align: center !important;
  font-weight: 500 !important;
}

.vh-profesionales-clean tr:not(:first-child) td:nth-child(3) p,
.vh-profesionales-clean tr:not(:first-child) td:nth-child(3) span {
  color: var(--vh-mid) !important;
  text-align: center !important;
  font-weight: 500 !important;
}

/* Alternancia suave de filas.
   Se aplica a todas las filas, pero las categorías se corrigen arriba con mayor especificidad. */

.vh-profesionales-clean tr:nth-child(odd) td:not([colspan]) {
  background: var(--vh-row-soft) !important;
}

.vh-profesionales-clean tr:nth-child(even) td:not([colspan]) {
  background: var(--vh-row) !important;
}

/* Mantiene siempre diferenciada la columna N° */

.vh-profesionales-clean tr:not(:first-child) td:first-child:not([colspan]) {
  background: var(--vh-number-bg) !important;
}

/* Hover */

.vh-profesionales-clean tr:hover td:not([colspan]) {
  background: rgba(218, 237, 236, 0.36) !important;
}

.vh-profesionales-clean tr:hover td:first-child:not([colspan]) {
  background: rgba(0, 119, 137, 0.14) !important;
}

/* Limpieza de colores residuales de Word */

.vh-profesionales-clean span[style*="color:red"],
.vh-profesionales-clean span[style*="color: red"],
.vh-profesionales-clean span[style*="color:black"],
.vh-profesionales-clean span[style*="color: black"],
.vh-profesionales-clean span[style*="color:white"],
.vh-profesionales-clean span[style*="color: white"] {
  color: inherit !important;
}

/* Evita párrafos vacíos demasiado altos */

.vh-profesionales-clean p:empty,
.vh-profesionales-clean span:empty {
  display: none !important;
}

/* Enlaces futuros */

.vh-profesionales-clean a {
  color: var(--vh-dark) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.vh-profesionales-clean a:hover,
.vh-profesionales-clean a:focus {
  color: var(--vh-mid) !important;
  text-decoration: underline !important;
}

/* Responsive tablet */

@media (max-width: 991px) {
  .vh-profesionales-clean {
    padding: 36px 16px 56px;
  }

  .vh-profesionales-clean__wrap {
    border-radius: 22px;
  }

  .vh-profesionales-clean__table,
  .vh-profesionales-clean table.MsoTableGrid {
    border-radius: 22px !important;
  }

  .vh-profesionales-clean td {
    padding: 11px 14px !important;
  }
}

/* Responsive móvil */

@media (max-width: 768px) {
  .vh-profesionales-clean {
    padding: 30px 10px 50px;
  }

  .vh-profesionales-clean__wrap {
    border-radius: 18px;
  }

  .vh-profesionales-clean__table,
  .vh-profesionales-clean table.MsoTableGrid {
    min-width: 720px !important;
    border-radius: 18px !important;
  }

  .vh-profesionales-clean td {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  .vh-profesionales-clean tr:first-child p,
  .vh-profesionales-clean tr:first-child span {
    font-size: 12px !important;
  }

  .vh-profesionales-clean td[colspan="3"] p,
  .vh-profesionales-clean td[colspan="3"] span,
  .vh-profesionales-clean td[colspan='3'] p,
  .vh-profesionales-clean td[colspan='3'] span {
    font-size: 14px !important;
  }
}

/* Móvil pequeño */

@media (max-width: 480px) {
  .vh-profesionales-clean {
    padding-left: 6px;
    padding-right: 6px;
  }

  .vh-profesionales-clean__table,
  .vh-profesionales-clean table.MsoTableGrid {
    min-width: 700px !important;
  }
}/* =========================================================
   Vival Salud · Corrección tabla profesionales
   Encabezado centrado + categorías en fondo claro
   ========================================================= */

/* Encabezado real de la tabla: N°, Nombre, Especialidad */
.vh-profesionales-clean thead th {
  background: #0e4c63 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-bottom: 1px solid rgba(14, 76, 99, 0.22) !important;
  padding: 15px 16px !important;

  font-family: var(--vival-font-base, "Ruda", sans-serif) !important;
  font-size: clamp(13px, 1vw, 15px) !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;

  text-align: center !important;
  vertical-align: middle !important;
}

.vh-profesionales-clean thead th:last-child {
  border-right: 0 !important;
}

/* Evita que la primera fila del tbody, Broncopulmonar, herede estilo de encabezado */
.vh-profesionales-clean tbody tr:first-child td,
.vh-profesionales-clean tbody tr:first-child td[colspan="3"] {
  background: #daedec !important;
  color: #0e4c63 !important;
}

/* Todas las filas de categoría: Broncopulmonar, Cardiología, Cirugía, etc. */
.vh-profesionales-clean__category td,
.vh-profesionales-clean tbody tr.vh-profesionales-clean__category td,
.vh-profesionales-clean td[colspan="3"] {
  background: #daedec !important;
  color: #0e4c63 !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(14, 76, 99, 0.18) !important;
  padding: 13px 18px !important;

  font-family: var(--vival-font-base, "Ruda", sans-serif) !important;
  font-size: clamp(15px, 1.08vw, 18px) !important;
  line-height: 1.24 !important;
  font-weight: 800 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;

  text-align: center !important;
  vertical-align: middle !important;
}

/* Asegura color oscuro en el texto interno de categorías */
.vh-profesionales-clean__category td span,
.vh-profesionales-clean__category td p,
.vh-profesionales-clean td[colspan="3"] span,
.vh-profesionales-clean td[colspan="3"] p {
  color: #0e4c63 !important;
  font-weight: 800 !important;
  text-align: center !important;
}

/* Columnas del encabezado con proporción estable */
.vh-profesionales-clean thead th:nth-child(1) {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
}

.vh-profesionales-clean thead th:nth-child(2) {
  width: 42% !important;
}

.vh-profesionales-clean thead th:nth-child(3) {
  width: auto !important;
}

/* Anula cualquier regla antigua que apuntaba a tr:first-child td */
.vh-profesionales-clean tbody tr:first-child td:not([colspan]) {
  background: rgba(218, 237, 236, 0.38) !important;
  color: #007789 !important;
}