/* ==========================================================================
   Animaciones desactivadas en bloques concretos
   ========================================================================== */
#rec2369781591.r_anim {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}
.uc-no-anim-footer.r_anim,
.uc-no-anim-footer .r_anim {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* ==========================================================================
   Botones de las tarjetas (sc-card)
   ========================================================================== */
#allrecords a.sc-card__btn--primary,
#allrecords a.sc-card__btn--primary:link,
#allrecords a.sc-card__btn--primary:visited,
#allrecords a.sc-card-b__btn--primary,
#allrecords a.sc-card-b__btn--primary:link,
#allrecords a.sc-card-b__btn--primary:visited {
  background: linear-gradient(135deg, #F4BCAF 0%, #FBD9CD 100%) !important;
  color: #282828 !important;
  border-color: transparent !important;
}
#allrecords a.sc-card__btn--primary:hover,
#allrecords a.sc-card__btn--primary:active,
#allrecords a.sc-card-b__btn--primary:hover,
#allrecords a.sc-card-b__btn--primary:active {
  background: transparent !important;
  color: #282828 !important;
  border-color: #f3b8aa !important;
}
#allrecords a.sc-card__btn--outline,
#allrecords a.sc-card__btn--outline:link,
#allrecords a.sc-card__btn--outline:visited,
#allrecords a.sc-card-b__btn--outline,
#allrecords a.sc-card-b__btn--outline:link,
#allrecords a.sc-card-b__btn--outline:visited {
  color: #282828 !important;
}
#allrecords a.sc-card__btn--outline:hover,
#allrecords a.sc-card__btn--outline:active,
#allrecords a.sc-card-b__btn--outline:hover,
#allrecords a.sc-card-b__btn--outline:active {
  background: #F4BCAF !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

#allrecords .t-contact-method__title {
  font-family: 'Commissioner', sans-serif;
  font-weight: 300;
}

/* ==========================================================================
   Protecciones generales
   ========================================================================== */

/* Protección global de TODO el texto del sitio contra el autoescalado */
#allrecords, #allrecords * {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* Banner: límite estricto de tamaño en pantallas extremadamente estrechas para mantener exactamente 2 líneas */
@media (max-width: 340px) {
  #rec2296307871 .t1241__title {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
}

/* Protección adicional para las tarjetas */
#allrecords .hp-card,
#allrecords .hp-services__item {
  min-width: 0 !important;
}

/* Protección general contra overflow horizontal */
html, body {
  overflow-x: hidden;
}

/* Cabecera en pantallas extremadamente estrechas (320px con texto "Aumentado"): sin saltos de línea */
@media (max-width: 340px) {
  #allrecords .t-menu-base__imglogo {
    max-width: 68px !important;
    width: 68px !important;
  }

  #allrecords .t-sociallinks__wrapper {
    font-size: 10px !important;
  }

  #allrecords .t-sociallinks__item a {
    width: 22px !important;
    height: 22px !important;
  }

  #allrecords .t-sociallinks__svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* ==========================================================================
   Colores de las redes sociales
   ========================================================================== */
#allrecords .t-sociallinks__item_maxmessenger svg path {
  fill: #5181F2 !important;
}
#allrecords .t-sociallinks__item_telegram svg path {
  fill: #229ED9 !important;
}
#allrecords .t-sociallinks__item_whatsapp svg path {
  fill: #25D366 !important;
}
#allrecords .t-sociallinks__item_vk svg path {
  fill: #0077FF !important;
}
#allrecords .t-sociallinks__item_ok svg path {
  fill: #EE8208 !important;
}

/* ==========================================================================
   Banner: posición y estilo de las dos ramas decorativas (SVG)
   ========================================================================== */
#rec2288989931 .t1241__container {
  position: relative;
  z-index: 0;
}
#rec2288989931 .t-col_5,
#rec2288989931 .t1241__image {
  position: relative;
  z-index: 2;
}
#rec2288989931 .leaf-branch {
  position: absolute;
  z-index: 1;
  color: #282828;
  opacity: 0.18;
  pointer-events: none;
}
#rec2288989931 .leaf-branch-left {
  left: 0;
  bottom: 0;
  width: 180px;
}
#rec2288989931 .leaf-branch-right {
  right: 0;
  top: 0;
  width: 180px;
  transform: scaleX(-1);
}
@media (max-width: 979px) {
  #rec2288989931 .leaf-branch-left,
  #rec2288989931 .leaf-branch-right {
    width: 120px;
  }
}
@media (max-width: 479px) {
  #rec2288989931 .leaf-branch-right {
    display: none;
  }
  #rec2288989931 .leaf-branch-left {
    width: 80px;
    left: -10px;
    bottom: -10px;
  }
}

