/* ==========================================================================
   Valencia Dental — Cirugía e Implantología (réplica exacta del diseño DC)
   Cargado globalmente vía mu-plugin. Todo el look & animaciones viven aquí.
   ========================================================================== */

:root {
   --vd-ink: #241818;
   --vd-primary: #6E4A85;
   --vd-primary2: #8F65A0;
   --vd-pink: #C97BA8;
   --vd-lilac: #C9B3D6;
   --vd-l1: #F3ECF7;
   --vd-l2: #F7F1FB;
   --vd-l3: #E3D4EA;
   --vd-border: #EFE6F5;
   /* Ancho de contenido unificado en TODA la web (misma alineación de bordes
      en todas las páginas Elementor). Cambia solo este valor para reajustar. */
   --vd-cw: 1200px;
}

/* ---- Base ---------------------------------------------------------------- */
body {
   font-family: 'DM Sans', system-ui, sans-serif;
   color: #241818;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility
}

html {
   scroll-behavior: smooth
}

.vd-scope a {
   color: #6E4A85;
   text-decoration: none
}

.vd-scope a:hover {
   color: #C97BA8
}

::selection {
   background: #E3D4EA;
   color: #241818
}

/* Neutraliza padding de contenedores Elementor para secciones full-bleed */
.elementor-location-header .e-con,
.elementor-location-footer .e-con {
   --padding-top: 0;
   --padding-bottom: 0;
   --padding-left: 0;
   --padding-right: 0
}

.vd-section>.e-con-inner,
.vd-section.e-con {
   --padding-top: 0;
   --padding-bottom: 0;
   --padding-left: 0;
   --padding-right: 0
}

.elementor-widget-html .elementor-widget-container {
   padding: 0
}

/* ---- Reveal + keyframes -------------------------------------------------- */
/* Animación de entrada (fade-up al hacer scroll) = sistema PROPIO (CSS + app.js).
   Se mantiene en CSS/JS (NO nativo de Elementor) a propósito: la animación de
   entrada nativa de Elementor deja el contenido oculto (elementor-invisible)
   hasta que entra en viewport y no tiene salvaguarda; este sistema, gateado tras
   html.vd-js, garantiza que el contenido SIEMPRE es visible si el JS falla, y
   revela todo con un timeout de seguridad. */
html.vd-js .vd-reveal {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
   will-change: opacity, transform
}

html.vd-js .vd-reveal.vd-in {
   opacity: 1;
   transform: none
}

@keyframes vd-blob {
   0% {
      transform: translate(0, 0) scale(1)
   }

   33% {
      transform: translate(24px, -26px) scale(1.08)
   }

   66% {
      transform: translate(-20px, 18px) scale(.94)
   }

   100% {
      transform: translate(0, 0) scale(1)
   }
}

@keyframes vd-pulse {
   0% {
      box-shadow: 0 0 0 0 rgba(37, 211, 102, .5)
   }

   70% {
      box-shadow: 0 0 0 16px rgba(37, 211, 102, 0)
   }

   100% {
      box-shadow: 0 0 0 0 rgba(37, 211, 102, 0)
   }
}

@keyframes vd-float {
   0% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-10px)
   }

   100% {
      transform: translateY(0)
   }
}

@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto
   }

   .vd-reveal {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important
   }

   * {
      animation: none !important
   }
}

/* ==========================================================================
   HEADER (plantilla global Elementor -> wrapper fijo)
   ========================================================================== */
[data-elementor-type="header"] {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   width: 100%;
   z-index: 200
}

/* Barra superior morada (teléfono/dirección/horario): se colapsa al hacer
   scroll hacia abajo y reaparece al volver arriba. app.js pone .vd-scrolled
   en el header cuando scrollY > 10. */
.vd-topbar-wrap {
   overflow: hidden;
   max-height: 60px;
   transition: max-height .4s ease, opacity .3s ease
}

[data-elementor-type="header"].vd-scrolled .vd-topbar-wrap {
   max-height: 0;
   opacity: 0
}

.vd-burger {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 46px;
   height: 46px;
   border-radius: 12px;
   border: none;
   background: #F3ECF7;
   color: #6E4A85;
   cursor: pointer
}

.vd-burger:hover {
   background: #6E4A85;
   color: #F3ECF7
}

/* (Menú móvil off-canvas retirado: ahora es un POPUP NATIVO de Elementor Pro
    que abre `.vd-burger` vía open_selector.) */

