/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.4.1759245160
Updated: 2025-09-30 15:12:40

*/

/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.4.1759245160
Updated: 2025-09-30 15:12:40
*/

/* ===== icon slider infinito (Lato + marca) ===== */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700&display=swap");

:root{
  --brand:#05689D;
  --icons-duration:40s;
}

/* BLOG */
.postid-3095 h2,
.postid-3095 h3,
.postid-3095 h4,
.postid-3095 h5,
.postid-3476 h2,
.postid-3476 h3,
.postid-3476 h4,
.postid-3476 h5 {
  color: #05689D;
  font-weight: bold;
  margin-top: 30px;
}


/* CALL TO ACTION */
.cta-bottom-bar {
   mask-image: url('https://moofclinic.com/wp-content/uploads/2025/10/background-call-to-action-moofclinic.svg');
  -webkit-mask-image: url('https://moofclinic.com/wp-content/uploads/2025/10/background-call-to-action-moofclinic.svg');
  mask-repeat: no-repeat;
  mask-size: cover;
  -webkit-mask-position-x: center;
  mask-position: center;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px) brightness(0.97);
  -webkit-backdrop-filter: blur(10px) brightness(0.97);
  box-shadow: 0 0 20px rgba(0,0,0,0.15);
}

/* CONTACTO */
/* color del placeholder */
input[type="date"]::placeholder,
input[type="email"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="text"]::placeholder,
input[type="url"]::placeholder,
select::placeholder,
textarea::placeholder {
  color: #0567a1;
  opacity: 1; /* asegura que el color se vea igual en todos los navegadores */
}

/* para compatibilidad con algunos navegadores antiguos */
input[type="date"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
input[type="number"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder,
input[type="search"]::-webkit-input-placeholder,
input[type="tel"]::-webkit-input-placeholder,
input[type="text"]::-webkit-input-placeholder,
input[type="url"]::-webkit-input-placeholder,
select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #0567a1;
}

input[type="date"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder,
input[type="number"]:-ms-input-placeholder,
input[type="password"]:-ms-input-placeholder,
input[type="search"]:-ms-input-placeholder,
input[type="tel"]:-ms-input-placeholder,
input[type="text"]:-ms-input-placeholder,
input[type="url"]:-ms-input-placeholder,
select:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #0567a1;
}

input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {margin: 5px 0;background: transparent;border-radius: 25px;border: 1px solid #0567A1;}
[type=submit] {border: 1px solid #70B9F3;border-radius: 25px;color: #ffffff;background: #0667A1;width: 100%;}
[type=submit]:hover {background: #ffffff;color:#0667A1;}

.icon-slider-container{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 20px 0;
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  cursor: default;
}

/* al pasar el ratón: mano y pausa (el JS también pausa al entrar) */
.icon-slider-container:hover{ cursor: pointer; }

.icon-slider-wrapper{
  overflow: hidden;
  position: relative;
}

.icon-slider{
  display: flex;
  align-items: center;
  gap: 40px;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  --drag-x: 0px;                 /* offset en px, controlado por JS al arrastrar */
  animation: scrollIcons var(--icons-duration) linear infinite;
  -webkit-font-smoothing: antialiased;
}

.icon-item{
  flex: 0 0 10%; /* ~8 visibles en desktop */
  text-align: center;
  backface-visibility: hidden;
  user-select: none;
  -webkit-user-drag: none;
}

.icon{
  width: 80px;
  height: 80px;
  color: var(--brand);
  stroke-width: 0.8px;
  pointer-events: none;
}

.icon-title{
  font-size: 20px;
  line-height: 25px;
  color: var(--brand);
  margin-top: 10px;
  text-align: center;
  font-weight: 600;
}

/* responsive */
@media (max-width:1024px){
  .icon-item{ flex: 0 0 20%; } /* 5 visibles */
}
@media (max-width:767px){
  .icon-item{ flex: 0 0 30%; } /* 3 visibles */
  .icon-slider{ --icons-duration: 10s; } /* más rápido en móvil */
}

/* animación infinita: el contenido está duplicado por JS, por eso -50% */
@keyframes scrollIcons{
  from{ transform: translateX(calc(var(--drag-x) + 0%)); }
  to  { transform: translateX(calc(var(--drag-x) - 50%)); }
}

/* flechas laterales */
.icon-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  cursor: pointer;
  z-index: 2;
  padding: 0;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--brand);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transition: transform .15s ease;
}
.icon-arrow:hover{ transform: translateY(-50%) scale(1.05);background: #72AFED; }
.icon-arrow:active{ transform: translateY(-50%) scale(0.96); }
.icon-arrow.left{ left: 10px; }
.icon-arrow.right{ right: 10px; }
.icon-arrow svg{
  width: 22px; height: 22px;
  fill: #fff; display: block; pointer-events: none;
}

/* degradados laterales */
.icon-slider-container::before,
.icon-slider-container::after{
  content:"";
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.icon-slider-container::before{
  left:0;  background: linear-gradient(to right, #fff 0%, transparent 100%);
}
.icon-slider-container::after{
  right:0; background: linear-gradient(to left, #fff 0%, transparent 100%);
}

/* accesibilidad: respeta motion reducido */
@media (prefers-reduced-motion: reduce){
  .icon-slider{ animation: none; }
}

/* ====== MENÚ TABS DESLIZANTE ====== */
#menu-slide {
  position: relative;
  --moof-brand: #05689D;
  --moof-bg: #05689D;
  --moof-text: #ffffff;
  --moof-text-muted: rgba(255,255,255,.75);
  --moof-gap: 10px;
  --edge-w: 15%;
}

/* contenedor interno generado por JS */
#menu-slide .moof-tabs-wrap {
  position: relative;
  overflow: hidden; /* ocultamos los overlays dentro */
  padding: 8px 0; /* respiro vertical */
}

/* carrusel horizontal */
#menu-slide .moof-tabs {
  display: flex;
  gap: var(--moof-gap);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 6px 48px; /* espacio para las flechas */
}

/* ocultar scrollbar (manteniendo accesibilidad) */
#menu-slide .moof-tabs::-webkit-scrollbar { height: 0; }
#menu-slide .moof-tabs { scrollbar-width: none; }

/* botón de tab */
#menu-slide .moof-tab-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  font: 600 18px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--moof-text);
  background: rgba(5,104,157,.18);
  letter-spacing: .2px;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  cursor: pointer;
  border:0;
  border-color:transparent;
}

#menu-slide .moof-tab-btn:hover {
  background: rgba(5,104,157,.28);
  color: #73B0ED;
  transform: translateY(-1px);
}

#menu-slide .moof-tab-btn[aria-selected="true"] {
  border: 0;
  border-color:transparent;
  color: #73B0ED;
}