/* ==========================================================================
   Menú superior: líneas a ancho completo
   ========================================================================== */
#allrecords .t967__linewrapper {
  overflow: visible;
}
#allrecords .t967__horizontalline {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
}

/* ==========================================================================
   Menú desplegable "Servicios" (bloque ME601B)
   ========================================================================== */

/* Escritorio: orden y ancho del panel.
   Con display:flex !important el panel está siempre en la página, por eso
   cuando está cerrado (sin la clase _show) se vuelve invisible y no recibe
   clics ni hover; así no tapa los sliders ni los enlaces que hay debajo */
@media screen and (min-width: 980px) {
  #allrecords .t978__tooltip-menu {
    left: max(20px, calc((100vw - 1200px) / 2)) !important;
    right: auto !important;
    width: min(1200px, calc(100vw - 40px)) !important;
    max-width: min(1200px, calc(100vw - 40px)) !important;
    display: flex !important;
    flex-direction: row !important;
  }
  #allrecords .t978__tooltip-menu:not(.t978__tooltip-menu_show) {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  #allrecords .t978__tooltip-menu .t978__menu {
    order: 1 !important;
    flex-shrink: 0 !important;
  }
  #allrecords .t978__tooltip-menu .t978__innermenu {
    order: 2 !important;
    flex-grow: 1 !important;
  }
}

/* Elimina el scroll nativo duplicado, dejando solo el scroll personalizado */
#allrecords .t978__tooltip-menu .t978__innermenu {
  overflow-y: visible !important;
  max-height: none !important;
}
/* Anula el scroll automático que Tilda añade por su cuenta (inline) en categorías con listas largas,
   para que quede un único scroll (el nuestro, a nivel de .t978__innermenu-list).
   Además estira el fondo gris de la columna derecha hasta ocupar toda la altura del panel (evita franja blanca abajo) */
#allrecords .t978__tooltip-menu .t978__innermenu-wrapper {
  overflow-y: visible !important;
  height: 100% !important;
}
#allrecords .t978__tooltip-menu .t978__innermenu-content {
  height: 100% !important;
}

/* Más espacio vertical entre los elementos de ambas listas */
#allrecords .t978__menu-item,
#allrecords .t978__innermenu-item {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* ==========================================================================
   Tarjetas de la sección de servicios
   ========================================================================== */
#allrecords .t1050__col {
  background-color: #F6EFEA !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  border: none !important;
  box-sizing: border-box !important;
}
#allrecords .t1050__container {
  flex-wrap: nowrap !important;
}
@media (max-width: 979px) {
  #allrecords .t1050__col {
    padding: 18px 20px !important;
  }
  #allrecords .t1050__container {
    flex-wrap: wrap !important;
  }
}
@media (max-width: 479px) {
  #allrecords .t1050__col {
    padding: 16px 18px !important;
  }
}

/* ==========================================================================
   Menú móvil (burger, bloque #rec3757123501)
   ========================================================================== */

/* Oculta el bloque inferior de iconos de redes sociales duplicados en el menú desplegable */
#rec3757123501 .t1362__additional .t-sociallinks {
  display: none !important;
}

/* Elimina cualquier espacio por defecto debajo de ambas listas (menú principal y submenú) */
#rec3757123501 .t-menu-base__list,
#rec3757123501 .t-menusub__list {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Espacio único y constante antes del bloque de teléfono/dirección */
#rec3757123501 .t-menu-popover__container.t-menu-popover__container_left {
  padding-top: 16px !important;
  gap: 0 !important;
}

#rec3757123501 .t1362__additional {
  margin-top: 20px !important;
  padding-top: 0 !important;
}

/* Oculta teléfono/dirección/metro cuando hay un submenú abierto (Servicios, Sobre la clínica) */
#rec3757123501 .t-menu-popover__burgermenu__list-wrapper:has(.t-menusub__menu_show) ~ .t1362__additional {
  display: none !important;
}

