/* ==========================================================================
   FIXES visuales (auditoría)
   ========================================================================== */

/* Placeholders de imagen (equipo + historia) que rellenan su caja */
.vd-teamphoto,
.vd-story-img {
   position: relative;
   overflow: hidden
}

.vd-teamphoto>.elementor-widget,
.vd-story-img>.elementor-widget {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   margin: 0
}

.vd-teamphoto>.elementor-widget>.elementor-widget-container,
.vd-story-img>.elementor-widget>.elementor-widget-container {
   width: 100%;
   height: 100%
}

.vd-teamphoto .elementor-image,
.vd-story-img .elementor-image,
.vd-teamphoto figure,
.vd-story-img figure {
   width: 100%;
   height: 100%;
   margin: 0
}

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

/* Puntos "Qué incluye" del servicio en 2 columnas (como el diseño) */
.vd-points>.e-con {
   flex: 1 1 300px !important;
   min-width: 0;
   width: auto !important
}

/* Ficha de equipo: rol en morado + separación */
.vd-teamrole .elementor-widget-container,
.vd-teamrole .elementor-widget-container p {
   color: #8F65A0 !important;
   font-weight: 600;
   margin: 0
}

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

/* Historia: asegurar separación de párrafos y caja de cita */
.vd-story-text .elementor-widget {
   margin-bottom: 0
}

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

.vd-quote2 .elementor-widget-container {
   margin-top: 6px !important
}

/* Contenido de servicio: mantener tarjeta sticky al lado (no envolver) */
.vd-content-grid {
   flex-wrap: nowrap
}

/* Historia: caja de cita y separación de párrafos (reforzado) */
.vd-quote2 .elementor-widget-container {
   padding: 20px 24px !important;
   border-left: 4px solid #C97BA8 !important;
   background: #F7F1FB !important;
   border-radius: 0 14px 14px 0 !important
}

.vd-story-p .elementor-widget-container {
   margin-bottom: 18px !important
}

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

/* Breadcrumb: separación alrededor de la barra */
.vd-breadcrumb .sep {
   margin: 0 6px;
   opacity: .5
}

.vd-breadcrumb a,
.vd-breadcrumb .cur {
   white-space: nowrap
}

/* === Compatibilidad: clases del build HTML reutilizadas en widgets nativos === */
/* Botones: quitar el estilo de "pastilla" del WIDGET contenedor; el botón visible
   es el .elementor-button interno. Así se elimina el "doble botón". */
.elementor-widget-button.vd-headcta,
.elementor-widget-button.vd-cta-btn,
.elementor-widget-button.vd-btn-pink,
.elementor-widget-button.vd-btn-outline,
.elementor-widget-button.btn-online,
.elementor-widget-button.btn-tel {
   background: transparent !important;
   box-shadow: none !important;
   padding: 0 !important;
   border: 0 !important;
   border-radius: 0 !important;
   display: block
}

/* Topbar: número de teléfono (enlace) en blanco */
.vd-topbar-list .elementor-icon-list-item a,
.vd-topbar-list .elementor-icon-list-item a:hover,
.vd-topbar-list a {
   color: rgba(255, 255, 255, .92) !important
}

/* Botones: quitar la sombra rosa que se veía como un segundo botón */
.vd-headcta,
.vd-cta .vd-cta-btn,
.vd-headcta .elementor-button,
.vd-cta .vd-cta-btn .elementor-button {
   box-shadow: none !important
}

.vd-headcta .elementor-button,
.vd-cta .vd-cta-btn .elementor-button {
   box-shadow: 0 4px 12px rgba(201, 123, 168, .20) !important
}

/* Topbar: todo blanco, incluido el enlace del teléfono */
.vd-topbar-list,
.vd-topbar-list a,
.vd-topbar-list .elementor-icon-list-text,
.vd-topbar-list .elementor-icon-list-item,
.vd-topbar-list .elementor-icon-list-item * {
   color: rgba(255, 255, 255, .92) !important
}

.vd-topbar-list .elementor-icon-list-icon svg {
   fill: rgba(255, 255, 255, .92) !important
}

/* Sombra de botón sutil y neutra (elimina cualquier halo rosa) */
.vd-headcta .elementor-button,
.vd-cta .vd-cta-btn .elementor-button {
   box-shadow: 0 4px 14px rgba(36, 24, 24, .10) !important
}

/* Botón del formulario de contacto en rosa (no morado) */
.vd-formcard .elementor-button,
.vd-formcard button[type="submit"] {
   background: #C97BA8 !important
}

.vd-formcard .elementor-button:hover,
.vd-formcard button[type="submit"]:hover {
   background: #6E4A85 !important
}

/* ===== HERO: overlay fiable + blobs + tarjetas flotantes ===== */
.vd-hero {
   position: relative;
   overflow: hidden
}

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

