/* ==========================================================================
   PÁGINAS ÚNICAS (Servicios, Sobre nosotros, Equipo, Contacto, Home)
   ========================================================================== */
.vd-sec {
  padding: clamp(56px, 8vw, 96px) clamp(20px, 5vw, 48px)
}

.vd-bg-white {
  background: #fff
}

.vd-bg-lil {
  background: #F7F1FB
}

.vd-center {
  max-width: 660px;
  margin: 0 auto;
  text-align: center
}

.vd-w1200 {
  max-width: var(--vd-cw);
  margin: 0 auto
}

/* Service detail cards */
.vd-svcgrid {
  max-width: var(--vd-cw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px
}

.vd-svccard {flex: 1 1 340px;min-width: 300px}

/* Cajas de icono (svc/why/tech/benefit): el fondo/radio son AJUSTES NATIVOS del
   CONTENEDOR, así que el contenedor debe tener TAMAÑO FIJO y no estirarse a lo
   ancho de la tarjeta (align-self evita el stretch del flex/grid de la tarjeta). */
.vd-svcicon, .vd-whyicon, .vd-techicon, .vd-bicon {
  display: flex; align-items: center; justify-content: center; align-self: flex-start; flex: none
}
.vd-svcicon {width: 60px; height: 60px}
.vd-whyicon {width: 50px; height: 50px}
.vd-techicon {width: 52px; height: 52px}
.vd-bicon {width: 50px; height: 50px}
/* La caja centra al icono: el widget-container llena la caja y centra el svg,
   que tiene su tamaño por el ajuste NATIVO `size` del widget icon. */
.vd-svcicon .elementor-widget-container,
.vd-whyicon .elementor-widget-container,
.vd-techicon .elementor-widget-container,
.vd-bicon .elementor-widget-container {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;margin: 0}

.vd-svcicon .elementor-icon {display: flex;align-items: center;justify-content: center}

.vd-svctitle .elementor-heading-title {margin: 16px 0 10px}

.vd-svctitle a:hover {
  color: #6E4A85
}

.vd-svcdesc .elementor-widget-container {margin-bottom: 18px}

.vd-svcdesc p {margin: 0}

.vd-svclist .elementor-icon-list-items {display: flex;flex-direction: column;gap: 10px}

.vd-svclist .elementor-icon-list-item {align-items: flex-start}

.vd-svclist .elementor-icon-list-icon svg {width: 16px;height: 16px}

/* Why cards */
.vd-whygrid {
  max-width: var(--vd-cw);
  margin: 48px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px
}

.vd-whycard {flex: 1 1 300px;min-width: 280px;display: flex;gap: 18px;align-items: flex-start}

.vd-whyicon .elementor-icon {display: flex;align-items: center;justify-content: center}

.vd-whytitle .elementor-heading-title {margin-bottom: 6px}

.vd-whytext p {margin: 0}

/* Tech cards */
.vd-techgrid {
  max-width: var(--vd-cw);
  margin: 48px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px
}

.vd-techcard {flex: 1 1 240px;min-width: 220px}

.vd-techicon .elementor-icon {display: flex;align-items: center;justify-content: center}

.vd-techtitle .elementor-heading-title {margin: 16px 0 8px}

.vd-techtext p {margin: 0}

/* Team cards */
.vd-teamgrid {
  max-width: var(--vd-cw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px
}

.vd-teamcard {flex: 1 1 280px;min-width: 260px;overflow: hidden;transition: transform .35s ease, box-shadow .35s ease}

.vd-teamcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(110, 74, 133, .16)
}

.vd-teamphoto {
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, #F3ECF7, #E3D4EA);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b39cc4;
  font-size: 13px;
  min-height: 220px
}

.vd-teambody {
  padding: 22px 24px
}

.vd-teamname .elementor-heading-title {margin-bottom: 4px}

.vd-teamrole .elementor-widget-container {margin-bottom: 10px}

.vd-teamrole p {margin: 0}

.vd-teamtext p {margin: 0}

.vd-footnote .elementor-widget-container {margin-top: 32px}

.vd-footnote p {margin: 0}

/* Stats counters */
.vd-statswrap {max-width: var(--vd-cw);margin: 0 auto;display: flex;flex-wrap: wrap;gap: 24px;justify-content: space-around}

.vd-counter {flex: 1 1 160px}

.vd-counter .elementor-counter-number-wrapper {justify-content: center}

.vd-counter .elementor-counter-title {margin-top: 8px}

/* El widget counter no expone color de prefijo/sufijo por separado (hereda el
   del número); el diseño los quiere en rosa, así que va este residual mínimo. */
.vd-counter .elementor-counter-number-prefix,
.vd-counter .elementor-counter-number-suffix { color: #C97BA8 }

/* Story 2-col */
.vd-story {
  max-width: var(--vd-cw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(40px, 5vw, 64px);
  align-items: center
}

.vd-story-media {
  flex: 1 1 320px;
  min-width: 300px;
  position: relative
}

.vd-story-img {
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 30px 70px rgba(110, 74, 133, .18);
  background: linear-gradient(135deg, #F3ECF7, #E3D4EA);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b39cc4
}

/* Badge flotante: SOLO posición + animación (estructural, sin equivalente
   nativo). El fondo/color/radio/padding/sombra/tipografía son AJUSTES NATIVOS
   del widget counter que lleva esta clase. */
.vd-story-badge {
  position: absolute;
  bottom: -24px;
  left: -24px;
  animation: vd-float 6s ease-in-out infinite
}

.vd-story-text {
  flex: 1 1 320px;
  min-width: 300px
}

.vd-story-h2 .elementor-heading-title {margin: 14px 0 20px}

.vd-story-p .elementor-widget-container {margin-bottom: 16px}

.vd-story-p p {margin: 0}

.vd-quote2 .elementor-widget-container {margin-top: 6px;padding: 20px 24px}

.vd-quote2 p {margin: 0}

/* Values band */
.vd-values {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center
}

.vd-valtext .elementor-widget-container {max-width: 680px;margin: 0 auto}

.vd-valtext p {margin: 0}

/* Contact */
.vd-contact {
  max-width: var(--vd-cw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: stretch
}

.vd-formcard {flex: 1 1 340px;min-width: 320px}

.vd-formtitle .elementor-heading-title {margin-bottom: 14px}

.vd-formcard .elementor-field-group>label {margin-bottom: 7px}

.vd-formcard .elementor-button {justify-content: center}

.vd-formcard .elementor-button:hover {
  background: #6E4A85
}

.vd-contact-side {
  flex: 1 1 340px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 20px
}

/* -- Mapa (widget google_maps): border-radius/sombra/alto = AJUSTES NATIVOS.
      El iframe va en position:absolute dentro de una caja de alto fijo para que
      su ancho intrínseco enorme no dimensione la columna del grid. -- */
.vd-map { position: relative; min-height: 300px; overflow: hidden }
.vd-map > .elementor-widget-container,
.vd-map .elementor-custom-embed,
.vd-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0 }

/* -- Info-cards (widget icon-box): color/tipografía/icono/fondo/radio/padding y
      la alineación son AJUSTES NATIVOS de cada icon-box. Solo queda el reparto
      flex de las tarjetas dentro del contenedor. -- */
.vd-infocards-native > .elementor-widget,
.vd-infocard-native { flex: 1 1 150px; min-width: 150px }
/* En móvil: info-cards (datos bajo el mapa) y botones principales a ANCHO COMPLETO. */
@media (max-width: 767px) {
  .vd-infocards-native > .elementor-widget,
  .vd-infocard-native { flex: 1 1 100% !important; min-width: 0 !important }
  /* Botones hero: apilar y estirar a ancho completo */
  .vd-hero-btns { flex-direction: column; align-items: stretch }
  .vd-hero-btns > .elementor-widget,
  .vd-cta-btn { width: 100% }
  .vd-hero-btns .elementor-button,
  .vd-cta-btn .elementor-button { width: 100%; justify-content: center }
}

/* -- Menú del POPUP móvil (nav-menu vertical dentro del popup nativo). Elementor
      renderiza el submenú de "Servicios" como capa flotante absoluta (estilo
      escritorio) que en un popup móvil no despliega bien. Lo mostramos EN LÍNEA:
      todos los servicios visibles e indentados, que es el comportamiento esperado
      de un menú móvil. Estructural: el layout vertical de Elementor no ofrece
      submenú acordeón/inline por ajustes. -- */
.vd-popup-nav .sub-menu {
  position: static !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 2px 0 6px 16px !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
.vd-popup-nav .sub-arrow { display: none !important }

/* Hero (home) */
.vd-hero {position: relative;overflow: hidden;padding: clamp(160px, 20vw, 220px) clamp(20px, 5vw, 48px) clamp(80px, 12vw, 130px);color: #fff}

.vd-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, rgba(58, 40, 70, .92), rgba(201, 123, 168, .5));
  z-index: 1;
  pointer-events: none
}

.vd-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--vd-cw);
  margin: 0 auto
}

.vd-hero-col {
  max-width: 680px
}

.vd-hero-badge .elementor-widget-container {display: inline-flex;align-items: center;gap: 8px;padding: 8px 16px}

.vd-hero .vd-btn-pink .elementor-button {padding: 15px 30px}

.vd-hero .vd-btn-pink .elementor-button:hover {
  background: #e08cba
}

.vd-hero .vd-btn-outline .elementor-button {padding: 15px 30px}

/* Seguros band */
.vd-seguros {max-width: var(--vd-cw);margin: 0 auto;display: flex;flex-wrap: wrap;gap: 32px;align-items: center}

.vd-seguros-text {
  flex: 1 1 320px
}

.vd-seguros .vd-seg-h2 .elementor-heading-title {margin-bottom: 12px}

.vd-seg-p p {margin: 0}

.vd-chips .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.vd-chips .elementor-icon-list-item {
  background: rgba(255, 255, 255, .16);
  border-radius: 12px;
  padding: 12px 16px !important;
  color: #fff;
  font-weight: 600;
  font-size: 14.5px
}

.vd-chips .elementor-icon-list-icon svg {
  fill: #fff;
  width: 18px;
  height: 18px
}

.vd-chips .elementor-icon-list-text {
  color: #fff
}

/* Testimonials (home) */
.vd-testis {
  max-width: var(--vd-cw);
  margin: 40px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px
}

.vd-testi {flex: 1 1 440px;min-width: 300px}

.vd-stars .elementor-widget-container {margin-bottom: 10px}

.vd-testitext .elementor-widget-container {margin-bottom: 14px}

.vd-testitext p {margin: 0}

.vd-testirole p {margin: 0}

@media (max-width:900px) {
  .vd-story-badge {
    left: 0
  }
}

/* Fix: forzar flex-basis en contenedores hijos (override del width:100% de Elementor) */
.vd-svcgrid>.e-con {
  flex: 1 1 340px !important;
  width: auto !important
}

.vd-statswrap>.e-con {flex: 1 1 160px !important;width: auto !important}

.vd-whygrid>.e-con {
  flex: 1 1 300px !important;
  width: auto !important
}

.vd-techgrid>.e-con {
  flex: 1 1 240px !important;
  width: auto !important
}

.vd-teamgrid>.e-con {
  flex: 1 1 280px !important;
  width: auto !important
}

.vd-testis>.e-con {
  flex: 1 1 440px !important;
  width: auto !important
}

.vd-contact>.e-con {
  flex: 1 1 340px !important;
  width: auto !important
}

.vd-story>.e-con {
  flex: 1 1 320px !important;
  width: auto !important
}

.vd-seguros>.e-con {flex: 1 1 320px !important;width: auto !important}

.vd-seguros>.elementor-widget {flex: 1 1 260px}

/* =========================================================================
   SERVICIOS — secciones de contenido ampliado (1500–2500 palabras)
   ========================================================================= */

/* -- Secciones full-width con wrapper interno centrado -- */
.vd-benefits-sec,
.vd-process-sec,
.vd-info-sec,
.vd-faq-sec {padding: clamp(48px, 6.5vw, 84px) clamp(20px, 5vw, 48px)}

.vd-secinner {
  max-width: var(--vd-cw);
  margin: 0 auto;
  width: 100%
}

.vd-sechead { margin-bottom: 4px }

/* -- Intro "En qué consiste" en 2 columnas (más legible) -- */
.vd-intro-cols {
  display: block !important;
  column-count: 2;
  column-gap: 44px;
  margin-bottom: 2px
}

.vd-intro-cols > .elementor-widget {
  width: 100% !important;
  break-inside: avoid;
  margin: 0 0 16px
}

.vd-intro-cols .p1-w p,
.vd-intro-cols .p2-w p {margin: 0}

/* -- Tarjetas "Qué incluye" con descripción (dentro de .vd-content-main) -- */
.vd-incgrid { margin-top: 4px }

.vd-inccard { align-items: flex-start }

.vd-inccard .vd-inc-body { min-width: 0 }

.vd-inc-d .elementor-widget-container,
.vd-inc-d p {margin: 0}

/* -- Beneficios: grid de tarjetas con icono -- */

.vd-bicon .elementor-icon {display: flex;align-items: center;justify-content: center}

.vd-bicon .elementor-icon svg {width: 24px;height: 24px}

.vd-btext .elementor-widget-container,
.vd-btext p {margin: 0}

/* -- Proceso paso a paso -- */
.vd-step { padding: 16px 0; gap: 18px }

.vd-step + .vd-step { border-top: 1px solid #EBDFF2 }

/* Elementor reparte el ancho 50/50 entre los hijos del paso: forzamos
   número fijo (44px) y texto flexible, pegados entre sí. */
.vd-process .vd-step > .vd-stepnum {
  flex: 0 0 44px !important;
  width: 44px !important
}

.vd-process .vd-step > .vd-step-body {
  flex: 1 1 auto !important;
  width: auto !important
}

/* El número del paso es un badge circular: el fondo/radio/sombra son AJUSTES
   NATIVOS del widget heading (van en .elementor-widget-container), así que el
   tamaño 44×44 y el centrado deben ir en ESE mismo elemento (si no, queda óvalo). */
.vd-stepnum .vd-stepnum-t .elementor-widget-container {width: 44px;height: 44px;display: flex;align-items: center;justify-content: center}
.vd-stepnum .vd-stepnum-t .elementor-heading-title {display: flex;align-items: center;justify-content: center;width: 100%;height: 100%}

.vd-step-body { min-width: 0 }

.vd-step-h .elementor-heading-title {margin-bottom: 2px}

.vd-step-t .elementor-widget-container,
.vd-step-t p {margin: 0}

/* -- Info rica: indicaciones + tecnología + cuidados -- */
.vd-rich { max-width: 880px }

.vd-rich .vd-h2:not(:first-child) .elementor-heading-title {margin-top: 22px}

.vd-rich-p .elementor-widget-container,
.vd-rich-p p {margin: 10px 0 4px}

.vd-indica ul {list-style: none;margin: 10px 0 6px;padding: 0;display: flex;flex-wrap: wrap;gap: 8px 28px}

.vd-indica li {position: relative;padding-left: 24px;flex: 1 1 300px}

.vd-indica li::before {content: '';position: absolute;left: 3px;top: 3px;width: 6px;height: 11px;transform: rotate(45deg)}

/* (FAQ acordeón <details/summary> retirado: el FAQ es ahora un widget
    nested-accordion nativo; ver skin .vd-faq-native más abajo) */

@media (max-width: 600px) {
  .vd-intro-cols { column-count: 1 }
  .vd-stepnum .vd-stepnum-t .elementor-widget-container {width: 38px;height: 38px}
}

/* -- FAQ (widget nested-accordion): tipografía, colores (pregunta/icono/respuesta)
      fondos y AHORA TAMBIÉN el borde (título+contenido, por-lado, per-state) son
      AJUSTES NATIVOS. Solo queda el recorte a esquinas y la sombra al abrir, que
      el widget nested-accordion NO expone a nivel de item. -- */
.vd-faq-native .e-n-accordion-item {
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .2s
}

.vd-faq-native .e-n-accordion-item[open] { box-shadow: 0 14px 34px rgba(110, 74, 133, .08) }

/* -- Imágenes de servicio (placeholder; el cliente las sustituye en Medios) -- */
.vd-svc-media,
.vd-info-media {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(135deg, #F3ECF7, #E3D4EA);
  box-shadow: 0 24px 54px rgba(110, 74, 133, .14)
}

.vd-svc-media {
  width: 100%;
  aspect-ratio: 2.2/1;
  margin: 8px 0 14px
}

.vd-info-media {
  aspect-ratio: 4/5;
  position: sticky;
  top: 120px;
  align-self: start
}

.vd-svc-media > .elementor-widget,
.vd-info-media > .elementor-widget {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0
}

.vd-svc-media > .elementor-widget > .elementor-widget-container,
.vd-info-media > .elementor-widget > .elementor-widget-container,
.vd-svc-media .elementor-image,
.vd-info-media .elementor-image,
.vd-svc-media figure,
.vd-info-media figure {
  width: 100%;
  height: 100%;
  margin: 0
}

.vd-svc-media img,
.vd-info-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border-radius: 0
}

/* -- Info en 2 columnas: el texto adapta su ancho junto a la imagen -- */
.vd-info-grid { align-items: start }

.vd-info-grid .vd-rich { max-width: none }

@media (max-width: 1024px) {
  /* En tablet, la tarjeta de cita baja debajo para que la intro use todo el ancho */
  .vd-content-grid { grid-template-columns: 1fr !important }
  /* "Qué incluye" e "Info" a 1 columna en tablet (evita columnas apretadas) */
  .vd-incgrid { grid-template-columns: 1fr !important }
  .vd-info-grid { grid-template-columns: 1fr !important }
  .vd-info-grid .vd-rich { max-width: 760px }
  .vd-info-media {
    position: static;
    width: 100%;
    max-width: 620px;
    aspect-ratio: 16/10;
    margin-top: 8px
  }
}

@media (max-width: 600px) {
  .vd-svc-media { aspect-ratio: 16/10 }
}