/* =============================================================================
   VETERCALM LANDING — estilos exclusivos de la home (front-page.php)
   =============================================================================
   Scopeado bajo `.vc-landing` para no filtrar a otras páginas.
   Consume tokens --vc-* declarados en vetercalm-tokens.css.
   Port directo de los componentes Astro del proyecto vetercalm-v2/.
   ============================================================================= */

/* -----------------------------------------------------------------------------
 * LAYOUT BASE
 * -------------------------------------------------------------------------- */

html:has(.vc-landing),
body.home.vc-theme { overflow-x: clip; }

.vc-landing {
  color: var(--vc-ink);
  background: var(--vc-bone);
  font-family: var(--vc-font-sans);
  font-feature-settings: var(--vc-font-features);
}

.vc-landing .vc-container {
  width: 100%;
  max-width: var(--vc-container-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 640px) { .vc-landing .vc-container { padding-inline: 2rem; } }
@media (min-width: 1024px) { .vc-landing .vc-container { padding-inline: 3rem; } }

.vc-landing .vc-section {
  padding-block: var(--vc-section-py);
}

.vc-landing h1,
.vc-landing h2,
.vc-landing h3,
.vc-landing h4 {
  font-family: var(--vc-font-display);
  font-variation-settings: var(--vc-font-variations);
  color: var(--vc-forest);
  font-weight: 500;
}

.vc-landing em { font-style: italic; }

.vc-landing .vc-eyebrow {
  font-size: var(--vc-text-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--vc-tracking-eyebrow);
  color: var(--vc-amber);
  font-family: var(--vc-font-sans);
}

/* Reveal animations (reusa .vc-reveal existente) */
.vc-landing .vc-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms var(--vc-ease-out-expo), transform 800ms var(--vc-ease-out-expo);
}
.vc-landing .vc-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .vc-landing .vc-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* -----------------------------------------------------------------------------
 * BOTONES DE LANDING
 * Se llaman .vc-btn-primary y .vc-btn-ghost para no colisionar con Woodmart.
 * -------------------------------------------------------------------------- */

.vc-landing .vc-btn-primary,
.vc-landing .vc-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: var(--vc-radius-pill);
  font-family: var(--vc-font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  min-height: 44px;
  transition: all var(--vc-duration-base) var(--vc-ease-out-expo);
}

.vc-landing .vc-btn-primary {
  background: var(--vc-amber);
  color: var(--vc-bone);
  border: 1px solid transparent;
}
.vc-landing .vc-btn-primary:hover {
  background: var(--vc-amber-hover);
  transform: translateY(-2px);
  box-shadow: var(--vc-shadow-amber);
  color: var(--vc-bone);
}
.vc-landing .vc-btn-primary:active { transform: translateY(0); }

.vc-landing .vc-btn-ghost {
  background: transparent;
  color: var(--vc-forest);
  border: 1px solid var(--vc-forest-25);
}
.vc-landing .vc-btn-ghost:hover {
  border-color: var(--vc-forest);
  transform: translateY(-2px);
  color: var(--vc-forest);
}

.vc-landing .vc-btn-ghost.is-light {
  color: var(--vc-bone);
  border-color: rgba(248, 245, 238, 0.3);
}
.vc-landing .vc-btn-ghost.is-light:hover {
  border-color: var(--vc-bone);
  color: var(--vc-bone);
}

/* Focus ring común */
.vc-landing a:focus-visible,
.vc-landing button:focus-visible,
.vc-landing summary:focus-visible {
  outline: 2px solid var(--vc-amber);
  outline-offset: 3px;
  border-radius: var(--vc-radius-sm);
}

/* Skip link */
.vc-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
}
.vc-skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: 0.75rem 1rem;
  background: var(--vc-forest);
  color: var(--vc-bone);
  border-radius: var(--vc-radius-md);
  text-decoration: none;
  font-weight: 500;
}

/* -----------------------------------------------------------------------------
 * HERO
 * -------------------------------------------------------------------------- */