/* overlays degradados laterales */
#menu-slide .moof-edge {
  position: absolute;
  top: 0; bottom: 0;
  width: var(--edge-w);
  pointer-events: none; /* las flechas internas vuelven a activar eventos */
}

#menu-slide .moof-edge.left {
  left: 0;
  background: linear-gradient(90deg, var(--moof-bg) 0%, rgba(5,104,157,0) 100%);

}

#menu-slide .moof-edge.right {
  right: 0;
  background: linear-gradient(270deg, var(--moof-bg) 0%, rgba(5,104,157,0) 100%);
}

/* botones flecha */
#menu-slide .moof-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  cursor: pointer;
  pointer-events: auto; /* activamos click */
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
  backdrop-filter: blur(4px);
  border:0;
  background:transparent;
}

#menu-slide .moof-arrow:hover { background: transparent; transform: translateY(-50%) scale(1.04); }
#menu-slide .moof-arrow:active { transform: translateY(-50%) scale(.98); }

#menu-slide .moof-arrow.left  { left: 8px; }
#menu-slide .moof-arrow.right { right: 8px; }

/* icono chevrón (blanco minimalista con bordes) */
#menu-slide .moof-arrow::before {
  content: "";
  display: block;
  width: 10px; height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

#menu-slide .moof-arrow.left::before  { transform: rotate(-135deg); }
#menu-slide .moof-arrow.right::before { transform: rotate(45deg); }

/* ====== BLOQUES DE CONTENIDO (mostrar/ocultar) ====== */
/* ocultamos por defecto; el JS mostrará el activo */
#block-osteopatia,
#block-podologia,
#block-nutricion-integral,
#block-pilates,
#block-acondicionamiento-fisico,
#block-psicologia,
#block-tecnologia,
#block-revisiones-deportivas {
  display: none;
}

/* reforzamos el activo por si quieres un estilo particular (opcional) */
.elementor-section.moof-tab-active {
  animation: moofFade .24s ease;
}
@keyframes moofFade {
  from { opacity: .001; transform: translateY(6px); }
  to   { opacity: 1;    transform: translateY(0); }
}

#menu-slide .moof-tabs.is-dragging { cursor: grabbing; user-select: none; }
#menu-slide .moof-tab-btn { user-select: none; }
/* opcional, en style.css */
#menu-slide .moof-tabs.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select:none; }
#menu-slide .moof-tab-btn { user-select: none; -webkit-user-select:none; touch-action: manipulation; }


/* ====== MENÚ TABS DESLIZANTE EQUIPO ====== */
#menu-slide-equipo {
  position: relative;
  --moof-brand: #05689D;
  --moof-bg: #05689D;
  --moof-text: #ffffff;
  --moof-text-muted: rgba(255,255,255,.75);
  --moof-gap: 10px;
  --edge-w: 15%;
}

/* contenedor interno generado por JS */
#menu-slide-equipo .moof-tabs-wrap {
  position: relative;
  overflow: hidden; /* ocultamos los overlays dentro */
  padding: 8px 0; /* respiro vertical */
}

/* carrusel horizontal */
#menu-slide-equipo .moof-tabs {
  display: flex;
  gap: var(--moof-gap);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 6px 48px; /* espacio para las flechas */
}

