/* ============================
   SALUD Y BIENESTAR (styles)
   ============================ */
:root{
  --vsb-primary:#B60000;
  --vsb-link:#EC3449;
  --vsb-text:#E5E7EB;
  --vsb-muted:#9CA3AF;
  --vsb-card:#0F172A;
  --vsb-card2:#111827;
  --vsb-shadow: 0 15px 35px rgba(0,0,0,0.35);
}

/* Sección base (sin fondo aquí) */
#salud-bienestar.vsb{
  position: relative;
  color: var(--vsb-text);
  isolation: isolate;
}

/* ========= Fondo al estilo plantilla ========= */
/*  Usa el wrapper .fullwidth-section.dt-sc-paralax con una clase nueva  */
.fullwidth-section.dt-sc-paralax.paralx-bg-noticias{
  position: relative;
  padding: 80px 0 70px;                 /* respiración del bloque */
  background: url("../images/blog_bg-2.jpg") center center / cover no-repeat;
  background-attachment: fixed;         /* igual que tus otros paralax */
  overflow: hidden;                     /* contiene el ::before */
}

/* Overlay oscuro (como en tus full-pattern/paralax) */
.fullwidth-section.dt-sc-paralax.paralx-bg-noticias::before{
  content: "";
  position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(0,0,0,0.25) 0%,
        rgba(0,0,0,0.45) 30%,
        rgba(0,0,0,0.68) 100%);
  z-index: 0;
  pointer-events: none;
}

/* Asegura que el contenido esté por encima del overlay */
.fullwidth-section.dt-sc-paralax.paralx-bg-noticias > *,
.fullwidth-section.dt-sc-paralax.paralx-bg-noticias .container{
  position: relative;
  z-index: 1;
  background: transparent !important;
}

/* Mobile: desactiva el attachment fixed por compatibilidad */
@media (max-width: 767.98px){
  .fullwidth-section.dt.sc-paralax.paralx-bg-noticias,
  .fullwidth-section.dt-sc-paralax.paralx-bg-noticias{
    background-attachment: scroll;
    padding: 60px 0 62px;
  }
}