.vc-hero {
  position: relative;
  overflow: hidden;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  min-height: clamp(560px, calc(100vw * 1429 / 2560), 92vh);
  background-color: var(--vc-forest-deep);
}

.vc-hero__media {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;
}
.vc-hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.vc-hero__media img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center;
}

.vc-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(10, 24, 18, 0.25) 0%,
    rgba(10, 24, 18, 0.1) 40%,
    rgba(10, 24, 18, 0) 70%
  );
  z-index: 1;
}

.vc-hero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(120px, 18vh, 220px);
}

.vc-hero__content { max-width: 42rem; }

.vc-hero .vc-eyebrow {
  color: var(--vc-kraft);
}

.vc-landing .vc-hero__title {
  margin-top: 2rem;
  font-size: var(--vc-text-display-lg);
  line-height: var(--vc-lh-display-lg);
  letter-spacing: var(--vc-tracking-lg);
  color: var(--vc-bone);
  font-weight: 400;
}
.vc-landing .vc-hero__title em { color: var(--vc-kraft); font-style: italic; }

.vc-landing .vc-hero__lead {
  margin-top: 2.5rem;
  max-width: 52ch;
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(248, 245, 238, 0.85);
}

.vc-sm-only { display: none; }
@media (max-width: 639px) { .vc-sm-only { display: inline; } }

.vc-hero__actions {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* Mobile-specific: hero más compacto para que la foto domine el área visual.
 * Sin esto, el contenido (h1 + lead + 2 botones) pushea el hero a ~780px y la
 * foto mobile (720×1000) escalada al ancho del viewport no alcanza a cubrir,
 * dejando bone-warm de fondo en la mitad inferior. */
@media (max-width: 767px) {
  .vc-hero {
    min-height: clamp(620px, 100svh, 760px);
  }
  .vc-hero__inner {
    padding-block: clamp(80px, 12vh, 130px);
  }
  .vc-landing .vc-hero__title {
    font-size: clamp(2rem, 9vw, 2.75rem);
    line-height: 1.05;
  }
  .vc-landing .vc-hero__lead {
    margin-top: 1.5rem;
    font-size: 1rem;
    line-height: 1.55;
  }
  .vc-hero__actions {
    margin-top: 2rem;
  }
  /* Refuerza legibilidad del lead sobre la foto: overlay gradient bottom */
  .vc-hero__overlay {
    background:
      linear-gradient(to bottom, rgba(10,24,18,0) 30%, rgba(10,24,18,.45) 100%),
      linear-gradient(to right, rgba(10,24,18,.25) 0%, rgba(10,24,18,.1) 40%, rgba(10,24,18,0) 70%);
  }
}

/* -----------------------------------------------------------------------------
 * PROMESA
 * -------------------------------------------------------------------------- */

.vc-promesa {
  background: var(--vc-bone-warm);
  padding-block: clamp(28px, 5vh, 56px);
  color: var(--vc-forest);
}

.vc-promesa__grid {
  display: grid;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .vc-promesa__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 3rem;
  }
  .vc-promesa__intro { grid-column: span 4 / span 4; }
  .vc-promesa__cards { grid-column: span 8 / span 8; }
}

.vc-promesa__title {
  margin-top: 1.25rem;
  font-size: var(--vc-text-display-lg);
  line-height: var(--vc-lh-display-lg);
  letter-spacing: var(--vc-tracking-lg);
  color: var(--vc-forest);
  font-weight: 400;
}
.vc-promesa__title em { color: rgba(31, 61, 46, 0.8); }

.vc-promesa__cards ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .vc-promesa__cards ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

.vc-promesa__card {
  background: var(--vc-bone);
  border: 1px solid var(--vc-forest-line);
  border-radius: var(--vc-radius-md);
  padding: 1.25rem;
}

.vc-promesa__icon {
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--vc-forest-25);
  color: var(--vc-forest);
}