/* ocultar scrollbar (manteniendo accesibilidad) */
#menu-slide-equipo .moof-tabs::-webkit-scrollbar { height: 0; }
#menu-slide-equipo .moof-tabs { scrollbar-width: none; }

/* botón de tab */
#menu-slide-equipo .moof-tab-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  font: 600 18px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--moof-text);
  background: rgba(5,104,157,.18);
  letter-spacing: .2px;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  cursor: pointer;
  border:0;
  border-color:transparent;
}

#menu-slide-equipo .moof-tab-btn:hover {
  background: rgba(5,104,157,.28);
  color: #73B0ED;
  transform: translateY(-1px);
}

#menu-slide-equipo .moof-tab-btn[aria-selected="true"] {
  border: 0;
  border-color:transparent;
  color: #73B0ED;
}

/* overlays degradados laterales */
#menu-slide-equipo .moof-edge {
  position: absolute;
  top: 0; bottom: 0;
  width: var(--edge-w);
  pointer-events: none; /* las flechas internas vuelven a activar eventos */
}

#menu-slide-equipo .moof-edge.left {
  left: 0;
  background: linear-gradient(90deg, var(--moof-bg) 0%, rgba(5,104,157,0) 100%);
}

#menu-slide-equipo .moof-edge.right {
  right: 0;
  background: linear-gradient(270deg, var(--moof-bg) 0%, rgba(5,104,157,0) 100%);
}

/* botones flecha */
#menu-slide-equipo .moof-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  cursor: pointer;
  pointer-events: auto; /* activamos click */
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
  backdrop-filter: blur(4px);
  border:0;
  background:transparent;
}

#menu-slide-equipo .moof-arrow:hover { background: transparent; transform: translateY(-50%) scale(1.04); }
#menu-slide-equipo .moof-arrow:active { transform: translateY(-50%) scale(.98); }

#menu-slide-equipo .moof-arrow.left  { left: 8px; }
#menu-slide-equipo .moof-arrow.right { right: 8px; }

/* icono chevrón (blanco minimalista con bordes) */
#menu-slide-equipo .moof-arrow::before {
  content: "";
  display: block;
  width: 10px; height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

#menu-slide-equipo .moof-arrow.left::before  { transform: rotate(-135deg); }
#menu-slide-equipo .moof-arrow.right::before { transform: rotate(45deg); }

/* ====== BLOQUES DE CONTENIDO EQUIPO (mostrar/ocultar) ====== */
/* ocultamos por defecto; el JS mostrará el activo */
#fisioterapeutas,
#entrenador,
#psicologa,
#podologo,
#coach,
#nutricionista {
  display: none;
}

/* reforzamos el activo por si quieres un estilo particular (opcional) */
.elementor-section.moof-tab-active {
  animation: moofFade .24s ease;
}
@keyframes moofFade {
  from { opacity: .001; transform: translateY(6px); }
  to   { opacity: 1;    transform: translateY(0); }
}

/* drag en escritorio */
#menu-slide-equipo .moof-tabs.is-dragging { 
  cursor: grabbing; 
  user-select: none; 
  -webkit-user-select:none;
}
#menu-slide-equipo .moof-tab-btn { 
  user-select: none; 
  -webkit-user-select:none; 
  touch-action: manipulation; 
}

/* moof tabs: barra desplazable + estados */
.moof-tabs{
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.moof-tabs__scroller{
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.moof-tabs__scroller::-webkit-scrollbar{
  display: none;
}

.moof-tab{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  color: #05689D;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  scroll-snap-align: center;
  transition: transform .15s ease, color .15s ease, background-color .15s ease, font-weight .15s ease;
}

.moof-tab:hover{
  background-color: #05689D;
  color: #73B0ED;
  transform: translateY(-1px);
}

.moof-tab.is-active{
  background-color: #05689D;
  color: #73B0ED;
  font-weight: 700;
}

/* fade laterales (10% de cada lado) */
:root{
  --moof-tabs-bg: #fff; /* cambia si tu fondo no es blanco */
}

.moof-tabs__fade{
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10%;
  z-index: 2;
}

.moof-tabs__fade--left{
  left: 0;
  background: linear-gradient(to right, var(--moof-tabs-bg) 0%, rgba(255,255,255,0) 100%);
}

.moof-tabs__fade--right{
  right: 0;
  background: linear-gradient(to left, var(--moof-tabs-bg) 0%, rgba(255,255,255,0) 100%);
}

/* mobile: arranque a la izquierda para que se pueda deslizar mejor */
@media (max-width: 767px){
  .moof-tabs__scroller{
    justify-content: flex-start;
    padding: 10px 8px;
  }
  .moof-tab{
    padding: 10px 12px;
    font-size: 20px;
  }
}

/* tabs content: transición suave al mostrar/ocultar secciones */
.moof-tab-section{
  display: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}

.moof-tab-section.is-active{
  display: block;
}

.moof-tab-section.is-active.is-visible{
  opacity: 1;
  transform: translateY(0);
}