.vd-hero-overlay {
   display: none
}

.vd-hero-inner {
   position: relative;
   z-index: 2
}

/* Blobs */
.vd-hero-blob {
   position: absolute;
   border-radius: 50%;
   filter: blur(8px);
   pointer-events: none;
   z-index: 1
}

.vd-hero-blob1 {
   width: 340px;
   height: 340px;
   right: 8%;
   top: 14%;
   background: radial-gradient(circle at 40% 40%, rgba(201, 123, 168, .45), rgba(201, 123, 168, 0) 70%);
   animation: vd-blob 18s ease-in-out infinite
}

.vd-hero-blob2 {
   width: 260px;
   height: 260px;
   left: -70px;
   bottom: -50px;
   background: radial-gradient(circle at 40% 40%, rgba(143, 101, 160, .45), rgba(143, 101, 160, 0) 70%);
   animation: vd-blob 22s ease-in-out infinite
}

/* Tarjetas glass flotantes (derecha) */
.vd-hero-cards {
   position: absolute;
   right: 0;
   top: 10%;
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
   gap: 18px;
   width: 330px;
   z-index: 3
}

.vd-hcard {
   display: flex;
   align-items: center;
   gap: 14px;
   background: rgba(255, 255, 255, .12);
   border: 1px solid rgba(255, 255, 255, .22);
   border-radius: 18px;
   padding: 16px 18px;
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   color: #fff;
   box-shadow: 0 20px 44px rgba(20, 10, 25, .25)
}

.vd-hcard:nth-child(1) {
   animation: vd-float 6s ease-in-out infinite
}

.vd-hcard:nth-child(2) {
   animation: vd-float 6.5s ease-in-out infinite .8s;
   margin-right: -28px
}

.vd-hcard:nth-child(3) {
   animation: vd-float 7s ease-in-out infinite 1.6s
}

.vd-hcard .ic {
   flex: none;
   width: 44px;
   height: 44px;
   border-radius: 12px;
   background: rgba(255, 255, 255, .18);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff
}

.vd-hcard .ic svg {
   width: 22px;
   height: 22px
}

.vd-hcard .t {
   font-family: 'Sora';
   font-weight: 600;
   font-size: 15px;
   color: #fff;
   line-height: 1.2
}

.vd-hcard .s {
   font-size: 12.5px;
   color: rgba(255, 255, 255, .78);
   margin-top: 3px
}



/* ===== Rejillas nativas (Elementor container grid) =====
   Estas clases tenían display:flex heredado del CSS antiguo; ahora los contenedores
   son grid nativos (columnas/responsive por ajustes de Elementor), así que anulamos
   el flex para que mande el grid. El gap/max-width/centrado se conservan. */
.vd-svcgrid,
.vd-whygrid,
.vd-techgrid,
.vd-teamgrid,
.vd-testis,
.vd-story,
.vd-contact,
.vd-seguros,
.vd-statswrap,
.vd-footer-grid,
.vd-points,
.vd-content-grid {
   display: grid
}

/* El espaciado cabecera→rejilla lo da el gap de la SECTION (40px), no el margen antiguo */
.vd-whygrid,
.vd-techgrid,
.vd-testis {
   margin-top: 0
}

/* Tarjeta sticky dentro del grid: alinear arriba (no estirar) para que el sticky funcione */
.vd-content-grid>.vd-ctacard {
   align-self: start
}

/* Header nav: layout horizontal (Elementor no carga su CSS de nav en este contexto de plantilla;
   tipografía/colores/underline SÍ son nativos del widget). */
.vd-navw {
   flex: 0 0 auto
}

.vd-navw .elementor-nav-menu {
   display: flex !important;
   flex-direction: row !important;
   flex-wrap: nowrap;
   gap: 30px;
   list-style: none;
   margin: 0;
   padding: 0
}

.vd-navw .elementor-nav-menu>li {
   width: auto;
   flex: none
}

.vd-navw .elementor-item {
   padding: 4px 1px
}

.vd-navw .elementor-menu-toggle {
   display: none !important
}

/* El submenú desplegable de "Servicios" lo renderiza y estiliza el propio widget
   nav-menu de Elementor (widget-nav-menu.min.css, ya encolado) a partir del menú
   de WordPress. La sección "Dropdown" del widget aporta fondo/tipografía/hover. */
/* Retrato de las fichas de equipo (/personnel/<slug>/).
   Reutilizan el contenedor .vd-svc-media, que es un banner 2.2/1 pensado para
   fotos de clínica en horizontal y recorta la cara en una foto en vertical. */
.vd-personphoto {
   aspect-ratio: 4/5;
   max-width: 420px
}

.vd-personphoto img {
   object-position: center 22%
}

@media (max-width:767px) {
   .vd-personphoto {
      max-width: none
   }
}