.elementor-kit-9{--e-global-color-primary:#33582F;--e-global-color-secondary:#9FB78C;--e-global-color-text:#221E19;--e-global-color-accent:#C0603A;--e-global-color-988cfaa:#F8F3E8;--e-global-color-d3afe42:#EBDFC7;--e-global-color-88ffe9c:#FFFDF8;--e-global-color-034e172:#221E19;--e-global-color-4f32d3d:#B0522F;--e-global-typography-primary-font-family:"Newsreader";--e-global-typography-primary-font-weight:300;--e-global-typography-secondary-font-family:"Manrope";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Manrope";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Manrope";--e-global-typography-accent-font-weight:600;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1400px;}.e-con{--container-max-width:1400px;--container-default-padding-top:100PX;--container-default-padding-right:4%;--container-default-padding-bottom:100PX;--container-default-padding-left:4%;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================
   ESPAI CALMA · SISTEMA DE BOTONES · CSS ÚNICO
   Fuente de verdad. No duplicar en ajustes de página,
   sección, widget ni en el Personalizador.
   ============================================ */

:root {
  /* Botón por defecto: secciones de fondo CLARO (crema/blanco) */
  --ec-btn-fondo: #E3EBDF;          /* verde claro, color fijo */
  --ec-btn-hover: #E3EBDF;          /* mismo: el hover no cambia el color */
  --ec-btn-texto: #221E19;
  --ec-btn-verde: #809A7B;          /* círculo de la flecha */
  --ec-btn-verde-hover: #809A7B;    /* mismo */
  --ec-btn-flecha: #F8F3E8;
}

/* Secciones con fondo oscuro, foto, vídeo o beige medio: botón crema.
   Se activa poniendo la clase en la sección/contenedor de Elementor.
   Las variables heredan hacia dentro; no hace falta más especificidad. */
.ec-fondo-oscuro {
  --ec-btn-fondo: #F8F3E8;
  --ec-btn-hover: #F8F3E8;
}

/* ---------- Base común ---------- */
:root body :is(.elementor .elementor-button.elementor-button, .ec-clinic__button, .ec-hero__cta, .ec-button) {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-height: 46px !important;
  padding: 5px 6px 5px 17px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ec-btn-fondo) !important;
  color: var(--ec-btn-texto) !important;
  font: 500 16px/1.35 'Manrope', Arial, sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  max-width: 100%;
  white-space: normal;
  box-shadow: none !important;
  cursor: pointer;
  transition: transform .4s ease;
}

/* Texto interno */
:root body :is(.elementor .elementor-button.elementor-button, .ec-clinic__button, .ec-hero__cta, .ec-button) span {
  color: var(--ec-btn-texto) !important;
  text-decoration: none !important;
}

/* Ocultar iconos existentes: una sola flecha por botón */
:root body :is(.elementor .elementor-button.elementor-button, .ec-clinic__button, .ec-hero__cta, .ec-button) :is(.elementor-button-icon, .ec-clinic__disc, .ec-hero__cta-icon) {
  display: none !important;
}

/* Círculo verde con flecha clara */
:root body :is(.elementor .elementor-button.elementor-button, .ec-clinic__button, .ec-hero__cta, .ec-button)::after {
  content: '' !important;
  display: block !important;
  position: static !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: var(--ec-btn-verde) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23F8F3E8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12m-5-5 5 5-5 5'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 15px 15px !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: transform .4s ease;
}

/* Hover: solo movimiento, sin cambio de color */
:root body :is(.elementor .elementor-button.elementor-button, .ec-clinic__button, .ec-hero__cta, .ec-button):hover {
  transform: translateY(-2px) !important;
  box-shadow: none !important;
  transition-delay: 0s !important;
}
:root body :is(.elementor .elementor-button.elementor-button, .ec-clinic__button, .ec-hero__cta, .ec-button):hover::after {
  transform: rotate(-35deg) !important;
}

:root body :is(.elementor .elementor-button.elementor-button, .ec-clinic__button, .ec-hero__cta, .ec-button):active {
  transform: translateY(0) !important;
}
:root body :is(.elementor .elementor-button.elementor-button, .ec-clinic__button, .ec-hero__cta, .ec-button):focus-visible {
  outline: 2px solid #33582F !important;
  outline-offset: 4px !important;
}