/* ========= Tip plantilla que pediste ========= */
.dt-sc-paralax .intro-text.type2{ background:#fff; } /* por si la llegas a usar aquí */

/* ========= Cinta / títulos ========= */
.vsb__ribbon{
  display:inline-block;
  background: var(--vsb-primary);
  color:#fff;
  font-size: 26px; line-height: 1; font-weight: 700; letter-spacing:.3px;
  padding: 12px 28px; border-radius: 4px; position: relative; margin: 0;
}
.vsb__ribbon::after{
  content:"";
  position:absolute; right:-18px; top:0; bottom:0;
  width: 0; height: 0;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  border-left: 18px solid var(--vsb-primary);
}
.vsb__intro{ max-width:820px; }
.vsb__hook{ color:#fff; font-size:22px; font-weight:700; margin:18px 0 6px; }
.vsb__lead{ color:var(--vsb-muted); font-size:16px; margin:0 0 28px; }
.vsb__tags span{ color:#fff; opacity:.9; }

/* ========= Carrusel ========= */
.vsb__carousel{ position: relative; margin-top:10px; }
.vsb__track{
  display:flex; gap:26px;
  overflow:auto; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:8px 4px 20px;
}
.vsb__track::-webkit-scrollbar{ display:none; }

/* Tarjeta */
.vsb__card{
  min-width: calc(33.333% - 18px);
  background: linear-gradient(180deg, var(--vsb-card) 0%, var(--vsb-card2) 100%);
  border-radius:16px;
  box-shadow: var(--vsb-shadow);
  overflow:hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}
.vsb__card:hover{ transform: translateY(-4px); box-shadow: 0 25px 55px rgba(0,0,0,0.45); }

/* Media + fecha */
.vsb__media{ position:relative; overflow:hidden; }
.vsb__media img{ width:100%; height:260px; object-fit:cover; display:block; }

.vsb__date{
  position:absolute; left:18px; top:14px;
  width:64px; height:78px; border-radius:10px;
  background: var(--vsb-primary);
  color:#fff; text-align:center; font-weight:800;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transform: translateY(-110%); opacity:0;
  transition: transform .35s ease, opacity .35s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}
.vsb__date-day{ font-size:26px; line-height:1; }
.vsb__date-mon{ font-size:12px; letter-spacing:.6px; margin-top:3px; }
.vsb__card:hover .vsb__date{ transform: translateY(0); opacity:1; }

/* En móvil la fecha siempre visible */
@media (max-width: 767.98px){
  .vsb__date{ transform: translateY(0)!important; opacity:1!important; }
}

/* Contenido */
.vsb__content{ padding:18px 18px 22px; }
.vsb__title{ color:#fff; margin:4px 0 10px; font-weight:800; font-size:20px; line-height:1.25; }
.vsb__text{
  color:var(--vsb-muted); margin:0 0 14px;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden;

}
.vsb__more{ color:var(--vsb-link); font-weight:700; text-decoration:none; }
.vsb__more:hover{ text-decoration:underline; }

/* Flechas */
.vsb__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:10px;
  border:1px solid rgba(255,255,255,0.35);
  color:#fff; background:rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
  transition: background .25s ease, transform .25s ease, opacity .25s ease;
  z-index:3; text-decoration:none; font-size:28px; line-height:1;
}
.vsb__nav--prev{ left:-50px; }
.vsb__nav--next{ right:-50px; }
.vsb__nav:hover{ background:rgba(255,255,255,0.18); transform:translateY(-50%) scale(1.04); }
@media (max-width:1199.98px){
  .vsb__nav--prev{ left:6px; } .vsb__nav--next{ right:6px; }
}

/* Barra de progreso */
.vsb__progress{
  position:relative; height:6px; margin:22px auto 0; max-width:360px;
  background:rgba(255,255,255,0.12); border-radius:20px; overflow:hidden;
}
.vsb__progress-bar{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg, var(--vsb-primary) 0%, #EC3449 100%);
}

/* Responsivo */
@media (max-width:991.98px){
  .vsb__card{ min-width: calc(50% - 16px); }
  .vsb__media img{ height:230px; }
}
@media (max-width:575.98px){
  .vsb__card{ min-width:88%; }
  .vsb__media img{ height:210px; }
  .vsb__ribbon{ font-size:22px; padding:10px 20px; }
  .vsb__ribbon::after{ border-top:22px solid transparent; border-bottom:22px solid transparent; }
}

/* ====== Tablet + Mobile polish (≤ 991.98px) ====== */
@media (max-width: 991.98px){
  /* scroll-snap + mejor scroll táctil + gap/padding ajustados */
  .vsb__track{
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    gap: 18px;
    padding: 8px 12px 20px;
  }
  .vsb__card{
    scroll-snap-align: start;
    border-radius: 14px;
    /* tu CSS ya define min-width: calc(50% - 16px) para tablet; se mantiene */
  }

  /* Fecha algo más compacta que desktop */
  .vsb__date{ left:16px; top:12px; width:60px; height:74px; }
  .vsb__date-day{ font-size:24px; }
  .vsb__date-mon{ font-size:11.5px; }

  /* Tipografía y padding del contenido */
  .vsb__content{ padding:16px 16px 20px; }
  .vsb__title{ font-size:19px; }

  /* Barra de progreso un poco más ancha en tablet */
  .vsb__progress{ max-width:480px; }

  /* OPCIÓN A (recomendada): ocultar flechas en tablet/móvil, solo swipe */
  .vsb__nav{ display:none; }
}

/* ====== Mobile fine-tuning (≤ 575.98px) ====== */
@media (max-width: 575.98px){
  .vsb__card{ min-width:88%; }
  .vsb__media img{ height:210px; }

  .vsb__date{ left:14px; top:12px; width:56px; height:70px; }
  .vsb__date-day{ font-size:22px; }
  .vsb__date-mon{ font-size:11px; }

  .vsb__title{ font-size:18px; }
  .vsb__progress{ max-width:420px; }
}

/* ====== (Opcional) Si quieres mantener flechas en tablet/móvil, usa esto en vez de ocultarlas ====== */
/*
@media (max-width: 991.98px){
  .vsb__nav{ display:flex; width:36px; height:36px; font-size:24px; background:rgba(255,255,255,.12); }
  .vsb__nav--prev{ left:6px; } .vsb__nav--next{ right:6px; }
}
@media (max-width: 575.98px){
  .vsb__nav{ width:34px; height:34px; font-size:22px; }
  .vsb__nav--prev{ left:4px; } .vsb__nav--next{ right:4px; }
}
*/



/*  NUEVOS SECCION SALUD Y BIENESTAR - NOTICIAS  04-09-2025  */

/* Fuerza el sidebar a la derecha cuando el primary tiene sidebar derecho */
.page-with-right-sidebar + #secondary-right.secondary-has-right-sidebar {
  float: right !important;
}

/* Asegura que el primary deje hueco para el sidebar */
#primary.page-with-right-sidebar {
  float: left;
  margin-right: 30px;
  width: calc(100% - 350px); /* 320 + 30 de separación */
}

/* Móvil: apilar */
@media (max-width: 991px) {
  #primary.page-with-right-sidebar,
  #secondary-right.secondary-has-right-sidebar {
    float: none !important;
    width: 100%;
    margin: 0;
  }
}

.tpl-blog-holder .entry-thumb img { 
  width: 100%; 
  height: auto; 
  display: block; 
}


/*  EVITAR QUE LAS CAJAS DE NOTICIAS ESTEN PEGADAS 04/09/2025  */


/* === Gutter para la grilla de noticias (columna izquierda) === */
#primary.page-with-right-sidebar .tpl-blog-holder > .dt-sc-one-third.column {
  /* ancho calculado para 3 columnas + márgenes */
  width: 31% !important;          /* sobreescribe el 31.6% del tema */
  margin-left: 3.5% !important;   /* separación horizontal */
  margin-bottom: 36px;            /* separación vertical entre filas */
}

