@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;500;600;700&display=swap');



:root {

  /* Tokens de Color */

  --carbon: #282828;     /* texto principal y footer */

  --morado: #4A3570;     /* acento primario */

  --teal: #6B8E7F;       /* acento secundario (salvia) */

  --ambar: #C9A961;      /* dorado / brillos */

  --crema: #F5EDE0;

  --paper: #FBF7EF;      /* fondo de página */

  --durazno: #F0D8C8;

  --lavanda: #E8DCF0;

  --line: #E4D9C7;       /* bordes finos */

  --ink-soft: #5B554C;   /* texto secundario */

  --gris: #808080;



  /* Medidas y Bordes */

  --r: 18px;             /* radio de tarjetas */

  --maxw: 1200px;        /* ancho máximo de contenido */

  --shadow: 0 18px 44px -22px rgba(74, 53, 112, 0.30);

  --shadow-sm: 0 8px 22px -16px rgba(40, 40, 40, 0.45);

}



/* ── Base resets ────────────────────────────────────── */

* {

  box-sizing: border-box;

}



html, body {

  margin: 0;

  padding: 0;

  scroll-behavior: smooth;

}



body {

  background: var(--paper) !important;

  color: var(--carbon);

  font-family: 'El Messiri', system-ui, sans-serif;

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

}



a {

  color: inherit;

  text-decoration: none;

}



/* ── Enforce Background Aesthetic Consistency Over Tailwind ── */

body, body.bg-white, body.bg-white\/90, section.bg-white, main.bg-white, #inicio .bg-white, #content-scroll-container, .vb-hero {

  background-color: var(--paper) !important;

}



.bg-gray-50 {

  background-color: var(--crema) !important;

}



/* Ensure crisp contrast for cards and components */

.vb-card, .vb-feat, .vb-hl, .vb-search, .vb-accordion-content-inner, .vb-nav-mobile, .bg-white.vb-card {

  background-color: #ffffff !important;

}



/* ── Contenedores ───────────────────────────────────── */

.vb-container {

  max-width: var(--maxw);

  margin: 0 auto;

  padding: 0 28px;

}



@media (max-width: 600px) {

  .vb-container {

    padding: 0 22px;

  }

}



/* Ritmo vertical entre secciones */

.vb-section {

  padding: 60px 0;

}



@media (max-width: 600px) {

  .vb-section {

    padding: 40px 0;

  }

}



/* ── Tipografía ─────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {

  font-family: 'El Messiri', system-ui, sans-serif;

  margin: 0;

}



.vb-hero-title {

  font-size: clamp(38px, 5.6vw, 68px);

  font-weight: 700;

  line-height: 1.04;

  letter-spacing: -0.03em;

}



.vb-hero-title em {

  font-style: normal;

  color: var(--morado);

}



.vb-section-title {

  font-size: 25px;

  font-weight: 700;

  letter-spacing: -0.02em;

  color: var(--carbon);

}



.vb-card-title {

  font-size: 18px;

  font-weight: 700;

  color: var(--carbon);

}



.vb-body-text {

  font-size: clamp(15px, 2.5vw, 18px);

  line-height: 1.5;

  color: var(--ink-soft);

}



.vb-eyebrow {

  font-size: 12px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.18em;

  color: var(--teal);

}



/* ── Navbar ─────────────────────────────────────────── */

.vb-nav, nav.vb-nav {

  position: sticky;

  top: 0;

  z-index: 50;

  background: rgba(251, 247, 239, 0.86) !important;

  backdrop-filter: blur(12px);

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

  border-bottom: 1px solid var(--line);

}



.vb-nav-inner {

  max-width: var(--maxw);

  margin: 0 auto;

  padding: 16px 28px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 28px;

}



.vb-logo {

  display: flex;

  align-items: center;

  flex: 0 0 auto;

}



/* Logo Bicolor */

.vb-logo-svg .cls-2 {

  fill: #8b7ab8; /* morado */

}



.vb-logo-svg .cls-1 {

  fill: #7a9577; /* verde */

}



.vb-nav-links {

  display: flex;

  gap: 26px;

  align-items: center;

}