.vc-promesa__card h3 {
  margin-top: 1rem;
  font-size: 1.5rem;
  color: var(--vc-forest);
}
.vc-promesa__card p {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--vc-ink-soft);
}

/* -----------------------------------------------------------------------------
 * MOMENTOS
 * -------------------------------------------------------------------------- */

.vc-momentos {
  background: var(--vc-bone);
}

.vc-momentos__head {
  display: grid;
  gap: 2.5rem;
  align-items: end;
}
@media (min-width: 1024px) {
  .vc-momentos__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 5rem;
  }
  .vc-momentos__intro { grid-column: span 5 / span 5; }
  .vc-momentos__hint { grid-column: span 7 / span 7; display: block; text-align: right; }
}

.vc-momentos__title {
  margin-top: 1.5rem;
  font-size: var(--vc-text-display-lg);
  line-height: var(--vc-lh-display-lg);
  letter-spacing: var(--vc-tracking-lg);
  color: var(--vc-forest);
  font-weight: 400;
}

.vc-momentos__lead {
  margin-top: 2rem;
  max-width: 65ch;
  line-height: 1.7;
  color: var(--vc-ink-soft);
}

.vc-momentos__hint {
  display: none;
  font-size: 0.875rem;
  color: var(--vc-ink-mute);
}
.vc-momentos__hint span {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.vc-momentos__track {
  margin-top: 4rem;
  margin-inline: -1.5rem;
}
@media (min-width: 640px) { .vc-momentos__track { margin-inline: -2rem; } }
@media (min-width: 1024px) { .vc-momentos__track { margin-inline: -3rem; } }

.vc-momentos__track ol {
  list-style: none;
  padding: 0 1.5rem 1rem 1.5rem;
  margin: 0;
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(31, 61, 46, 0.25) transparent;
}
@media (min-width: 640px) { .vc-momentos__track ol { padding-inline: 2rem; gap: 2rem; } }
@media (min-width: 1024px) { .vc-momentos__track ol { padding-inline: 3rem; } }

.vc-momentos__item {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: clamp(280px, 28vw, 380px);
}

.vc-momentos__figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--vc-radius-sm);
  background: var(--vc-forest-10);
  aspect-ratio: 1 / 1;
}
.vc-momentos__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--vc-ease-out-expo);
}
.vc-momentos__item:hover .vc-momentos__figure img {
  transform: scale(1.04);
}
.vc-momentos__number {
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
  font-family: var(--vc-font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(248, 245, 238, 0.95);
  mix-blend-mode: difference;
}

.vc-momentos__item h3 {
  margin-top: 1.5rem;
  font-size: 1.5rem;
  color: var(--vc-forest);
}
.vc-momentos__item p {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--vc-ink-soft);
}

/* -----------------------------------------------------------------------------
 * PRODUCTO
 * -------------------------------------------------------------------------- */

.vc-producto {
  background: var(--vc-bone-warm);
}

.vc-producto__head { max-width: 48rem; }
.vc-producto__title {
  margin-top: 1.5rem;
  font-size: var(--vc-text-display-lg);
  line-height: var(--vc-lh-display-lg);
  letter-spacing: var(--vc-tracking-lg);
  color: var(--vc-forest);
  font-weight: 400;
}
.vc-producto__lead {
  margin-top: 2rem;
  max-width: 65ch;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--vc-ink-soft);
}

.vc-producto__list {
  margin-top: 6rem;
  display: grid;
  gap: 7rem;
}
@media (min-width: 1024px) { .vc-producto__list { gap: 10rem; } }

.vc-producto__item {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .vc-producto__item {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 5rem;
  }
  .vc-producto__media { grid-column: span 7 / span 7; }
  .vc-producto__body  { grid-column: span 5 / span 5; }

  .vc-producto__item.is-reverse .vc-producto__media { order: 2; grid-column: span 7 / span 7; }
  .vc-producto__item.is-reverse .vc-producto__body  { order: 1; grid-column: span 5 / span 5; }
}