@media (prefers-reduced-motion: reduce) {
  :root body :is(.elementor .elementor-button.elementor-button, .ec-clinic__button, .ec-hero__cta, .ec-button),
  :root body :is(.elementor .elementor-button.elementor-button, .ec-clinic__button, .ec-hero__cta, .ec-button)::after {
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================
   DOS NIVELES DE BOTÓN (CRO)
   1) CTA de conversión (pedir cita / valoración / formulario):
      píldora verde bosque, texto crema, círculo crema con flecha verde.
   2) Navegación interna (ver centro, conocer a, ver terapia, ver ubicación...):
      enlace de texto con subrayado fino y flecha, sin fondo.
      Se activa con la clase .ec-btn-nav (en el enlace o en el widget Botón).
   ============================================ */
:root {
  --ec-cta-fondo: #33582F;
  --ec-cta-texto: #F8F3E8;
  --ec-cta-circulo: #F8F3E8;
  --ec-nav-texto: #33582F;
  --ec-nav-linea: rgba(51,88,47,.35);
}
.ec-fondo-oscuro {
  --ec-cta-fondo: #F8F3E8;
  --ec-cta-texto: #221E19;
  --ec-cta-circulo: #33582F;
  --ec-nav-texto: #F8F3E8;
  --ec-nav-linea: rgba(248,243,232,.5);
}

/* ---------- 1) CTA ---------- */
:root body :is(.elementor .elementor-button.elementor-button, .ec-clinic__button, .ec-hero__cta, .ec-button) {
  background: var(--ec-cta-fondo) !important;
  color: var(--ec-cta-texto) !important;
}
:root body :is(.elementor .elementor-button.elementor-button, .ec-clinic__button, .ec-hero__cta, .ec-button) span {
  color: var(--ec-cta-texto) !important;
}
:root body :is(.elementor .elementor-button.elementor-button, .ec-clinic__button, .ec-hero__cta, .ec-button)::after {
  background-color: var(--ec-cta-circulo) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2333582F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12m-5-5 5 5-5 5'/%3E%3C/svg%3E") !important;
}
:root body .ec-fondo-oscuro :is(.elementor .elementor-button.elementor-button, .ec-clinic__button, .ec-hero__cta, .ec-button)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23F8F3E8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12m-5-5 5 5-5 5'/%3E%3C/svg%3E") !important;
}

/* ---------- 2) NAVEGACIÓN ---------- */
:root body :is(.ec-btn-nav .elementor-button.elementor-button.elementor-button, .ec-btn-nav.ec-btn-nav.ec-btn-nav.ec-btn-nav:not(.elementor-element)) {
  min-height: 0 !important;
  gap: 8px !important;
  padding: 4px 0 5px !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ec-nav-texto) !important;
  font: 600 15px/1.35 'Manrope', Arial, sans-serif !important;
  transition: border-color .3s ease, gap .3s ease !important;
}
:root body :is(.ec-btn-nav .elementor-button.elementor-button.elementor-button, .ec-btn-nav.ec-btn-nav.ec-btn-nav.ec-btn-nav:not(.elementor-element)) span {
  color: var(--ec-nav-texto) !important;
}
:root body :is(.ec-btn-nav .elementor-button.elementor-button.elementor-button, .ec-btn-nav.ec-btn-nav.ec-btn-nav.ec-btn-nav:not(.elementor-element))::after {
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-size: 14px 14px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2333582F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12m-5-5 5 5-5 5'/%3E%3C/svg%3E") !important;
}
:root body .ec-fondo-oscuro :is(.ec-btn-nav .elementor-button.elementor-button.elementor-button, .ec-btn-nav.ec-btn-nav.ec-btn-nav.ec-btn-nav:not(.elementor-element))::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23F8F3E8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12m-5-5 5 5-5 5'/%3E%3C/svg%3E") !important;
}
:root body :is(.ec-btn-nav .elementor-button.elementor-button.elementor-button, .ec-btn-nav.ec-btn-nav.ec-btn-nav.ec-btn-nav:not(.elementor-element)):hover {
  transform: none !important;
  gap: 12px !important;
  border-bottom-color: var(--ec-nav-texto) !important;
}
:root body :is(.ec-btn-nav .elementor-button.elementor-button.elementor-button, .ec-btn-nav.ec-btn-nav.ec-btn-nav.ec-btn-nav:not(.elementor-element)):hover::after {
  transform: none !important;
}
/* Navegación: sin línea en reposo; el subrayado solo aparece al pasar el ratón *//* End custom CSS */