.vb-nav-links a {

  font-size: 14px;

  font-weight: 600;

  color: var(--ink-soft);

  padding: 6px 0;

  position: relative;

  transition: color 0.18s;

}



.vb-nav-links a:hover {

  color: var(--carbon);

}



.vb-nav-links a.is-active {

  color: var(--morado);

}



.vb-nav-links a.is-active::after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: -2px;

  height: 2px;

  background: var(--morado);

  border-radius: 2px;

}



.vb-burger {

  display: none;

  background: none;

  border: 0;

  cursor: pointer;

  flex-direction: column;

  gap: 5px;

  padding: 6px;

}



.vb-burger span {

  width: 22px;

  height: 2px;

  background: var(--carbon);

  border-radius: 2px;

}



.vb-nav-mobile, nav.vb-nav-mobile {

  display: none;

  flex-direction: column;

  padding: 8px 28px 16px;

  gap: 4px;

  border-top: 1px solid var(--line);

  background: rgba(251, 247, 239, 0.95) !important;

  backdrop-filter: blur(12px);

}



@media (max-width: 980px) {

  .vb-nav-mobile:not(.hidden), nav.vb-nav-mobile:not(.hidden) {

    display: flex;

  }

}



.vb-nav-mobile a {

  padding: 10px 0;

  font-weight: 600;

  color: var(--ink-soft);

  border-bottom: 1px solid rgba(228, 217, 199, 0.4);

}



.vb-nav-mobile a:last-child {

  border-bottom: none;

}



.vb-nav-mobile a.is-active {

  color: var(--morado);

}



/* Selector de Idiomas en Navbar */

.vb-lang-switch {

  display: flex;

  align-items: center;

  gap: 10px;

  border-l: 1px solid var(--line);

  padding-left: 14px;

}



.vb-lang-flag {

  height: 18px;

  width: 18px;

  border-radius: 50%;

  object-fit: cover;

  transition: transform 0.2s;

}



.vb-lang-flag:hover {

  transform: scale(1.1);

}



@media (max-width: 980px) {

  .vb-nav-links {

    display: none;

  }

  .vb-burger {

    display: flex;

  }

}



/* ── Hero Headers ───────────────────────────────────── */

.vb-hero {

  position: relative;

  overflow: hidden;

  background:

    radial-gradient(120% 90% at 82% -10%, rgba(232, 220, 240, 0.95) 0%, rgba(232, 220, 240, 0) 55%),

    radial-gradient(120% 90% at 8% 120%, rgba(240, 216, 200, 0.85) 0%, rgba(240, 216, 200, 0) 55%),

    var(--paper) !important;

  border-bottom: 1px solid var(--line);

}



.vb-hero::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background: radial-gradient(40% 60% at 50% 40%, rgba(201, 169, 97, 0.10), transparent 70%);

}



.vb-hero-inner {

  max-width: var(--maxw);

  margin: 0 auto;

  padding: 84px 28px 72px;

  position: relative;

  z-index: 1;

}



.vb-hero-sub {

  font-size: 18px;

  line-height: 1.55;

  color: var(--ink-soft);

  max-width: 58ch;

  margin: 22px 0 0;

}



@media (max-width: 600px) {

  .vb-hero-inner {

    padding: 56px 22px 48px;

  }

}



/* ── Botones y Píldoras ─────────────────────────────── */

.vb-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 10px 24px;

  font-weight: 700;

  font-size: 14px;

  border-radius: 999px;

  transition: all 0.2s;

  cursor: pointer;

  border: 1px solid transparent;

  text-align: center;

}



.vb-btn-primary {

  background: var(--carbon);

  color: #fff;

}



.vb-btn-primary:hover {

  background: var(--morado);

  transform: translateY(-1px);

}



.vb-btn-secondary {

  background: transparent;

  border: 1px solid var(--line);

  color: var(--ink-soft);

}



.vb-btn-secondary:hover {

  border-color: var(--teal);

  color: var(--carbon);

}



.vb-btn-accent {

  background: var(--morado);

  color: #fff;

}



.vb-btn-accent:hover {

  background: var(--carbon);

  transform: translateY(-1px);

}