.vc-producto__media { position: relative; }
.vc-producto__main {
  position: relative;
  overflow: hidden;
  border-radius: var(--vc-radius-sm);
  background: var(--vc-bone);
  aspect-ratio: 4 / 5;
}
/* La imagen debe llenar el contenedor al 100% (w x h). Chrome respeta los
   width/height attrs del <img> (1400x1737) como aspect-ratio intrínseco
   (`aspect-ratio: auto 1400/1737` en computed) y calcula la altura por
   esa ratio incluso con `height: 100%`, dejando ~6px de bg bone al final.
   Forzar `aspect-ratio: 4/5` en el img (igual al contenedor) lo sobreescribe. */
.vc-producto__main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.vc-producto__float {
  position: absolute;
  top: 50%;
  width: 10rem;
  transform: translateY(-50%);
  overflow: hidden;
  border-radius: var(--vc-radius-sm);
  border: 8px solid var(--vc-bone-warm);
  box-shadow: 0 24px 48px -16px rgba(20, 41, 30, 0.35);
}
@media (min-width: 640px) { .vc-producto__float { width: 14rem; } }

.vc-producto__item:not(.is-reverse) .vc-producto__float {
  right: 0;
  transform: translateX(12%) translateY(-50%);
}
.vc-producto__item.is-reverse .vc-producto__float {
  left: 0;
  transform: translateX(-12%) translateY(-50%);
}
@media (min-width: 640px) {
  .vc-producto__item:not(.is-reverse) .vc-producto__float {
    transform: translateX(20%) translateY(-50%);
  }
  .vc-producto__item.is-reverse .vc-producto__float {
    transform: translateX(-20%) translateY(-50%);
  }
}
.vc-producto__float img { width: 100%; height: auto; display: block; }

.vc-producto__name {
  margin-top: 1.5rem;
  font-size: var(--vc-text-display-md);
  line-height: var(--vc-lh-display-md);
  letter-spacing: var(--vc-tracking-md);
  color: var(--vc-forest);
}

.vc-producto__specs {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 1.75rem;
  border-top: 1px solid var(--vc-forest-10);
  padding-top: 2.5rem;
}
.vc-producto__specs dt {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vc-ink-mute);
  font-family: var(--vc-font-sans);
}
.vc-producto__specs dd {
  margin-top: 0.5rem;
  font-family: var(--vc-font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--vc-forest);
  font-variant-numeric: tabular-nums;
}
.vc-producto__specs .is-large dd { font-size: 1.875rem; }
.vc-producto__specs .is-text dd {
  font-family: var(--vc-font-sans);
  font-size: 1rem;
  font-weight: 500;
}
.vc-producto__specs .is-wide {
  grid-column: span 2 / span 2;
  border-top: 1px solid var(--vc-forest-10);
  padding-top: 1.75rem;
}
.vc-producto__specs .is-wide dd {
  font-family: var(--vc-font-sans);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--vc-forest);
}

.vc-producto__cta {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.vc-producto__price {
  font-family: var(--vc-font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--vc-forest);
}
.vc-producto__price del {
  color: var(--vc-ink-mute);
  font-size: 1.125rem;
  font-weight: 400;
  margin-right: 0.5rem;
}

/* -----------------------------------------------------------------------------
 * CÓMO FUNCIONA
 * -------------------------------------------------------------------------- */

.vc-pasos { background: var(--vc-bone); }

.vc-pasos__head { max-width: 48rem; }
.vc-pasos__title {
  margin-top: 1.5rem;
  font-size: var(--vc-text-display-lg);
  line-height: var(--vc-lh-display-lg);
  letter-spacing: var(--vc-tracking-lg);
  color: var(--vc-forest);
  font-weight: 400;
}
.vc-pasos__lead {
  margin-top: 2rem;
  max-width: 65ch;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--vc-ink-soft);
}