/* ---- Scroll progress bar ------------------------------------------------- */
.vd-progress {
   position: fixed;
   top: 0;
   left: 0;
   height: 3px;
   width: 0%;
   background: linear-gradient(90deg, #8F65A0, #C97BA8);
   z-index: 300
}

/* ==========================================================================
   PAGE SECTIONS
   ========================================================================== */
.vd-section {
   width: 100%
}

/* ---- Banner -------------------------------------------------------------- */
.vd-banner {
   position: relative;
   overflow: hidden;
   padding: clamp(150px, 17vw, 190px) clamp(20px, 5vw, 48px) clamp(52px, 7vw, 76px)
}

.vd-banner .vd-blob {
   position: absolute;
   right: -70px;
   top: 20%;
   width: 280px;
   height: 280px;
   border-radius: 50%;
   background: radial-gradient(circle at 40% 40%, rgba(201, 123, 168, .4), rgba(201, 123, 168, 0) 70%);
   filter: blur(4px);
   animation: vd-blob 18s ease-in-out infinite;
   pointer-events: none
}

.vd-banner-inner {
   max-width: var(--vd-cw);
   margin: 0 auto;
   position: relative
}

.vd-breadcrumb {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
   font-size: 13.5px;
   font-weight: 600;
   color: #8F65A0;
   margin-bottom: 20px
}

.vd-breadcrumb a {
   color: #8F65A0
}

.vd-breadcrumb .sep {
   opacity: .5
}

.vd-breadcrumb .cur {
   color: #6E4A85
}

.vd-titlerow {
   display: flex;
   align-items: center;
   gap: 18px;
   flex-wrap: wrap
}

.vd-titleicon {
   width: 64px;
   height: 64px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex: none
}

.vd-banner .vd-lead {
   margin: 18px 0 0;
   max-width: 640px
}

/* ---- Content ------------------------------------------------------------- */
.vd-content {
   padding: clamp(52px, 7vw, 90px) clamp(20px, 5vw, 48px)
}

.vd-content-grid {
   max-width: var(--vd-cw);
   margin: 0 auto;
   display: flex;
   gap: clamp(32px, 5vw, 56px);
   align-items: flex-start
}

.vd-content-main {
   flex: 1 1 auto;
   min-width: 0
}

.vd-content-grid>.vd-ctacard {
   flex: 0 0 300px
}

.vd-eyebrow {
   margin-bottom: 14px
}

/* (.vd-content p.p1/.p2 y h2.vd-h2: migrados a ajustes nativos del widget) */

.vd-points {
   display: flex;
   flex-wrap: wrap;
   gap: 14px
}

.vd-point {
   flex: 1 1 240px;
   min-width: 220px;
   display: flex;
   gap: 12px;
   align-items: flex-start
}

.vd-point .chk {
   flex: none;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #fff;
   color: #8F65A0;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 12px rgba(110, 74, 133, .12)
}

/* Móvil: la tarjeta en columna (icono arriba) con el check centrado horizontalmente.
   !important para ganar a las variables flex del contenedor de Elementor. */
@media (max-width: 767px) {
   .vd-point { flex-direction: column !important }
   .vd-point .chk { align-self: center !important }
}

/* (.vd-point .txt: sin clase real; el texto usa vd-inc-t nativo) */

.vd-quote {
   margin-top: 34px
}

.vd-quote p {
   margin: 0
}

.vd-ctacard {
   color: #fff
}

/* (.vd-ctacard h3/.lead/.btn-online/.btn-tel/.info raw: obsoletos; la tarjeta
    usa widgets nativos card-h3/card-lead/btn-online/btn-tel/card-info) */

/* ---- Otras especialidades ------------------------------------------------ */
.vd-otras {
   padding: clamp(48px, 6vw, 80px) clamp(20px, 5vw, 48px)
}

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

.vd-pills {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   justify-content: center
}

.vd-otras .vd-alllink {
   text-align: center;
   margin-top: 28px
}

.vd-otras .vd-alllink a {
   display: inline-flex;
   align-items: center;
   gap: 7px
}

/* ---- CTA band ------------------------------------------------------------ */
.vd-cta {
   padding: clamp(56px, 8vw, 90px) clamp(20px, 5vw, 48px);
   color: #fff;
   position: relative;
   overflow: hidden
}

.vd-cta .vd-blob {
   position: absolute;
   right: -60px;
   top: -60px;
   width: 260px;
   height: 260px;
   border-radius: 50%;
   background: radial-gradient(circle at 40% 40%, rgba(201, 123, 168, .5), rgba(201, 123, 168, 0) 70%);
   filter: blur(6px);
   animation: vd-blob 19s ease-in-out infinite;
   pointer-events: none
}

.vd-cta-inner {
   max-width: 760px;
   margin: 0 auto;
   text-align: center;
   position: relative
}

/* (.vd-cta h2/p/.vd-cta-btn: migrados a ajustes nativos del widget) */

/* ==========================================================================
   FOOTER (plantilla global Elementor)
   ========================================================================== */

/* ---- WhatsApp floating button ------------------------------------------- */
.vd-wa {
   position: fixed;
   right: 22px;
   bottom: 22px;
   z-index: 180;
   width: 58px;
   height: 58px;
   border-radius: 50%;
   background: #25D366;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 10px 30px rgba(37, 211, 102, .45);
   animation: vd-pulse 2.6s ease-out infinite;
   transition: transform .25s ease
}

.vd-wa:hover {
   transform: scale(1.08);
   color: #fff
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:600px) {
   .vd-titleicon {
      width: 54px;
      height: 54px
   }
}

/* ==========================================================================
   NATIVE ELEMENTOR WIDGETS — overrides para que los widgets nativos
   (nav-menu, icon, icon-list, heading, text-editor, button, image) rindan
   idénticos al diseño. Los contenedores usan las clases vd-* de arriba.
   ========================================================================== */

/* Reset de wrappers de widget para layout preciso */
.vd-scope .elementor-widget {
   margin: 0
}

.vd-w-reset .elementor-widget-container {
   padding: 0;
   margin: 0
}



/* (titleicon icon, banner h1, eyebrow, h2: migrados a ajustes nativos del widget) */

/* ---- Point cards: el círculo blanco lo dibuja el contenedor .chk (arriba).
        El .elementor-icon interior es solo el envoltorio del check: transparente
        y centrado, para NO duplicar el círculo/sombra (antes se veían 2 discos). */
.vd-point .chk .elementor-icon {
   width: auto;
   height: auto;
   background: transparent;
   color: #8F65A0;
   border-radius: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: none
}

.vd-point .chk .elementor-icon svg {
   width: 20px;
   height: 20px
}

/* (point .txt, ctacard card-h3/card-lead/botones/card-info, otras-h2, cta-h2/sub,
    vd-cta-btn: migrados a ajustes nativos del widget) */

/* ---- Sticky CTA card: layout interno de la lista de info (estructural) ---- */
.vd-ctacard .card-info .elementor-icon-list-items {
   display: flex;
   flex-direction: column;
   gap: 12px
}

/* ---- text-editor / heading spacing overrides (native) ---- */
.vd-breadcrumb .elementor-widget-container {
   margin-bottom: 20px
}

.vd-breadcrumb p {
   margin: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   align-items: center
}

.vd-lead .elementor-widget-container {
   max-width: 640px
}

.vd-lead p {
   margin: 0
}

.vd-content-main {
   gap: 0
}

.vd-content-main .vd-eyebrow .elementor-widget-container {
   margin-bottom: 14px
}

.vd-content-main .p1-w p {
   margin: 0 0 18px
}

.vd-content-main .p2-w p {
   margin: 0 0 34px
}

.vd-content-main .vd-h2 .elementor-widget-container {
   margin: 0 0 22px
}

.vd-quote {
   margin-top: 34px
}

.vd-quote p {
   margin: 0
}

.vd-ctacard {
   gap: 0
}

.vd-ctacard .card-h3 .elementor-widget-container {
   margin-bottom: 10px
}

.vd-ctacard .card-lead .elementor-widget-container {
   margin-bottom: 22px
}

.vd-ctacard .card-lead p {
   margin: 0
}

.vd-ctacard .btn-online .elementor-widget-container {
   margin-bottom: 12px
}

.vd-ctacard .card-info {
   margin-top: 22px;
   padding-top: 20px;
   border-top: 1px solid rgba(255, 255, 255, .15)
}

.vd-cta-inner .cta-sub .elementor-widget-container {
   margin: 0 0 30px
}

.vd-cta-inner .cta-h2 .elementor-widget-container {
   margin: 0 0 16px
}

.vd-cta-inner .cta-sub p {
   margin: 0
}

.vd-alllink .elementor-widget-container {
   text-align: center;
   margin-top: 28px
}

.vd-alllink a {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   color: #6E4A85;
   font-weight: 600;
   font-size: 15px
}

.vd-alllink p {
   margin: 0
}

/* ---- pills como nav-menu ---- */
.vd-pills-nav .elementor-nav-menu {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   justify-content: center
}

.vd-pills-nav .elementor-item {
   background: #fff !important;
   border: 1px solid #EFE6F5;
   border-radius: 999px;
   padding: 11px 20px !important;
   font-size: 14.5px;
   font-weight: 600;
   color: #6E4A85 !important;
   transition: transform .2s ease, box-shadow .2s ease
}

.vd-pills-nav .elementor-item:hover {
   transform: translateY(-2px);
   box-shadow: 0 10px 24px rgba(110, 74, 133, .12)
}

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

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