/* ── Grid de Contenido ──────────────────────────────── */

.vb-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 26px;

}



.density-compacto .vb-grid {

  grid-template-columns: repeat(4, 1fr);

  gap: 18px;

}



@media (max-width: 980px) {

  .vb-grid, .density-compacto .vb-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 600px) {

  .vb-grid, .density-compacto .vb-grid {

    grid-template-columns: 1fr;

  }

}



/* ── Tarjetas (Cards) Premium ────────────────────────── */

.vb-card {

  display: flex;

  flex-direction: column;

  border: 1px solid var(--line);

  border-radius: var(--r);

  overflow: hidden;

  box-shadow: var(--shadow-sm);

  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;

}



.vb-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow);

  border-color: #d9cbb4;

}



.vb-card-body {

  padding: 20px 20px 22px;

  display: flex;

  flex-direction: column;

  gap: 9px;

  flex: 1;

}



.density-compacto .vb-card-body {

  padding: 16px 16px 18px;

}



.vb-card-excerpt {

  font-size: 14px;

  line-height: 1.5;

  color: var(--ink-soft);

  margin: 0;

  flex: 1;

}



.density-compacto .vb-card-excerpt {

  font-size: 13px;

}



.vb-card-cta {

  font-size: 12.5px;

  font-weight: 700;

  letter-spacing: 0.04em;

  margin-top: 4px;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  transition: color 0.2s;

}



.vb-arrow {

  transition: transform 0.2s;

}



.vb-card:hover .vb-arrow, .vb-feat:hover .vb-arrow, .vb-hl:hover .vb-arrow {

  transform: translateX(4px);

}



/* Portada de Tarjeta */

.vb-cover {

  position: relative;

  aspect-ratio: 16/10;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

}



.vb-cover-glow {

  position: absolute;

  width: 70%;

  height: 120%;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(201, 169, 97, 0.42) 0%, rgba(201, 169, 97, 0) 68%);

  filter: blur(4px);

}



.vb-cover-mono {

  position: relative;

  font-size: 56px;

  font-weight: 800;

  letter-spacing: -0.02em;

  line-height: 0.9;

  text-align: center;

  padding: 0 10px;

  white-space: nowrap;

  text-shadow: 0 2px 18px rgba(255, 255, 255, 0.45);

}



.vb-cover-sub {

  position: absolute;

  bottom: 16px;

  left: 0;

  right: 0;

  text-align: center;

  font-weight: 700;

  font-size: 11px;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  opacity: 0.85;

}



.vb-cover-tag {

  position: absolute;

  top: 13px;

  right: 13px;

  z-index: 3;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  border: 1px solid;

  border-radius: 999px;

  padding: 4px 10px;

  background: rgba(255, 255, 255, 0.85);

  backdrop-filter: blur(4px);

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

}



.vb-cover-img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  z-index: 2;

}



/* ── Destacados (Featured y Highlights) ─────────────── */

.vb-feat {

  display: grid;

  grid-template-columns: 1.05fr 1fr;

  border: 1px solid var(--line);

  border-radius: 22px;

  overflow: hidden;

  box-shadow: var(--shadow);

  margin-bottom: 40px;

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.vb-feat:hover {

  transform: translateY(-3px);

}



.vb-feat-cover {

  position: relative;

}



.vb-feat-cover .vb-cover {

  aspect-ratio: auto;

  height: 100%;

  min-height: 320px;

}



.vb-feat-cover .vb-cover-mono {

  font-size: 92px;

}



.vb-feat-body {

  padding: 44px 48px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 14px;

}



.vb-feat-kicker {

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.18em;

  text-transform: uppercase;

}



.vb-feat-title {

  font-weight: 800;

  font-size: clamp(27px, 3.2vw, 38px);

  line-height: 1.1;

  letter-spacing: -0.025em;

  margin: 0;

  text-wrap: balance;

}



.vb-feat-excerpt {

  font-size: 16px;

  line-height: 1.55;

  color: var(--ink-soft);

  margin: 0;

  max-width: 46ch;

}



@media (max-width: 980px) {

  .vb-feat {

    grid-template-columns: 1fr;

  }

  .vb-feat-cover .vb-cover {

    min-height: 220px;

    aspect-ratio: 16/10;

  }

  .vb-feat-body {

    padding: 30px 26px;

  }

}



/* Highlights horizontal */

.vb-hl-wrap {

  margin-bottom: 52px;

}



.vb-hl-row {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 24px;

}



.vb-hl {

  display: flex;

  flex-direction: column;

  border: 1px solid var(--line);

  border-radius: 20px;

  overflow: hidden;

  box-shadow: var(--shadow);

  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;

}



.vb-hl:hover {

  transform: translateY(-4px);

  border-color: #d9cbb4;

}



.vb-hl-cover .vb-cover {

  aspect-ratio: 16/8;

}



.vb-hl-body {

  padding: 26px 28px 28px;

  display: flex;

  flex-direction: column;

  gap: 11px;

  flex: 1;

}



.vb-hl-kicker {

  font-size: 11.5px;

  font-weight: 700;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  display: inline-flex;

  align-items: center;

  gap: 8px;

}



.vb-hl-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  display: inline-block;

}