@media screen and (min-width: 480px) and (min-height: 500px) {
  #rec3757123501 .t-menu-popover__burgermenu__list-wrapper {
    justify-content: flex-start !important;
  }

  #rec3757123501 .t-menu-popover__burgermenu__list-wrapper:has(.t-menusub__menu_show) {
    padding-top: 12px !important;
  }
}

/* Tablet y móvil (hasta 979px): alineación de la lista, espacio del submenú, separador del bloque de contacto
   y contenedor de texto (teléfono/dirección) a bloque para evitar saltos de línea inesperados al colorear texto dentro */
@media screen and (max-width: 979px) {
  #allrecords .t-menu-popover__burgermenu__list-wrapper {
    justify-content: flex-start !important;
  }

  #allrecords .t-menusub__innermenu-content_level1 {
    padding-top: 8px !important;
  }

  #rec3757123501 .t1362__additional {
    border-top: 1px solid #e9e9e9 !important;
    padding-top: 16px !important;
    margin-top: 20px !important;
  }

  #allrecords .t-menu-popover__descr {
    display: block !important;
  }
}

/* ==========================================================================
   Formulario con imagen (bloque estándar de Tilda "t823")
   --------------------------------------------------------------------------
   Este CSS va en el CSS personalizado general del sitio (Configuración del
   sitio → Más → CSS personalizado), porque el bloque del constructor no
   tiene un campo de CSS propio.

   Qué hace:
   - Reduce el espacio vertical del bloque y su altura total, que antes
     ocupaba el 100% del viewport.
   - Redondea las dos columnas (imagen y formulario) con radio de 16px.
   - Iguala la altura de la imagen y la del formulario.
   - Aplica el degradado de la marca (#FDFDFD → #F3F3F3) al fondo del
     formulario.
   - Solo afecta a la versión de escritorio (el bloque no se muestra en
     móvil), por eso no hay media queries.

   Los selectores usan la clase .t823 (tipo de bloque) y no el ID #rec...,
   así que funcionan también cuando el formulario se republique en el footer
   con otro ID. Afectan a TODOS los bloques de este tipo en el sitio.
   ========================================================================== */

/* Contenedor: reduce el espacio vertical del bloque */
.t823 .t823__container {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* Se anula el layout de tabla para poder redondear ambas columnas */
.t823 .t823__wrapper,
.t823 .t823__wrapper > tbody {
  display: block !important;
  height: auto !important;
  min-height: 0 !important; /* anula la altura que calcula el script de Tilda */
}

/* La fila pasa a flex con separación entre columnas e igual altura */
.t823 .t823__wrapper > tbody > tr {
  display: flex !important;
  align-items: stretch;
  gap: 24px;
}

/* Las celdas dejan de comportarse como celdas de tabla */
.t823 .t823__col {
  display: block !important;
  width: calc(50% - 12px) !important;
  height: auto !important;
  box-sizing: border-box;
}

/* Columna de la imagen: referencia de posición para la imagen de fondo */
.t823 .t823__col_img {
  position: relative;
  min-height: 460px;
  border-radius: 16px !important;
  overflow: hidden;
}

/* Contenedores intermedios: sin posición propia para no romper la referencia */
.t823 .t823__imgblock,
.t823 .t823__imgwrapper {
  position: static !important;
  height: auto !important;
  border-radius: 16px !important; /* anula el radio de 29px del bloque */
}

/* Imagen de fondo: cubre toda la columna, que siempre tiene altura */
.t823 .t823__bgimg {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border-radius: 16px !important; /* anula el radio de 29px del bloque */
}

/* Columna del formulario: degradado de marca y esquinas redondeadas */
.t823 .t823__col_form {
  display: flex !important;
  align-items: center;
  background: linear-gradient(0.76turn, rgba(253, 253, 253, 1) 0%, rgba(243, 243, 243, 1) 100%);
  border-radius: 16px;
}

/* Espacio interior reducido del formulario */
.t823 .t823__main-wrapper {
  width: 100%;
  padding: 40px 48px !important;
  box-sizing: border-box;
}

/* Título y texto inferior más compactos */
.t823 .t823__title {
  padding-bottom: 20px !important;
}
.t823 .t823__form-bottom-text {
  margin-top: 12px;
}