#primary.page-with-right-sidebar .tpl-blog-holder > .dt-sc-one-third.column.first {
  margin-left: 0 !important;      /* la primera de cada fila no lleva margen a la izquierda */
}

/* Móvil / tablet: apilar y quitar márgenes laterales */
@media (max-width: 991px) {
  #primary.page-with-right-sidebar .tpl-blog-holder > .dt-sc-one-third.column {
    width: 100% !important;
    margin-left: 0 !important;
    margin-bottom: 24px;
  }
}

/* Iconito al inicio del título */
.entry-title h4 a{
  display:flex; align-items:center; gap:8px;
}
.entry-title .title-thumb{
  width:24px; height:24px; object-fit:cover;
  border-radius:4px; flex:0 0 24px;
}

/* Asegura imágenes fluidas del grid */
.tpl-blog-holder .entry-thumb img{
  width:100%; height:auto; display:block;
}


/* =======================
   SECCIÓN NOTICIAS — LIMPIO
   ======================= */

/*  BLOQUE PRINCIPAL */

/* ====== BLOQUE 1 - SPOTLIGHT SALUD & BIENESTAR (compacto) ====== */
.vs-spot{ padding: 8px 0 24px; }

/* layout */
.vs-spot-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:18px;
}
@media (max-width: 992px){
  .vs-spot-grid{ grid-template-columns:1fr; }
}