.vc-pasos__list {
  list-style: none;
  padding: 0;
  margin: 6rem 0 0 0;
  display: grid;
  gap: 4rem;
}
@media (min-width: 768px) {
  .vc-pasos__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

.vc-pasos__item { position: relative; }

.vc-pasos__item::after {
  content: "";
  display: none;
  position: absolute;
  right: -50%;
  top: 4rem;
  height: 1px;
  width: 100%;
  background: var(--vc-forest-15);
}
@media (min-width: 768px) {
  .vc-pasos__item:not(:last-child)::after { display: block; }
}

.vc-pasos__number-wrap { position: relative; }
.vc-pasos__num {
  font-family: var(--vc-font-display);
  font-size: 6rem;
  font-weight: 400;
  line-height: 1;
  color: rgba(31, 61, 46, 0.15);
  margin: 0;
}
@media (min-width: 640px) { .vc-pasos__num { font-size: 8rem; } }

.vc-pasos__titulo {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--vc-font-display);
  font-size: 1.875rem;
  font-weight: 500;
  color: var(--vc-forest);
}
@media (min-width: 640px) { .vc-pasos__titulo { font-size: 2.25rem; } }

.vc-pasos__copy {
  margin-top: 2rem;
  max-width: 34ch;
  line-height: 1.7;
  color: var(--vc-ink-soft);
}

/* -----------------------------------------------------------------------------
 * RESPALDO
 * -------------------------------------------------------------------------- */

.vc-respaldo {
  background: var(--vc-forest-deep);
  color: var(--vc-bone);
}

.vc-respaldo__head { max-width: 48rem; }
.vc-landing .vc-respaldo__title {
  margin-top: 1.5rem;
  font-size: var(--vc-text-display-lg);
  line-height: var(--vc-lh-display-lg);
  letter-spacing: var(--vc-tracking-lg);
  color: var(--vc-bone);
  font-weight: 400;
}
.vc-landing .vc-respaldo__title em { color: var(--vc-amber); font-style: italic; }
.vc-landing .vc-respaldo .vc-eyebrow { color: var(--vc-amber); }

.vc-respaldo__grid {
  margin-top: 5rem;
  display: grid;
  gap: 1px;
  background: rgba(248, 245, 238, 0.1);
  overflow: hidden;
  border-radius: var(--vc-radius-sm);
}
@media (min-width: 640px) { .vc-respaldo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vc-respaldo__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.vc-respaldo__cell {
  background: var(--vc-forest-deep);
  padding: 2.5rem;
}

.vc-respaldo__icon {
  display: flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(232, 213, 168, 0.4);
  color: var(--vc-kraft);
}

.vc-respaldo__cell h3 {
  margin-top: 2rem;
  font-size: 1.25rem;
  color: var(--vc-kraft);
}
.vc-respaldo__cell p {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(248, 245, 238, 0.7);
}

/* -----------------------------------------------------------------------------
 * FAQ
 * -------------------------------------------------------------------------- */

.vc-faq { background: var(--vc-bone); }

.vc-faq__grid {
  display: grid;
  gap: 4rem;
}
@media (min-width: 1024px) {
  .vc-faq__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 5rem;
  }
  .vc-faq__intro { grid-column: span 4 / span 4; }
  .vc-faq__list  { grid-column: span 8 / span 8; }
}

.vc-faq__title {
  margin-top: 1.5rem;
  font-size: var(--vc-text-display-lg);
  line-height: var(--vc-lh-display-lg);
  letter-spacing: var(--vc-tracking-lg);
  color: var(--vc-forest);
  font-weight: 400;
}
.vc-faq__mail {
  margin-top: 2rem;
  max-width: 32ch;
  line-height: 1.7;
  color: var(--vc-ink-soft);
}
.vc-faq__mail a {
  color: var(--vc-forest);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--vc-duration-base);
}
.vc-faq__mail a:hover { color: var(--vc-amber); }

.vc-faq__list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--vc-forest-15);
}
.vc-faq__list li { border-bottom: 1px solid var(--vc-forest-15); }