.vb-hl-title {

  font-weight: 800;

  font-size: 24px;

  line-height: 1.12;

  letter-spacing: -0.025em;

  margin: 0;

  text-wrap: balance;

}



.vb-hl-excerpt {

  font-size: 15px;

  line-height: 1.55;

  color: var(--ink-soft);

  margin: 0;

  flex: 1;

}



.vb-hl-row.count-1 {

  grid-template-columns: 1fr;

}



.vb-hl-row.count-1 .vb-hl {

  display: grid;

  grid-template-columns: 1.05fr 1fr;

}



.vb-hl-row.count-1 .vb-hl-cover .vb-cover {

  aspect-ratio: auto;

  height: 100%;

  min-height: 300px;

}



.vb-hl-row.count-1 .vb-hl-cover .vb-cover-mono {

  font-size: 90px;

}



.vb-hl-row.count-1 .vb-hl-body {

  padding: 40px 44px;

  justify-content: center;

}



.vb-hl-row.count-1 .vb-hl-title {

  font-size: clamp(26px, 3vw, 36px);

}



@media (max-width: 980px) {

  .vb-hl-row, .vb-hl-row.count-1 .vb-hl {

    grid-template-columns: 1fr;

  }

  .vb-hl-row.count-1 .vb-hl-cover .vb-cover {

    min-height: 200px;

    aspect-ratio: 16/10;

  }

}



/* ── Sistema de Color por Categoría ─────────────────── */

/* Metabolismo */