/* --- HERO --- */
.vs-spot-hero{
  position:relative; display:block;
  border-radius:18px; overflow:hidden;
  background:#000;
}
.vs-spot-hero .vs-spot-img{
  width:100%; height:100%; display:block; object-fit:cover;
  aspect-ratio:16/10;          /* 16:9 responsive */
}
.vs-spot-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(0,0,0,0) 15%,
    rgba(0,0,0,.35) 55%,
    rgba(0,0,0,.85) 100%);
}
.vs-spot-badge{
  position:absolute; left:16px; top:16px; z-index:2;
  background:rgba(0,0,0,.65); color:#fff;
  padding:6px 10px; border-radius:20px;
  font-size:12px; font-weight:800; letter-spacing:.02em;
  text-transform:uppercase;
}
.vs-spot-hero .vs-spot-text{
  position:absolute; left:18px; right:18px; bottom:18px; z-index:2;
  color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.vs-spot-title{
  font-weight:900; line-height:1.05; margin:0 0 8px;
  font-size: clamp(26px, 3.3vw, 32px); color: #fff;
}
.vs-spot-desc{ font-size:15px; opacity:.95; margin:0 0 6px; }
.vs-spot-meta{ font-size:12px; opacity:.95; }

/* --- LATERALES --- */
.vs-spot-side{ display:flex; flex-direction:column; gap:14px; }
.vs-spot-card{
  position:relative; display:block;
  border-radius:16px; overflow:hidden; background:#000;

}
.vs-spot-card img{ width:100%; height:150px; object-fit:cover; display:block; }
.vs-spot-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05) 10%, rgba(0,0,0,.70) 100%);
}
.vs-spot-card .vs-spot-text{ position:absolute; left:12px; right:12px; bottom:10px; z-index:2; color:#fff; }
.vs-spot-card .vs-spot-t{ font-weight:800; line-height:1.2; margin:0 0 6px; font-size:16px; }
.vs-spot-card .vs-spot-m{ font-size:12px; opacity:.95; }

/* separador fino para aislar el bloque */
.vs-spot-hr{ height:1px; background:var(--border, #e5e7eb); margin:22px 0; }

/* ====== Paleta de categorías (FIX Estilo de vida) ====== */
.cat-salud           { --cat:#00A7B3; }
.cat-ejercicio       { --cat:#D13143; }
.cat-alimentacion    { --cat:#32B47B; }
.cat-popular         { --cat:#fa6a22; }

/* Nombre correcto con guiones (el que usa tu HTML/PHP) */
.cat-estilo-de-vida  { --cat:#ff7a00; }  /* naranja */

/* Alias opcional por si en algún HTML quedó sin guiones */
.cat-estilovida      { --cat:#ff7a00; }


/* --- HERO: badge coloreado por categoría --- */
.vs-spot-badge{
  background: var(--cat, rgba(0,0,0,.65));   /* usa el color de la cat */
  color:#fff; font-weight:800; text-transform:uppercase;
  letter-spacing:.02em;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}

/* --- LATERALES: categoría con rectángulo a color antes del texto --- */
.vs-spot-cat{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:500; 
  color:#fff; /* se lee bien sobre el overlay */
}
.vs-spot-cat::before{
  content:"";
  width:12px; height:12px; border-radius:4px;   /* rectángulo redondeado */
  background: var(--cat,#999);
  box-shadow:0 1px 2px rgba(0,0,0,.35) inset, 0 0 0 1px rgba(255,255,255,.06);
}

/* (Opcional) Micro-ajuste de espacio entre categoría y fecha en la línea meta */
.vs-spot-m{ display:flex; align-items:center; gap:6px; }

/* Meta del HERO como línea flexible (igual que los laterales) */
.vs-spot-meta{
  display:flex; align-items:center; gap:6px;
  font-size:12px; opacity:.95;
}

/* Píldora de categoría ya la tienes: vs-spot-cat + ::before con --cat */

/* ===== Ajustes solo en móvil ===== */
@media (max-width: 575.98px){

  /* 1) Ocultar el badge superior en el HERO (para que no toque el título) */
  .vs-spot-badge{ display:none; }

  /* 2) HERO más alto en móvil para destacarlo (de 16:9 → 4:3) */
  .vs-spot-hero .vs-spot-img{
    aspect-ratio: 4 / 3;       /* más alto que 16/9 */
    object-fit: cover;
  }

  /* 3) Un poco más de overlay para legibilidad del título */
  .vs-spot-hero::after{
    background:linear-gradient(180deg,
      rgba(0,0,0,0) 25%,
      rgba(0,0,0,.45) 60%,
      rgba(0,0,0,.88) 100%);
  }

  /* 4) Espaciado de textos en el bloque */
  .vs-spot-text{ left:16px; right:16px; bottom:14px; }
  .vs-spot-title{ font-size: clamp(22px, 5.2vw, 26px); margin-bottom:8px; }
  .vs-spot-desc{ font-size:14px; margin-bottom:8px; line-height: 1.5; }

  /* 5) Icono de calendario un pelín más sutil en móvil */
  .vs-spot-date i{ opacity:.85; margin-right:4px; }
}


/* ====== FIN SPOTLIGHT SALUD & BIENESTAR (compacto) ====== */


/* ====== SECCIÓN INTERNA - NOTICIAS SALUD, EJERCICIO, ALIMENTACION, ESTILO DE VIDA   ====== */

.vs-spot-interno { padding: 8px 0 24px; background-color: #fff; }





/* ================== BLOQUE 2 - NOTICIAS POR CATEGORÍAS (ALIMENTACIÓN) ================== */
.vs-catblock{
  padding: 8px 0 24px;
  background:#efefef;
}

/* Título */
.vs-cat-head h2 a{
  font-size:28px; font-weight:700; color:#222; text-decoration:none;
}
.vs-cat-head h2 a:hover{ color:#ec3449; }

/* ----- COLUMNA IZQUIERDA (LISTA) ----- */
.vs-catblock .row.align-items-start{ align-items:stretch !important; } /* misma altura de columnas */
.vs-cat-list{ display:flex; flex-direction:column; gap:16px; min-height:100%; }
.vs-cat-list > .vs-cat-card{ margin:0 !important; }

.vs-cat-card{
  display:grid; grid-template-columns:1fr 136px; gap:14px; align-items:center;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.vs-cat-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.08); }

.vs-cat-title{ font-weight:500; line-height:1.2; margin:0 0 6px; font-size:18px; }
.vs-cat-title a{ color:#111827; text-decoration:none; }
.vs-cat-title a:hover{ text-decoration:underline; }

/* Meta (cat + fecha) — desktop */
.vs-cat-meta{
  display:flex; align-items:center; gap:8px;
  font-size:12px; text-transform:uppercase; color:#4a4949;
}
.vs-cat-meta .cat{
  display:inline-flex; align-items:center; gap:8px; font-weight:500; color:#0f172a;
}
.vs-cat-meta .cat::before{
  content:""; width:12px; height:12px; border-radius:4px;
  background:var(--cat,#999); box-shadow:0 1px 2px rgba(0,0,0,.15) inset;
}

.vs-cat-thumb{ width:136px; height:96px; min-width:120px; border-radius:10px; overflow:hidden; }
.vs-cat-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ----- COLUMNA DERECHA (HERO) ----- */
.vs-cat-hero{
  position:relative; display:flex; flex:1 1 auto; min-height:100%;
  border-radius:14px; overflow:hidden; background:transparent;
}
.vs-cat-hero .img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.vs-cat-hero::after{
  content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.65) 70%, rgba(0,0,0,.92) 100%);
}
.vs-cat-hero .txt{
  position:relative; z-index:2; margin-top:auto;
  left:24px; right:24px; bottom:18px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.6);
}
@media (min-width: 992px){
  .vs-cat-hero .txt{ left:28px; right:28px; bottom:22px; }
}
.vs-cat-hero .meta{ font-size:12px; opacity:.95; margin-bottom:6px; color:rgba(255,255,255,.9); }
.vs-cat-hero .title{
  color:#fff; font-weight:900; line-height:1.1; margin:0;
  text-shadow:0 3px 14px rgba(0,0,0,.8);
  font-size:clamp(22px, 2.4vw, 28px);
  padding-right:40px; /* aire a la derecha */
}

/* --- Chip de categoría: base (oculto en desktop/tablet) --- */
.vs-chip{ display:none; }

/* ================== MOBILE (≤ 575.98px) ================== */
@media (max-width: 575.98px){
  /* HERO: imagen llena el contenedor + overlay inferior */
  .vs-catblock .vs-cat-hero{
    position: relative; display: block; aspect-ratio: 16/9;
    border-radius: 14px; overflow: hidden; background: transparent;
  }
  .vs-catblock .vs-cat-hero .img{
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  }
  .vs-catblock .vs-cat-hero::after{
    content:""; position:absolute; left:0; right:0; bottom:0;
    z-index:1; border-radius:inherit; pointer-events:none;
    background:linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.65) 55%, rgba(0,0,0,0) 100%);
  }
  .vs-catblock .vs-cat-hero .txt{
    position:absolute; left:16px; right:16px; bottom:14px; z-index:2; margin:0;
  }
  .vs-catblock .vs-cat-hero .meta{ display:none; }
  .vs-catblock .vs-cat-hero .title{ font-size:18px; line-height:1.25; padding-right:0; }

  /* Lista: chip arriba, meta oculta y thumbs un poco mayores */
  .vs-cat-meta{ display:none; }                                  /* ocultamos línea meta en móvil */
  .vs-cat-title{ display:flex; flex-direction:column; gap:6px; } /* chip arriba, título abajo */
  .vs-cat-title a{ display:block; font-size:16px; line-height:1.28; font-weight:500; }

  .vs-cat-card{ grid-template-columns:1fr 150px; align-items:stretch; }
  .vs-cat-thumb{ width:150px; height:116px; min-width:150px; }

  /* Chip de categoría (visible sólo en móvil) */
  .vs-catblock .vs-chip{
    display:inline-flex; align-items:center; gap:6px;
    font-size:11px; font-weight:800; text-transform:uppercase;
    padding:3px 8px; border-radius:8px; margin-bottom:6px;
    background:rgba(0,0,0,.06); color:#111827;
  }
  .vs-catblock .vs-chip::before{
    content:""; width:10px; height:10px; border-radius:3px; background:var(--cat,#999);
  }
}

/* ================== ORDEN EN MÓVIL (≤ 767.98px) ================== */
/* Título → Hero → Lista */
@media (max-width: 767.98px){
  .vs-catblock .vs-cat-head{ order:0 !important; }
  .vs-catblock .vs-col-hero{ order:1 !important; }
  .vs-catblock .vs-col-list{ order:2 !important; }
}



/*     TITULOS CATEGORIAS - NOTICIAS */

/* Contenedor del título + CTA */
.vs-head-row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
}

/* Título base (mantiene tu tipografía) */
.vs-head{
  font-weight:800; font-size:28px; line-height:1.1; margin:0;
}
.vs-head a{ color:#222; text-decoration:none; }
.vs-head a:hover{ color:#ec3449; }

/* Variante con barra de color bajo el título */
.vs-head--bar a{
  position:relative; display:inline-block; padding-bottom:6px;
}
.vs-head--bar a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:56px; height:4px; border-radius:2px; 
  background:var(--cat, #fa6a22);
}

/* CTA “Ver todo” a la derecha */
.vs-head-more{
  text-transform:uppercase; font-weight:700; font-size:12px;
  color:#6b7280; text-decoration:none; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:6px;
}
.vs-head-more .chev{ font-size:14px; line-height:1; transform:translateY(-1px); }
.vs-head-more:hover{ color:#111827; }

/* Responsive pequeño */
@media (max-width:575.98px){
  .vs-head{ font-size:22px; }
  .vs-head-more{ font-size:11px; }
}

/* Fondo blanco solo para esta sección */
.vs-catblock--white{ background:#fff; }




/* SECCIÓN LO MAS POPULAR */


/* ===== LO MÁS POPULAR ===== */
.vs-popular{ background:#efefef; padding:8px 0 24px; }

/* Carrusel */
.vs-popular .popular{ position:relative; }

/* OJO: aquí NO ponemos border-radius, así no recorta las cards */
.vs-popular .popular-viewport{ overflow:hidden; }

.vs-popular .popular-track{
  --pop-gap:18px;
  display:flex;
  gap:var(--pop-gap);
  will-change:transform;
}

/* Cards */
.vs-popular .popular-card{
  flex:0 0 calc((100% - var(--pop-gap)*2)/3);   /* 3 por vista */
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:#fff;                              /* evita franja negra durante carga */
}
@media (max-width:991.98px){
  .vs-popular .popular-card{ flex-basis:calc((100% - var(--pop-gap))/2); } /* 2 por vista */
}
@media (max-width:575.98px){
  .vs-popular .popular-card{ flex-basis:100%; }                             /* 1 por vista */
}

/* El alto de la card lo da el aspect-ratio */
.vs-popular .popular-card a{
  position:relative; display:block; aspect-ratio:4/3;
  color:#fff; text-decoration:none;
}

/* Imagen siempre cubre todo */
.vs-popular .popular-card img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Overlay inferior para legibilidad */
.vs-popular .popular-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.55) 55%,
    rgba(0,0,0,0) 100%);
}

/* Textos */
.vs-popular .pop-meta{
  position:absolute; left:14px; bottom:72px; z-index:2;
  font-size:12px; opacity:.9;
}
.vs-popular .pop-title{
  position:absolute; left:14px; right:14px; bottom:16px; z-index:2;
  font-weight:900; line-height:1.15; font-size:20px;
  text-shadow:0 3px 12px rgba(0,0,0,.7);
}

/* Botones del carrusel (solo esta sección) */
.vs-popular-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:12px;
  border:1px solid rgba(17,17,17,.12);
  background:rgba(255,255,255,.96);
  color:#111; font-size:26px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  backdrop-filter: blur(4px);
  z-index:3; cursor:pointer;
  transition: background .25s, transform .25s, box-shadow .25s;
}

/* Más afuera para no pisar la fecha */
.vs-popular-nav--prev{ left:-32px; }
.vs-popular-nav--next{ right:-32px; }

.vs-popular-nav:hover{
  background:#fff; transform:translateY(-50%) scale(1.05);
  box-shadow:0 12px 28px rgba(0,0,0,.20);
}
.vs-popular-nav:disabled{ opacity:.4; cursor:not-allowed; }

/* En pantallas más estrechas, mételas un poco para que no “corten” la UI */
@media (max-width: 1199.98px){
  .vs-popular-nav--prev{ left:6px; }
  .vs-popular-nav--next{ right:6px; }
}

/* Pista del carrusel (ul) — quita margen/padding por defecto */
.popular-track{
  list-style: none;
  margin: 0;           /* ← elimina la franja superior */
  padding: 0;
}

/* Altura de las tarjetas del carrusel (por defecto más alta) */
.vs-popular{ --pop-card-ratio: 4/3; }       /* antes 16/9 → ahora ~1.6 => más alto */
.popular-card a::before{ aspect-ratio: var(--pop-card-ratio); }

/* Puedes darles aún más altura en tablet/móvil si quieres */
@media (max-width: 991.98px){
  .vs-popular{ --pop-card-ratio: 3/2; }       /* 1.5 → más altas en tablet */
}
@media (max-width: 575.98px){
  .vs-popular{ --pop-card-ratio: 4/3; }       /* 1.333 → aún más altas en móvil */
}



/*  ZOOM AL PASAR POR LAS IMAGENES */


/* Lo más popular: efecto zoom en hover/focus */
.vs-popular .popular-card a{ position:relative; overflow:hidden; }

.vs-popular .popular-card img{
  transition: transform .55s cubic-bezier(.2,.6,.2,1);
  will-change: transform;
}

/* zoom al pasar el mouse o navegar con teclado */
.vs-popular .popular-card:hover img,
.vs-popular .popular-card:focus-within img{
  transform: scale(1.06);   /* ajusta a 1.04–1.1 según gusto */
}

/* respetar usuarios con reducción de animaciones */
@media (prefers-reduced-motion: reduce){
  .vs-popular .popular-card img{ transition:none; }
  .vs-popular .popular-card:hover img,
  .vs-popular .popular-card:focus-within img{ transform:none; }
}

/* === Micro-zoom en HERO (derecha) === */
.vs-catblock .vs-cat-hero{
  overflow: hidden; /* por si algun layout no lo tuviera */
}
.vs-catblock .vs-cat-hero .img{
  transition: transform .55s cubic-bezier(.2,.6,.2,1);
  will-change: transform;
  transform-origin: center center;
}
.vs-catblock .vs-cat-hero:hover .img,
.vs-catblock .vs-cat-hero:focus-visible .img{
  transform: scale(1.06); /* 1.04–1.08 segun gusto */
}

/* === Micro-zoom en las 3 tarjetas (miniaturas) === */
.vs-catblock .vs-cat-thumb{
  overflow: hidden;       /* recorta el zoom */
}
.vs-catblock .vs-cat-thumb img{
  transition: transform .55s cubic-bezier(.2,.6,.2,1);
  will-change: transform;
  transform-origin: center center;
}
/* dispara al pasar por la card o navegando con teclado */
.vs-catblock .vs-cat-card:hover .vs-cat-thumb img,
.vs-catblock .vs-cat-card:focus-within .vs-cat-thumb img{
  transform: scale(1.06);
}

/* Respeta usuarios con reducción de animaciones */
@media (prefers-reduced-motion: reduce){
  .vs-catblock .vs-cat-hero .img,
  .vs-catblock .vs-cat-thumb img{ transition: none; }
  .vs-catblock .vs-cat-hero:hover .img,
  .vs-catblock .vs-cat-card:hover .vs-cat-thumb img{ transform: none; }
}

/* ===== Breadcrumb (oscuro por defecto) ===== */
.vs-bc{
  display:flex; align-items:center; gap:10px;
  margin:8px 0 18px;
  font-size:12px; text-transform:uppercase; letter-spacing:.02em;
  color:rgba(255,255,255,.78);
}
.vs-bc a{ color:#fff; text-decoration:none; }
.vs-bc a:hover{ text-decoration:underline; }

/* Botón "← Inicio" */
.vs-bc-back{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:8px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#fff; font-weight:700; line-height:1;
  box-shadow:0 1px 0 rgba(0,0,0,.08) inset;
  transition:background .2s, transform .2s;
}
.vs-bc-back:hover{ background:rgba(255,255,255,.14); transform:translateY(-1px); }

/* Separadores */
.vs-bc-sep{ opacity:.45; }
.vs-bc-dot{ opacity:.55; }

/* Texto “30 noticias” más sutil */
.vs-bc-count{ opacity:.75; }

/* Responsive: menos ruido en pantallas pequeñas */
/* oculta el total en móvil */
@media (max-width: 575.98px){
  .vs-bc{ font-size:11px; gap:8px; }
  .vs-bc-count{ display:none; }            
}



/* ===== Variante clara (si algún día la necesitas) =====
   Añade .vs-bc--light a <nav class="vs-bc vs-bc--light"> */
.vs-bc.vs-bc--light{
  color:#4b5563;      /* gris 700 */
}
.vs-bc.vs-bc--light a{ color:#111827; }
.vs-bc.vs-bc--light .vs-bc-back{
  background:#f3f4f6; border-color:#e5e7eb; color:#111827;
}
.vs-bc.vs-bc--light .vs-bc-back:hover{ background:#e5e7eb; }
.vs-bc.vs-bc--light .vs-bc-sep,
.vs-bc.vs-bc--light .vs-bc-dot{ color:#9ca3af; }


/* NOTICIAS DESGLOSE */

/* ===== LISTADO INTERNO — TARJETAS (foto izq / texto der) ===== */
.vs-news-list{ padding: 8px 0 24px; background:#efefef; }
.vs-news-item{
  display:grid; grid-template-columns: 350px 1fr; gap:16px;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  padding:12px; margin-bottom:14px; box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.vs-news-item:hover{ box-shadow:0 6px 18px rgba(0,0,0,.08); }

.vs-news-media{ display:block; border-radius:8px; overflow:hidden; }
.vs-news-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.ratio-16x9{ position:relative; padding-top:56.25%; }
.ratio-16x9 > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.vs-news-content{ display:flex; flex-direction:column; justify-content:center; gap:6px; }
.vs-news-date{ font-size:12px; text-transform:uppercase; color:#6b7280; }
.vs-news-title{ margin:0; font-weight:800; font-size:20px; line-height:1.25; color:#111827; }
.vs-news-title a{ color:inherit; text-decoration:none; }
.vs-news-title a:hover{ color:#ec3449; }
.vs-news-excerpt{ margin:0; color:#4b5563; font-size:15px; }

.vs-news-pager{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px;
  color:#6b7280; font-size:13px;
}

/* Responsive */
@media (max-width: 991.98px){
  .vs-news-item{ grid-template-columns: 300px 1fr; }
}
@media (max-width: 575.98px){
  .vs-news-item{ grid-template-columns: 1fr; }
  .vs-news-media .ratio-16x9{ padding-top:56.25%; } /* imagen arriba */
  .vs-news-title{ font-size:18px; }
}

/* === Micro-zoom en las tarjetas del listado interno (foto izq / texto der) === */
.vs-news-media{
  overflow: hidden;                 /* recorta el zoom (ya lo tienes, lo reafirmo) */
  border-radius: 8px;               /* asegura el borde redondeado en el recorte */
}
.vs-news-media img{
  transition: transform .55s cubic-bezier(.2,.6,.2,1);
  will-change: transform;
  transform-origin: center center;
}

/* Dispara el zoom al pasar el mouse por la card o al enfocarla con teclado */
.vs-news-item:hover .vs-news-media img,
.vs-news-item:focus-within .vs-news-media img{
  transform: scale(1.06);           /* 1.04–1.08 según gusto */
}

/* Respeta usuarios con reducción de animaciones */
@media (prefers-reduced-motion: reduce){
  .vs-news-media img{ transition: none; }
  .vs-news-item:hover .vs-news-media img,
  .vs-news-item:focus-within .vs-news-media img{ transform: none; }
}

/* === Micro-zoom — Spotlight interno (HERO + laterales) === */
.vs-spot-hero,
.vs-spot-card{ overflow:hidden; } /* recorta el zoom (por si algún layout no lo tuviera) */

.vs-spot-hero .vs-spot-img,
.vs-spot-card > img{
  transition: transform .55s cubic-bezier(.2,.6,.2,1);
  will-change: transform;
  transform-origin: center center;
}

/* hover y navegación por teclado */
.vs-spot-hero:hover .vs-spot-img,
.vs-spot-hero:focus-visible .vs-spot-img,
.vs-spot-card:hover > img,
.vs-spot-card:focus-visible > img{
  transform: scale(1.06); /* 1.04–1.08 según gusto */
}

/* Respeta preferencia de reducir animaciones */
@media (prefers-reduced-motion: reduce){
  .vs-spot-hero .vs-spot-img,
  .vs-spot-card > img{ transition:none; }
  .vs-spot-hero:hover .vs-spot-img,
  .vs-spot-card:hover > img{ transform:none; }
}

/* ====== VISTA ARTÍCULO — SALUD ====== */

/* --------- Wrapper de artículo --------- */
.vs-article{ background:#fff; }
.vs-article .vs-article-wrap{ padding:24px 0; }

/* --------- Título --------- */
.vs-article .vs-head{
  margin:6px 0 14px;
  color:#111827;
  font-weight:800;
  font-size: clamp(22px, 3.6vw, 32px);
  line-height: 1.15;
}

/* --------- Meta (debajo del título) --------- */
.vs-article-meta{
  margin:0 0 12px;
  font-size:14px;
  color:#6b7280;
}
.vs-article-meta .vs-cat-meta{ display:flex; align-items:center; gap:10px; }
.vs-article-meta .vs-cat-meta .cat{ text-transform:uppercase; }

/* --------- Imagen HERO (encabezado) --------- */
.vs-article-hero{
  border-radius:14px;
  overflow:hidden;
  border:1px solid #e5e7eb;
  margin-bottom:18px;
}
.vs-article-hero .ratio-16x9{ position:relative; padding-top:56.25%; }
.vs-article-hero .ratio-16x9 > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform .55s cubic-bezier(.2,.6,.2,1);
  will-change: transform;
}
/* Micro-zoom hero */
.vs-article-hero:hover .ratio-16x9 > img,
.vs-article-hero:focus-within .ratio-16x9 > img{ transform: scale(1.04); }
@media (prefers-reduced-motion: reduce){
  .vs-article-hero .ratio-16x9 > img{ transition:none; }
  .vs-article-hero:hover .ratio-16x9 > img{ transform:none; }
}

/* --------- Cuerpo de artículo --------- */
.vs-article-content{
  color:#111827;
  font-size:16px;
  line-height:1.5;
}
.vs-article-content h2{
  margin:18px 0 10px;
  /* Nota: orden correcto de clamp (min, fluid, max) */
  font-size: clamp(22px, 2.8vw, 28px);
  line-height:1.3;
  color:#111827;
  font-weight:600;
}
.vs-article-content p{ margin:0 0 12px; }
.vs-article-content ul{ margin:0 0 14px 1.1rem; }
.vs-article-content li{ margin:6px 0; }

/* --------- Figuras dentro del artículo --------- */
/* Base visual de la tarjeta figure */
.vs-figure{
  border:1px solid #e5e7eb;
  border-radius:14px;
  overflow:hidden;
  margin:16px auto;             /* centrado por defecto */
  background:#fff;
}
/* Limita el ancho de figuras del cuerpo (no del hero) */
.vs-article .vs-figure{
  max-width: 780px;             /* ajustable: 760/820/900/1040 */
  width: 100%;
  margin:16px 0;         /* ← sin auto: queda a la izquierda */
}

/* Imágenes: soporta figure con y sin .ratio-16x9 */
.vs-figure img{
  display:block;
  width:100%;
  height:auto;
}
.vs-figure .ratio-16x9{ position:relative; padding-top:56.25%; }
.vs-figure .ratio-16x9 > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}

/* Figcaption */
.vs-figcaption{
  font-size:12px;
  color:#6b7280;
  padding:6px 10px;
  background:#fafafa;
}

/* Utilidades de ancho (opcionales por figura) */
.vs-figure--narrow{ max-width:620px; }
.vs-figure--wide{   max-width:1040px; }
.vs-figure--full{   max-width:none; } /* ocupa 100% del contenedor */

/* --------- Responsive fino --------- */
@media (max-width: 991.98px){
  .vs-article .vs-figure,
  .vs-figure--narrow,
  .vs-figure--wide{
    max-width:100%;
    margin-left:0;
    margin-right:0;
  }
}

@media (max-width: 575.98px){
  .vs-article .vs-article-wrap{ padding:18px 0; }
  .vs-article-content{ font-size:15.5px; }
  .vs-article-hero{ border-radius:12px; }
  .vs-figure{ border-radius:10px; }
}

/* ====== HERO más alto en móvil ====== */
@media (max-width: 575.98px){
  .vs-spot-hero .vs-spot-img{
    aspect-ratio: 3 / 4;   /* mucho más alto que 16/9 */
    object-fit: cover;
  }

  /* un poco más de espacio para los textos */
  .vs-spot-text{ 
    left:16px; 
    right:16px; 
    bottom:18px; 
  }

  /* opcional: overlay más fuerte para legibilidad */
  .vs-spot-hero::after{
    background:linear-gradient(180deg,
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,.55) 60%,
      rgba(0,0,0,.9) 100%);
  }
}
/* Solo móvil */
@media (max-width: 575.98px){
  .vs-article-content .styled-toggle{
    display:inline-block;
    margin:8px 0 2px;
    padding:0;
    background:transparent;
    border:0;
    color:#EC3449;          /* color de enlaces del sitio */
    font-weight:700;
    font-size:14px;
    text-decoration:none;
    cursor:pointer;
  }
  .vs-article-content .styled-toggle:hover{ text-decoration:underline; }

  /* Bloques visible/oculto */
  .vs-art-visible p{ margin-bottom:12px; }
  .vs-art-hidden{ display:none; }
}