.vc-faq__item { }
.vc-faq__item summary {
  display: flex;
  cursor: pointer;
  list-style: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 2rem;
  text-align: left;
  transition: color var(--vc-duration-base);
}
.vc-faq__item summary::-webkit-details-marker { display: none; }
.vc-faq__item summary:hover { color: var(--vc-amber); }

.vc-faq__q {
  font-family: var(--vc-font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--vc-forest);
}
@media (min-width: 640px) { .vc-faq__q { font-size: 1.5rem; } }

.vc-faq__toggle {
  margin-top: 0.375rem;
  display: flex;
  height: 2rem;
  width: 2rem;
  min-width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--vc-forest-25);
  color: var(--vc-forest);
  transition: transform var(--vc-duration-base), border-color var(--vc-duration-base), color var(--vc-duration-base);
}
.vc-faq__item[open] .vc-faq__toggle {
  transform: rotate(45deg);
  border-color: var(--vc-amber);
  color: var(--vc-amber);
}

.vc-faq__a {
  max-width: 65ch;
  padding-bottom: 2rem;
  padding-right: 3.5rem;
  line-height: 1.7;
  color: var(--vc-ink-soft);
  margin: 0;
}

/* -----------------------------------------------------------------------------
 * CTA FINAL
 * -------------------------------------------------------------------------- */

.vc-cta { background: var(--vc-bone); }

.vc-cta__grid {
  display: grid;
  gap: 3.5rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .vc-cta__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 5rem;
  }
  .vc-cta__copy  { grid-column: span 7 / span 7; }
  .vc-cta__media { grid-column: span 5 / span 5; }
}

.vc-cta__title {
  margin-top: 2rem;
  font-size: var(--vc-text-display-xl);
  line-height: var(--vc-lh-display-xl);
  letter-spacing: var(--vc-tracking-xl);
  color: var(--vc-forest);
  font-weight: 400;
}
.vc-cta__title em { color: rgba(31, 61, 46, 0.8); }

.vc-cta__lead {
  margin-top: 2.5rem;
  max-width: 52ch;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--vc-ink-soft);
}
.vc-cta__lead strong {
  color: var(--vc-forest);
  font-weight: 500;
}

.vc-cta__actions {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.vc-cta__disclaimer {
  margin-top: 3rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--vc-ink-mute);
}

.vc-cta__figure { position: relative; }
.vc-cta__figure > div:not(.vc-cta__badge) {
  position: relative;
  overflow: hidden;
  border-radius: var(--vc-radius-sm);
  background: var(--vc-forest-10);
  aspect-ratio: 4 / 5;
}
/* Mismo issue que .vc-producto__main img: los attrs width/height del <img>
   (1600x1986) generan un aspect-ratio intrínseco ≠ 4/5 que Chrome respeta por
   sobre `height: 100%`, dejando ~14px de bg (forest-10) visible al final. */
.vc-cta__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.vc-cta__badge {
  position: absolute;
  left: -1rem;
  bottom: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  width: auto;
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: 9999px;
  background: var(--vc-forest-deep);
  color: var(--vc-bone);
  font-family: var(--vc-font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 24px 48px -16px rgba(20, 41, 30, 0.4);
}
@media (min-width: 640px) { .vc-cta__badge { left: -2rem; } }

/* -----------------------------------------------------------------------------
 * RESPONSIVE HELPERS Y OVERFLOW FIX
 * -------------------------------------------------------------------------- */

.vc-landing img {
  max-width: 100%;
  height: auto;
}

.vc-landing .vc-section + .vc-section { border-top: 0; }

/* Woodmart body quita el margen superior que a veces mete el header */
body.home.vc-theme .main-page-wrapper,
body.home.vc-theme .wd-page-content,
body.home.vc-theme #main-content.container,
body.home.vc-theme .content-layout-wrapper,
body.home.vc-theme .site-content,
body.home.vc-theme #vc-main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}