.cat-metabolismo .vb-cover {

  background: linear-gradient(150deg, #E8DCF0 0%, #F5EDE0 100%) !important;

}

.cat-metabolismo .vb-cover-mono,

.cat-metabolismo .vb-cover-sub,

.cat-metabolismo .vb-cover-tag,

.cat-metabolismo .vb-card-cta,

.cat-metabolismo .vb-feat-kicker,

.cat-metabolismo .vb-hl-kicker {

  color: #4A3570 !important;

  border-color: rgba(74, 53, 118, 0.27) !important;

}

.cat-metabolismo .vb-hl-dot {

  background-color: #4A3570 !important;

}



/* Rendimiento / Hormona */

.cat-hormona .vb-cover {

  background: linear-gradient(150deg, #F7EFE3 0%, #F0D8C8 100%) !important;

}

.cat-hormona .vb-cover-mono,

.cat-hormona .vb-cover-sub,

.cat-hormona .vb-cover-tag,

.cat-hormona .vb-card-cta,

.cat-hormona .vb-feat-kicker,

.cat-hormona .vb-hl-kicker {

  color: #B07A45 !important;

  border-color: rgba(176, 122, 69, 0.27) !important;

}

.cat-hormona .vb-hl-dot {

  background-color: #B07A45 !important;

}



/* Recuperación */

.cat-recuperacion .vb-cover {

  background: linear-gradient(150deg, #F0D8C8 0%, #EFEAE0 100%) !important;

}

.cat-recuperacion .vb-cover-mono,

.cat-recuperacion .vb-cover-sub,

.cat-recuperacion .vb-cover-tag,

.cat-recuperacion .vb-card-cta,

.cat-recuperacion .vb-feat-kicker,

.cat-recuperacion .vb-hl-kicker {

  color: #5E806F !important;

  border-color: rgba(94, 128, 111, 0.27) !important;

}

.cat-recuperacion .vb-hl-dot {

  background-color: #5E806F !important;

}



/* Longevidad */

.cat-longevidad .vb-cover {

  background: linear-gradient(150deg, #E8DCF0 0%, #F1DCCD 100%) !important;

}

.cat-longevidad .vb-cover-mono,

.cat-longevidad .vb-cover-sub,

.cat-longevidad .vb-cover-tag,

.cat-longevidad .vb-card-cta,

.cat-longevidad .vb-feat-kicker,

.cat-longevidad .vb-hl-kicker {

  color: #4A3570 !important;

  border-color: rgba(74, 53, 118, 0.27) !important;

}

.cat-longevidad .vb-hl-dot {

  background-color: #4A3570 !important;

}



/* Fundamentos */

.cat-fundamentos .vb-cover {

  background: linear-gradient(150deg, #F5EDE0 0%, #EAE0D0 100%) !important;

}

.cat-fundamentos .vb-cover-mono,

.cat-fundamentos .vb-cover-sub,

.cat-fundamentos .vb-cover-tag,

.cat-fundamentos .vb-card-cta,

.cat-fundamentos .vb-feat-kicker,

.cat-fundamentos .vb-hl-kicker {

  color: #5E806F !important;

  border-color: rgba(94, 128, 111, 0.27) !important;

}

.cat-fundamentos .vb-hl-dot {

  background-color: #5E806F !important;

}



/* ── Controles de Blog (Buscador y Tabs) ───────────── */

.vb-controls {

  display: flex;

  align-items: center;

  gap: 18px;

  flex-wrap: wrap;

  justify-content: space-between;

  margin-bottom: 34px;

}



.vb-tabs {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

}



.vb-tab {

  font-family: 'El Messiri', system-ui, sans-serif;

  font-size: 13.5px;

  font-weight: 600;

  color: var(--ink-soft);

  background: transparent;

  border: 1px solid var(--line);

  border-radius: 999px;

  padding: 9px 16px;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  transition: all 0.18s;

}



.vb-tab:hover {

  border-color: var(--teal);

  color: var(--carbon);

}



.vb-tab.is-active {

  background: var(--carbon);

  border-color: var(--carbon);

  color: #fff;

}



.vb-tab-count {

  font-size: 11px;

  font-weight: 700;

  opacity: 0.65;

  background: rgba(0, 0, 0, 0.06);

  border-radius: 999px;

  padding: 1px 7px;

}



.vb-tab.is-active .vb-tab-count {

  background: rgba(255, 255, 255, 0.18);

  opacity: 1;

}



.vb-search {

  display: flex;

  align-items: center;

  gap: 8px;

  border: 1px solid var(--line);

  border-radius: 999px;

  padding: 9px 14px;

  color: var(--gris);

  min-width: 248px;

  box-shadow: var(--shadow-sm);

}



.vb-search input {

  border: 0;

  outline: 0;

  background: none;

  font-family: 'El Messiri', system-ui, sans-serif;

  font-size: 14px;

  color: var(--carbon);

  width: 100%;

}



.vb-search-clear {

  border: 0;

  background: none;

  font-size: 18px;

  line-height: 1;

  cursor: pointer;

  color: var(--gris);

  padding: 0 2px;

}



.vb-groups {

  display: flex;

  flex-direction: column;

  gap: 56px;

}



.vb-section-head {

  display: flex;

  align-items: baseline;

  gap: 14px;

  margin-bottom: 22px;

  padding-bottom: 14px;

  border-bottom: 1px solid var(--line);

}



.vb-section-head h2 {

  font-weight: 800;

  font-size: 25px;

  margin: 0;

  letter-spacing: -0.02em;

}



.vb-section-head span {

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--gris);

  margin-left: auto;

}



.vb-empty {

  text-align: center;

  color: var(--gris);

  padding: 60px 0;

  font-size: 16px;

}



@media (max-width: 600px) {

  .vb-controls {

    flex-direction: column;

    align-items: stretch;

  }

  .vb-search {

    min-width: 0;

  }

}



/* ── Footer ─────────────────────────────────────────── */

.vb-footer {

  background: var(--carbon);

  color: #d8d2c8;

  margin-top: 40px;

}



.vb-footer-inner {

  max-width: var(--maxw);

  margin: 0 auto;

  padding: 60px 28px 36px;

  display: grid;

  grid-template-columns: 1.6fr 1fr 1fr;

  gap: 48px;

}



.vb-footer-logo {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 16px;

}



.vb-footer-logo svg {

  height: 30px;

  width: auto;

}



/* En el footer el logo va en una sola tinta clara */

.vb-footer-logo svg .cls-1, 

.vb-footer-logo svg .cls-2 {

  fill: #EDE7DC !important;

}



.vb-footer-brand p {

  font-size: 14px;

  line-height: 1.6;

  color: #a9a297;

  max-width: 42ch;

  margin: 0 0 18px;

}



.vb-social {

  display: flex;

  gap: 18px;

}



.vb-social a {

  font-size: 13px;

  font-weight: 600;

  color: #d8d2c8;

  transition: color 0.15s;

}



.vb-social a:hover {

  color: #fff;

}



.vb-footer-col h4 {

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--ambar);

  margin: 0 0 16px;

}



.vb-footer-col a {

  display: block;

  font-size: 14px;

  color: #a9a297;

  padding: 5px 0;

  transition: color 0.15s;

}



.vb-footer-col a:hover {

  color: #fff;

}



.vb-disclaimer {

  max-width: var(--maxw);

  margin: 0 auto;

  padding: 24px 28px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  font-size: 12px;

  line-height: 1.6;

  color: #8a847a;

  text-align: justify;

}



.vb-disclaimer strong {

  color: #b3ada2;

}



.vb-copy {

  text-align: center;

  font-size: 12px;

  color: #7a746b;

  padding: 0 28px 28px;

}



@media (max-width: 980px) {

  .vb-footer-inner {

    grid-template-columns: 1fr 1fr;

    gap: 32px;

  }

  .vb-footer-brand {

    grid-column: 1 / -1;

  }

}



@media (max-width: 600px) {

  .vb-footer-inner {

    grid-template-columns: 1fr;

    gap: 24px;

  }

}



/* ── Componente Acordeón ────────────────────────────── */

.vb-accordion-item {

  border-bottom: 1px solid var(--line);

}



.vb-accordion-btn {

  display: flex;

  justify-content: space-between;

  align-items: center;

  w-full: 100%;

  width: 100%;

  padding: 20px 0;

  font-size: 18px;

  font-weight: 700;

  text-align: left;

  background: transparent;

  border: 0;

  cursor: pointer;

  color: var(--carbon);

  transition: color 0.2s;

}



.vb-accordion-btn:hover {

  color: var(--morado);

}



.vb-accordion-btn.open .vb-accordion-arrow {

  transform: rotate(180deg);

}



.vb-accordion-arrow {

  width: 20px;

  height: 20px;

  transition: transform 0.3s;

  color: var(--teal);

}



.vb-accordion-content {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.3s ease-out;

}



.vb-accordion-content-inner {

  padding-bottom: 24px;

  font-size: 15px;

  line-height: 1.6;

  color: var(--ink-soft);

  text-align: justify;

}



.vb-accordion-content-inner p {

  margin: 0 0 16px;

}



.vb-accordion-content-inner p:last-child {

  margin-bottom: 0;

}



/* ── WhatsApp Flotante ──────────────────────────────── */

.vb-whatsapp-float {

  position: fixed;

  bottom: 24px;

  right: 24px;

  z-index: 99;

  background-color: #25D366 !important;

  color: white !important;

  width: 56px;

  height: 56px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);

  transition: transform 0.2s, background-color 0.2s;

}



.vb-whatsapp-float:hover {

  transform: scale(1.1);

  background-color: #128C7E !important;

}



.vb-whatsapp-float svg {

  width: 28px;

  height: 28px;

}