:root{
    --color-celeste-claro: #dff7fa;
    --blanco: #ffffff;
    --azul-sat: #4285F4;
    --celeste-hover: #00a9c5;
    --celeste-sat: #61d6e6;
    --azul: #253844;
    --azul-claro: #005c80;
    --celeste: #4cb0c2;
  }
  
  [data-theme="light"] {
    --bg: #ffffff;
    --font: #253844;
    --gris-claro: #d7e7ee;
    --celeste-muted: #BDD6E0;
    --celeste-oscuro: #008b9f;
    --celeste-claro: #dff7fa;
    --amarillo: #ffde59;
    --sombra-1: #61d6e64d;
  }
  
  [data-theme="dark"] {
    --bg: #253844;
    --font: #ffffff;
    --gris-claro: #d7e7ee;
    --celeste-muted: #346784;
    --celeste-oscuro: #008b9f;
    --celeste-claro: #182831;
    --amarillo: #fb6675;
    --sombra-1: #182730cc;
  }

.test-b{
  display:none;
  visibility:hidden;
  opacity:0;
}


/* Sobrescribir anchos predefinidos de bootstrap */

@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }
}


  body,
  html {
    font-size: 16px;
  }
  body {
    background-attachment: fixed;
    background-color: var(--bg);
    color: var(--font);
    font-family: Nunito, sans-serif;
    font-weight: 400;
    line-height: 1.6;
  }
  /* * {
    transition: all 0.3s ease;
  } */

  .grid-12 { grid-column: span 12; }
  .grid-11 { grid-column: span 11; }
  .grid-10 { grid-column: span 10; }
  .grid-9  { grid-column: span 9; }
  .grid-8  { grid-column: span 8; }
  .grid-7  { grid-column: span 7; }
  .grid-6  { grid-column: span 6; }
  .grid-5  { grid-column: span 5; }
  .grid-4  { grid-column: span 4; }
  .grid-3  { grid-column: span 3; }
  .grid-2  { grid-column: span 2; }
  .grid-1  { grid-column: span 1; }

  .ml--15{
    margin-left: -1.5rem;
  }
  
  .bg-celeste-claro{background-color: var(--celeste-claro);}
  .bg-celeste{background-color: var(--celeste);}
  
  .bg-celeste.bg-trama {
    background: url('https://www.doctocliq.com/hubfs/software_dental_files/trama.webp') var(--celeste);
    background-size: 400%;
    background-attachment: fixed;
  }

  .degradado-oscuro, [data-theme="dark"] .degradado-claro{
    background: linear-gradient(90deg, #253845 0%, #008BA1 100%);
    color: var(--blanco);
  }

  .degradado-claro, [data-theme="dark"] .degradado-oscuro{
    background: linear-gradient(220deg, #FFF 0%, #DFF7FA 100%);
    color: var(--azul);
  }

  #banner-top {
    /* background: linear-gradient(to right, #253945 40%, #038ba1 100%); */
    background: var(--amarillo);
    color: var(--font);
    text-align: center;
    line-height: 1.1;
    font-size: 14px;
  }
  
  img, video {
    height: auto;
    max-width: 100%;
  }
  
  img.rounded, video.rounded {
    border-radius: 0.75rem !important;
  }
  
  .square-responsive {
    height: 0;
    padding-top: 90%;
    position: relative;
  }
  
  .square-responsive img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 100%;
  }
  
  .divider {
    background-position: 50%;
    background-repeat: repeat;
    background-size: cover;
    box-sizing: border-box;
    display: block;
    height: 100%;
    overflow: hidden;
    width: 100%;
  }
  .divider,
  .top-home {
    position: relative;
  }
  
  .offcanvas.offcanvas-end {
    background-color: var(--bg);
  }
  
  [data-theme="dark"] .offcanvas.offcanvas-end .btn-close {
    -webkit-filter: invert(1);
            filter: invert(1);
  }
  
  .offcanvas.offcanvas-bottom {
    background-color: var(--blanco);
  }
  
  .offcanvas.offcanvas-bottom {
    border-top: unset;
    z-index: 9994;
    height: auto;
  }
  
  .offcanvas .offcanvas-title {
    width:100%;
  }
  
  .offcanvas.offcanvas-end {
    border-left: unset;
    z-index: 9993;
  }
  .offcanvas-header {
    -webkit-box-pack: end;
            justify-content: end;
  }
  
  [data-theme="dark"] .offcanvas-header {
    background-color: var(--celeste-claro);
  }
  
  .offcanvas-body {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-pack: justify;
            justify-content: space-between;
  }
  
  header#header {
    background-color: var(--bg);
    box-shadow: 0 24px 32px -16px var(--sombra-1);
    width: 100%;
    z-index: 9991;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
  }
  
  [data-theme="dark"] header#header, [data-theme="dark"] footer {
    background-color: var(--celeste-claro);
    box-shadow: unset;
  }
  
  div[data-global-resource-path*="header"]{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 9991;
  }
  
  .modal {
    z-index: 9993;
  }
  .modal-backdrop {
    z-index: 9992;
  }
  
  .modal-backdrop.show {
    opacity: 1;
    background-color: #00000026;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  
  .navbar-toggler {
    padding: 2px;
  }
  
  .navbar-toggler span.material-symbols-rounded {
    font-size: 2rem;
    color: var(--celeste-muted);
    vertical-align: middle;
  }
  
  [data-theme="dark"] .navbar-toggler {
    border: 1px solid var(--font);
  }

  [data-theme="dark"] .navbar-toggler span.material-symbols-rounded {
    color: var(--font);
  }

  .navbar {
    padding-bottom: 1rem;
    padding-top: 1rem;
  }
  .navbar-brand {
    margin-right: 0.5rem;
    padding-bottom: 0;
    padding-top: 0;
  }
  .navbar .megamenu {
    padding: 1rem;
  }
  .navbar-nav {
    gap: 4px;
    gap: 0.25rem;
  }

  .dropdown-menu {
    overflow: hidden;
    padding: 0;
    background-color: var(--bg);
  }
  .dropdown-menu.megamenu {
    padding: 24px;
    padding: 1.5rem;
  }
  a.dropdown-item {
    padding: 16px 4px;
    padding: 1rem 4px;
    display: -webkit-box;
    display: flex;
    color: var(--font);  
  }
  
  a.dropdown-item img {
    width: 24px;
    height: 24px;
    margin-right: 6px;
  }
  
  .nav-pills {
    gap: 8px;
    gap: 0.5rem;
  }
  .nav-pills .nav-link {
    border: 1px solid var(--celeste-oscuro);
    border-radius: 0.5rem;
    color: var(--celeste-oscuro);
    padding: 8px;
    padding: 0.5rem;
  }
  .nav-pills .nav-link.active,
  .nav-pills .show > .nav-link {
    background-color: var(--celeste-oscuro);
    color: var(--bg);
  }
  
  [data-theme="dark"] .nav-pills .nav-link {
      border-color: var(--celeste);
      color: var(--celeste);
  }
  
  [data-theme="dark"] .nav-pills .nav-link.active {
    background-color: var(--celeste);
    color: var(--font);
  }


  /* General Styles for Flags */
  .flag {
    width: 28px; /* Tamaño adecuado para las banderas */
    height: 28px;
    background-image: url('https://www.doctocliq.com/hubfs/branding/banderas-paises.png');
    background-size: cover;
    border-radius: 50%;
    display: inline-block;
  }

  /* Posiciones de las banderas en la imagen */
  .flag-pe { background-position: 0 0; }      /* Perú */
  .flag-mx { background-position: -28px 0; }   /* México */
  .flag-ec { background-position: -56px 0; } /* Ecuador */
  .flag-lt { background-position: -336px 0; } /* Latinoamérica */

  /* Dropdown Container */

  .country-selector {
      display: inline-flex;
      position: relative;
      align-items: center;
  }

  .selected-country {
      align-items: center;
      background-color: transparent;
      border: 1px solid var(--celeste-oscuro);
      border-radius: 16px;
      box-shadow: 0 8px 24px -4px var(--sombra-1);
      cursor: pointer;
      display: flex;
      height: 32px;
      margin-top: 0;
      padding: 2px;
      width: 50px;
      position: relative;
  }

button#current-country:before {
    content: '';
    position: absolute;
    width: 6px;
    height: 0;
    top: 0.875rem;
    right: 0.375rem;
    font-size: 8px;
    border-width: 4px 4px 0px 4px;
    border-color: var(--celeste-oscuro) transparent;
    border-style: solid;
}

.country-dropdown {
    position: absolute; /* Dropdown relativo al contenedor */
    top: 100%; /* Justo debajo del botón */
    left: 0;
    z-index: 9999;
    background: var(--bg);
    border: 1px solid var(--celeste);
    width: 200px;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 1rem;
    box-shadow: 0 24px 32px -16px var(--sombra-1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.country-dropdown:not(.hidden) {
    opacity: 1; /* Visible */
    visibility: visible;
}

  /* List Items */
  .country-dropdown li {
    display: flex;
    align-items: center; /* Centrar verticalmente */
    gap: 10px; /* Espaciado entre bandera y texto */
    padding: 10px 15px; /* Espaciado interno */
    cursor: pointer;
    transition: background-color 0.2s ease; /* Transición suave al hover */
  }

  .country-dropdown li:hover {
    background-color: var(--celeste-claro); /* Fondo más claro al hover */
  }

  /* Asegura que las banderas se alineen correctamente */
  .country-dropdown li .flag {
    flex-shrink: 0; /* Evita que la bandera cambie de tamaño */
  }


  .btn, input.hs-button.primary, a.button, a.hs-button {
    border-radius: 8px;
    font-weight: 700;
    padding: 8px 16px;
    width: 100%;
  }
  
  button[data-theme-toggle] {
    padding: 8px;
    padding: 0.5rem;
    width: 32px;
    width: 2rem;
    height: 32px;
    height: 2rem;
    border: unset;
    display: -webkit-box;
    display: flex;
    border-radius: 1rem;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
    background-color: var(--celeste-claro);
    color:  var(--font);
    margin-right:0;
  }
  
  [data-theme="dark"] button[data-theme-toggle] {
    background-color: var(--bg);
  }
  
  .btn.btn-outline {
    background-color: transparent;
    border-color: var(--celeste-oscuro);
    color: var(--celeste-oscuro);
    fill: var(--celeste-oscuro);
  }

  [data-theme="dark"] .btn.btn-outline {
    border-color: var(--font);
    color: var(--font);
    fill: var(--font);
  }

  .btn.btn-outline:hover {
    border-color: var(--celeste-hover);
    color: var(--celeste-hover);
    fill: var(--celeste-hover);
  }

  .btn.btn-primary, input.hs-button.primary, a.button, a.hs-button {
    background-color: var(--celeste-oscuro);
    border: 1px solid var(--celeste-oscuro);
    color:var(--blanco);
    position: relative;
    overflow: hidden;
  }

  .btn.btn-terciary {
    color: var(--celeste-oscuro);
  }

  .btn.btn-terciary:active {
    color: var(--celeste-oscuro);
    border-color: var(--celeste-claro);
  }

  .btn .material-symbols-rounded {
    font-size: 1.25rem;
    vertical-align: middle;
    margin-left: 4px;
  }

  .btn.btn-terciary:hover {
    background-color: var(--celeste-claro);
  }

  a.btn.btn-hero {
    min-width: 200px;
  }
  
  .btn.btn-cta {
    box-shadow: 0 0 8px rgb(97 214 230 / 68%);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background-image: linear-gradient(to right, var(--celeste-sat) 0%, var(--azul-sat) 51%, var(--celeste-sat) 100%);
    background-size: 200% auto;
    background-position: left top;
    border-color: transparent;
    color: #fff;
  }
  .btn.btn-cta:hover {
    background-position: right bottom;
    box-shadow: 0 0 1px rgb(97 214 230 / 0%);
  }
  
  .btn.btn-cta span{
    position: relative;
  }

.btn-cta-simple {
  display: inline-block;
  border: 1px solid var(--font);
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.875rem;
}
  

.btn.btn-primary:active, 
.btn.btn-primary:focus, 
.btn.btn-primary:hover,
input.hs-button.primary:active, 
input.hs-button.primary:focus, 
input.hs-button.primary:hover,
a.button:active, 
a.button:focus, 
a.button:hover,
a.hs-button:active, 
a.hs-button:focus, 
a.hs-button:hover
{
  background-color: var(--celeste-hover) !important;
  border-color: var(--celeste-hover) !important;
}

a {
  text-decoration: none;
}

a.nav-link {
  color: var(--font);
  font-size: 16px;
}

a.nav-link:active,
a.nav-link:focus,
a.nav-link:hover {
  color: var(--celeste-oscuro);
}

a.link4 {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

a.link4:hover {
  color: var(--celeste-hover);
  -webkit-text-decoration-color: var(--celeste-hover);
  text-decoration-color: var(--celeste-hover);
}

.banner-cta.container {
  background-color: var(--amarillo);
  color: var(--font);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

#link-banner-top a {
  color: var(--font);
}


a.link2, a.link {
  font-weight: 700;
}

a.link2 {
  border-bottom: 1px solid var(--celeste-oscuro);
  color: var(--celeste-oscuro);
  text-decoration: none;
  transition: color 0.3s ease-in-out;
  background-size: 100% 200%;
  background-image: linear-gradient(to top, transparent 0%, transparent 50%, var(--celeste-claro) 50%, var(--celeste-claro) 100%);
  background-position: 0 100%;
  will-change: background-position;
}
a.link2:hover {
  -webkit-animation: backgroundAnimateIn 0.3s;
  animation: backgroundAnimateIn 0.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  border-bottom: 1px solid var(--celeste-claro);
}

a.link2 .material-symbols-rounded, a.link .material-symbols-rounded {
  font-size: 1.25em;
  display: inline-block;
  vertical-align: middle;
}

@keyframes backgroundAnimateIn {
  0% {
    background-position: 0 -100%;
  }
  63% {
    background-position: 0 -95%;
  }
  86% {
    background-position: 0 2.5%;
  }
  100% {
    background-position: 0 0%;
  }
}

.sticky-sidebar {
  position: sticky;
  top: 9rem;
}

.sticky-sidebar video {
  border-radius: 1rem;
}


a.link, .blog-post__body a:not(.btn, .no-link) {
  text-decoration: none;
  color: var(--celeste-hover);
  background-image: linear-gradient(var(--celeste-hover), var(--celeste-hover));
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size .3s;
  font-weight: 700;
}

/* resultados de busqueda */
#main .hs-search-results__listing li {
    margin: 0;
    padding: 1.5rem;
    border: 1px solid var(--celeste-muted);
    border-radius: 1rem;
    margin-bottom: 1rem;
}

#main a.hs-search-results__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--celeste);
  margin-bottom: 0.75rem;
  display: block;
}

#main p.hs-search-results__description {
  margin-bottom: 0;
}

a.link:hover, a.link:focus, .blog-post__body a:not(.btn):hover, .blog-post__body a:not(.btn):focus {
  background-size: 100% 1px;
}


  .mostrar-lt,
  .mostrar-pe,
  .mostrar-mx,
  .mostrar-ec,
  .mostrar-co,
  .mostrar-ar,
  .mostrar-cl,
  .mostrar-bo,
  .mostrar-uy,
  .mostrar-do,
  .mostrar-us,
  .mostrar-cr,
  .mostrar-pa,
  .mostrar-py,
  .mostrar-ve,
  .mostrar-ni,
  .mostrar-hn
  {
    display: none;
  }

  .pais-lt .mostrar-lt,
  .pais-pe .mostrar-pe,
  .pais-mx .mostrar-mx,
  .pais-ec .mostrar-ec,
  .pais-co .mostrar-co,
  .pais-ar .mostrar-ar,
  .pais-cl .mostrar-cl,
  .pais-bo .mostrar-bo,
  .pais-uy .mostrar-uy,
  .pais-do .mostrar-do,
  .pais-us .mostrar-us,
  .pais-cr .mostrar-cr,
  .pais-pa .mostrar-pa,
  .pais-py .mostrar-py,
  .pais-ve .mostrar-ve,
  .pais-ni .mostrar-ni,
  .pais-hn .mostrar-hn
  {
    display: block;
  }

  .pais-pe .ocultar-pe,
  .pais-mx .ocultar-mx,
  .pais-ec .ocultar-ec,
  .pais-co .ocultar-co,
  .pais-ar .ocultar-ar,
  .pais-cl .ocultar-cl,
  .pais-bo .ocultar-bo,
  .pais-uy .ocultar-uy,
  .pais-do .ocultar-do,
  .pais-us .ocultar-us,
  .pais-cr .ocultar-cr,
  .pais-pa .ocultar-pa,
  .pais-py .ocultar-py,
  .pais-ve .ocultar-ve,
  .pais-ni .ocultar-ni,
  .pais-hn .ocultar-hn
  {
    display: none;
  }
  
  
  .dropdown-item.active, .dropdown-item:active {
      background-color: var(--celeste-oscuro);
  }
  
  .dropdown-item:focus, .dropdown-item:hover {
      color: var(--celeste-oscuro);
      background-color: var(--celeste-claro);
  }
  
  [data-theme="dark"] .dropdown-item:focus, [data-theme="dark"] .dropdown-item:hover {
      color: var(--font);
  }
  
  .container-fluid.body-container {
    padding-right: unset;
    padding-left: unset;
  }

  section.container,section.container-fluid {
    padding-bottom: 56px;
    padding-bottom: 3.5rem;
    padding-top: 56px;
    padding-top: 3.5rem;
    position: relative;
  }
  
  .text-container {
    margin: 0 auto;
    max-width: 768px;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    width: 100%;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 600;
    position: relative;
  }

/* Tamaños para encabezados y párrafos en Desktop */
h1, .h1 {
  font-size: 3rem; /* 48px */
  line-height: 1.3;
}

h2, .h2 {
  font-size: 2.5rem; /* 40px */
  line-height: 1.4;
}

h3, .h3 {
  font-size: 2rem; /* 32px */
  line-height: 1.4;
}

h4, .h4 {
  font-size: 1.75rem; /* 28px */
  line-height: 1.4;
}

h5, .h5 {
  font-size: 1.5rem; /* 24px */
  line-height: 1.5;
}

h6, .h6 {
  font-size: 1.25rem; /* 20px */
  line-height: 1.5;
}

p, .paragraph {
  font-size: 1rem; /* 16px */
  line-height: 1.6;
}

/* Ajustes para dispositivos móviles */
@media (max-width: 768px) {
  h1, .h1 {
    font-size: 2.25rem; /* 36px */
    line-height: 1.3;
  }

  h2, .h2 {
    font-size: 2rem; /* 32px */
    line-height: 1.4;
  }

  h3, .h3 {
    font-size: 1.75rem; /* 28px */
    line-height: 1.4;
  }

  h4, .h4 {
    font-size: 1.5rem; /* 24px */
    line-height: 1.4;
  }

  h5, .h5 {
    font-size: 1.25rem; /* 20px */
    line-height: 1.5;
  }

  h6, .h6 {
    font-size: 1rem; /* 16px */
    line-height: 1.5;
  }

  p, .paragraph {
    font-size: 0.875rem; /* 14px */
    line-height: 1.5;
  }
}

  .title {
    margin-bottom: 2rem;
    text-wrap: balance;
  }
  
  .hero .text-container {
      text-align: center;
  }
  
  .hero h2.title{
    margin-bottom: 1.25rem;
  }

  h2.title-system-page {
    color: var(--celeste);
    font-size: 20vw;
    margin-bottom: -4vw;
    opacity: 0.35;
    pointer-events: none;
  }
  
  .lead{
    font-size: 1.125rem;
    font-weight: 400;
  }

  
  .font-small {
    font-size: 11px;
  }
  
  .text-celeste {
    color: var(--celeste) !important;
  }

  .text-azul {
    color: var(--azul) !important;
  }

  .container-buttons {
    gap: 0 16px;
    gap: 0 1rem;
    grid-gap: 0 1rem;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .tab-content > .active {
    display: -webkit-box;
    display: flex;
  }
  .tab-content > .tab-pane {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    gap: 64px;
    gap: 4rem;
  }
  
  .funcionalidades-item {
    margin-bottom: 48px;
    margin-bottom: 3rem;
  }
  
  .benefit-number {
    color: var(--celeste);
    font-size: 48px;
    font-size: 3rem;
    font-weight: 700;
    line-height: 43.2px;
    line-height: 2.7rem;
    text-align: center;
  }
  .benefit-text {
    margin-bottom: 0;
    text-align: center;
  }
  
  .glide .card-custom {
    margin-bottom: 32px;
    margin-bottom: 2rem;
  }



  
  .mosaic-wrapper {
    margin-bottom: -3rem;
    margin-top: 0rem;
    height: 300px;
    overflow: hidden;
    position: relative;
    padding: 1rem;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  
  .mosaic-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto;
    gap: 1rem;
    grid-auto-flow: dense; /* ESTA LÍNEA ES CLAVE */
  }

  
  .mosaic-grid img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.5rem;
    object-fit: cover;
    transition: transform 0.3s ease;
    cursor: pointer;
    box-shadow: 0px 24px 32px -8px var(--sombra-1);
  }
  
  .mosaic-grid img:hover{
    transform: scale(0.95);
  }
  
  @keyframes scrollVertical {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-50%);
    }
  }

  .animate-scroll {
    animation: scrollVertical 15s linear infinite;
  }
  
  .hotspot-image-container{
    position: relative;
  }
  
  .hotspot-icon{
    position: absolute;
    z-index: 1;
    width: 32px;
    height: 32px;
  }
  
  .cintillo {
    padding: 0 3rem;
    background: var(--amarillo);
    position: absolute;
    top: 1.5rem;
    right: -2.5rem;
    transform: rotate(45deg);
    font-size: 14px;
    font-weight: 600;
    color: var(--font);
  }
  

  @media (min-width: 768px) {
    .mosaic-wrapper {
      margin-bottom: -3rem;
      margin-top: -3rem;
      height: 640px;
      padding: 2rem;

      -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
      mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    }

    .mosaic-grid {
      gap: 2rem;
    }
    
    .animate-scroll {
      animation: scrollVertical 28s linear infinite;
    }

    .hotspot-icon{
      width: 48px;
      height: 48px;
    }

  }


  .card {
    -webkit-box-align: center;
            align-items: center;
    background-color: var(--bg);
    color: var(--font);
    border: 1px solid var(--gris-claro);
    border-radius: 1rem;
    box-shadow: 0 24px 32px -16px var(--sombra-1);
    padding: 24px;
    padding: 1.5rem;
    text-align: center;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  
  [data-theme="dark"] .card{
    border: 1px solid var(--celeste-muted);
  }
  
  .card.card-clickable:hover {
    box-shadow: 0 4px 8px -8px var(--sombra-1);
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
  }
  
  .card.card-clickable {
    color: var(--font);
    height: 100%;
    overflow: hidden;
  }

  .card.card-clickable p {
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .card-icon img.card-img-top {
    width: auto;
  }


  #pricing-simple.container .glide__arrows, #pricing-simple.container .glide__bullets, #pricing.container .glide__arrows, #pricing.container .glide__bullets {
    display: none;
  }


  @media (max-width: 1439px) {
    #pricing-simple.container, #pricing.container {
      max-width: 100% !important;
    }

    #pricing-simple.container .glide__track, #pricing.container .glide__track {
      margin: 0 -12px;
    }

    #pricing-simple.container .glide__arrows, #pricing.container .glide__arrows, #pricing.container .glide__bullets {
      display: flex;
    }

  }


  #pricing.container .glide__track .glide__slides {
    padding-bottom: 2rem;
  }

  .my-4 {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
  }
  
  .card.card-pricing{
    padding: 0;
    width: 100%;
  }

  .test .card.card-pricing {
      box-shadow: 0 0 0 0 var(--sombra-1);
  }

  .test .card.card-pricing:hover {
    transform:scale(0.98);
    box-shadow: 0 24px 32px -8px var(--sombra-1);
  }


  .card-pricing li {
    text-align: left;
    font-size: 14px;
    font-size: 0.875rem;
  }
  h5.card-price {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
  }
  
  h5.card-price span.update_moneda {
    font-size: 14px;
    margin-right: 4px;
    font-weight: 400;
  }

  h5.card-price span.update_plan {
    font-size: 12px;
    align-self: end;
    font-weight: 400;
  }
  
  .card-pricing .card-body, .card-newsletter .card-body  {
    width: 100%;
  }


  .card.card-newsletter {
    background-color: var(--color-celeste-claro);
  }

  .card.card-newsletter .title {
    color: var(--azul);
  }

  .card-pricing .card-body {
    padding: 2.5rem 1.25rem;
  }
  
  /*****ESTILO TEST QUITAR CUANDO SE APRUEBE****/
  .test .card-pricing .card-body {
    padding: 3rem 1.25rem 1.5rem;
  }

  .card-pricing .card-text {
    font-size: 12px;
  }

  .card.card-pricing.card-recomendado {
    background-color: var(--font);
    color: var(--bg);
  }


  /*****ESTILO TEST QUITAR CUANDO SE APRUEBE****/
  .test .card-pricing.card-recomendado {
    background-color: var(--celeste-claro);
    color: var(--font);
    border-color: var(--celeste-claro);
  }


  [data-theme="dark"] .card.card-pricing.card-recomendado {
    background-color: var(--celeste-claro);
    color: var(--font);
  }

  .card-pricing ul, ul.lista-estilizada {
    margin-bottom: 0;
    padding-left: 1.75rem;
    gap: 4px;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    list-style:none;
  }

  ul.lista-estilizada {
    gap: 8px;
  }

  .card-pricing.card-pricing-simplificado .card-body {
    padding: 1.5rem 1.5rem;
  }
  
  .card-pricing.card-pricing-simplificado .card-body .card-title, .card-pricing.card-pricing-simplificado .card-body p {
    text-align: left;
  }

  .card-pricing.card-pricing-simplificado .card-body p {
    margin-bottom: 1rem;
    margin-top: 1rem;
    min-height: 4.5rem;
  }

  .card-pricing.card-pricing-simplificado .card-body li {
    font-size: 12px;
  }

  .card-addon-header {
    cursor:pointer;
  }

  span.material-symbols-rounded.arrow-collapse {
    color: var(--celeste);
    font-size: 2rem;
    transform: rotate(0);
    vertical-align: middle;
  }

  .collapsed span.material-symbols-rounded.arrow-collapse {
    transform: rotate(180deg);
  }

  .card-addon-subtitle, .card-addon-title  {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
  }

  .card-addon-body {
    border-top: 1px solid var(--gris-claro);
    margin-top: 1rem;
    padding-top: 1rem;
  }



  ul.lista-estilizada{
    padding:0;
  }

  ul.lista-estilizada li{
    display:flex;
    gap: 0.5rem;
  }

  ul.lista-estilizada li .material-symbols-rounded{
    color: var(--celeste-oscuro);
  }

  .card-pricing li{
    position:relative;
  }
  
  
  .material-symbols-rounded {
    opacity:0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  
  .list-meta {
      display: -webkit-box;
      display: flex;
      flex-wrap: wrap;
  }
  
  .list-meta .list-inline-item {
      display: -webkit-box;
      display: flex;
      -webkit-box-align: center;
              align-items: center;
  }
  
  .list-meta span.material-symbols-rounded {
    font-size:18px
  }
  
  .card-pricing li span.material-symbols-rounded{
    position:absolute;
    left: -1.75rem;
    font-size: 20px;
    color: var(--celeste);
  }

  span.material-symbols-rounded.tooltip-info[data-bs-toggle="tooltip"] {
    position: relative;
    left: unset;
    vertical-align: middle;
    color: color-mix(in srgb, var(--font) 50%, transparent);
    cursor: pointer;
    font-size: 1.25rem;
  }

  span.material-symbols-rounded.tooltip-info[data-bs-toggle="tooltip"]:hover
  {
    color: var(--font);
  }
  
  span.material-symbols-rounded.xmark, span.material-symbols-rounded.check {
    font-variation-settings:
      'FILL' 1,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24
  }
  
  .card h3 {
    font-size: 1.125rem;
  }
  .card.card-sm {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    text-align: left;
    line-height: 1.25;
    gap: 12px;
    gap: 0.75rem;
    -webkit-box-align: start;
            align-items: start;
    font-size: 0.875rem;
  }
  .card:not(.card-sm) .icon {
    margin-bottom: 1.5rem;
  }
  .card-sm img.icon {
    background-color: var(--color-celeste-claro);
    padding: 5px;
    border-radius: 50%;
  }
  
  .icon-sm {
    width: 24px;
    width: 1.5rem;
  }
  .icon-md {
    width: 32px;
    width: 2rem;
  }
  .icon-lg {
    width: 64px;
    width: 4rem;
  }
  .icon-xl {
    width: 96px;
    width: 6rem;
  }
  .card p {
    margin-bottom: 0;
  }
  .card-custom,
  .card-custom .card-custom-content {
    background-color: transparent;
    position: relative;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
  .card-custom .card-custom-content {
    height: 100%;
    width: 100%;
  }
  .card-custom .card-custom-content img {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
  .card-body {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    height: 100%;
    border-radius: 1rem;
  }
  
  .card-custom .card-body {
    background-color: var(--bg);
    margin-top: 75px;
    padding: 32px;
    padding: 2rem;
  }
  
  .card-body .card-doctor-info {
    -webkit-box-align: center;
            align-items: center;
    border-bottom: 1px solid var(--gris-claro);
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-pack: center;
            justify-content: center;
    position: relative;
    padding-bottom: 16px;
    padding-bottom: 1rem;
    margin-bottom: 16px;
    margin-bottom: 1rem;
    width: 100%;
  }
  
  .card-body .card-doctor-info img {
    width: 120px;
    margin-top: -92px;
    margin-bottom: 16px;
    margin-bottom: 1rem;
    border-radius: 50%;
  }
  
  .card-doctor-foto {
    display: -webkit-box;
    display: flex;
    position: relative;
    margin-top: -92px;
  }
  
  .card-body .card-doctor-info .card-doctor-foto img {
    margin-top: 0px;
  }
  
  .bandera {
    width: 32px;
    height: 32px;
    position: absolute;
    z-index: 1;
    background-size: 1000%;
    bottom: 1rem;
    right: 0;
    border-radius: 50%;
    background-image: url('https://www.doctocliq.com/hubfs/branding/banderas.webp');
  }

  .bandera.bandera-inline {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    bottom: unset;
    right: unset;
  }
  
  .bandera-pe{background-position: 0 0;}
  .bandera-mx{background-position: -100% 0;}
  .bandera-hn{background-position: -200% 0;}
  .bandera-ec{background-position: -300% 0;}
  .bandera-do{background-position: -400% 0;}
  .bandera-co{background-position: -500% 0;}
  .bandera-bo{background-position: -600% 0;}
  .bandera-ve{background-position: -700% 0;}
  .bandera-uy{background-position: -800% 0;}
  .bandera-ar{background-position: -900% 0;}
  
  
  
  .card-doctor-socials {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: justify;
            justify-content: space-between;
    width: 100%;
    margin-top: 16px;
    margin-top: 1rem;
  }
  
  .card-doctor-socials img{
    width: 40px;
    border-radius: 4px;
  }
  
  .card-doctor-message {
    font-size: 14px;
    line-height: 1.4;
  }
  
  .card-body .card-doctor-info:after,
  .card-body .card-doctor-info:before {
    background-color: var(--gris-claro);
    content: " ";
    height: 4px;
    position: absolute;
    top: 100%;
    width: 4px;
  }
  
  .card-body .card-doctor-info:before {
    left: 100%;
    -webkit-transform: rotate(45deg) translate(-2px);
            transform: rotate(45deg) translate(-2px);
  }
  .card-body .card-doctor-info:after {
    right: 100%;
    -webkit-transform: rotate(45deg) translateY(-2px);
            transform: rotate(45deg) translateY(-2px);
  }
  .card-doctor-info .dr-name {
    color: var(--font);
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
  }
  .embed-youtube {
    background: -webkit-linear-gradient(
      left,
      rgba(97, 214, 230, 0.4),
      rgba(0, 139, 161, 0.4)
    );
    background: linear-gradient(
      90deg,
      rgba(97, 214, 230, 0.4),
      rgba(0, 139, 161, 0.4)
    );
    border-radius: 2rem;
    margin-bottom: 30px;
    overflow: hidden;
    padding-top: 56.25%;
    position: relative;
  }
  .embed-youtube img {
    left: 0;
    opacity: 0.7;
    top: -16.84%;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    width: 100%;
  }
  .embed-youtube[data-imgurl^="http"] img {
    top: 0;
  }
  .embed-youtube .embed-youtube-play {
    border-radius: 6px;
    cursor: pointer;
    position: absolute;
    z-index: 1;
  }
  .embed-youtube iframe,
  .embed-youtube img {
    position: absolute;
  }
  .embed-youtube .embed-youtube-play {
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
            transform: translate3d(-50%, -50%, 0);
  }
  .embed-youtube iframe {
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
  }
  .embed-youtube:hover img {
    opacity: 1;
  }
  .card-custom-video-content {
    margin: 0;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
  .card-custom-video-content img {
    border-radius: 32px;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    width: 100%;
    z-index: 3;
  }
  .card-custom-video-content .card-videos-body {
    background: -webkit-linear-gradient(
      left,
      rgba(97, 214, 230, 0.4),
      rgba(0, 139, 161, 0.4)
    );
    background: linear-gradient(
      90deg,
      rgba(97, 214, 230, 0.4),
      rgba(0, 139, 161, 0.4)
    );
    border-radius: 32px;
    display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 40px;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 5;
  }
  .btn-play {
    -webkit-box-align: center;
    align-items: center;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
  }
  .play-content-under {
    background-color: var(--celeste-claro);
    border-radius: 50%;
    padding: 4px;
    padding: 0.25rem;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }
  .play-content-under:hover {
    padding: 8px;
    padding: 0.5rem;
  }
  .play-content-under:hover .play-content {
    height: 72px;
    height: 4.5rem;
    width: 72px;
    width: 4.5rem;
  }
  .play-content {
    -webkit-box-align: center;
        align-items: center;
    background-color: var(--bg);
    border-radius: 50%;
    color: var(--celeste);
    display: -webkit-box;
    display: flex;
    height: 64px;
    height: 4rem;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 16px;
    padding: 1rem;
    position: relative;
    text-align: center;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    width: 64px;
    width: 4rem;
  }
  
  .play-content .material-symbols-rounded {
    font-size: 41.6px;
    font-size: 2.6rem;
    font-variation-settings:
    'FILL' 1;
  }
  
  .play-content i{
    font-size: 41.6px !important;
    font-size: 2.6rem !important;
  }
  
  .card-videos-doctor-info {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
            justify-content: space-between;
    margin: 0 auto;
    width: 85%;
  }
  .card-videos-doctor-info .dr-name {
    color: var(--bg);
    font-weight: 700;
  }
  .card-videos-doctor-info .video-time {
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
    background: -webkit-linear-gradient(
        bottom,
        hsla(10, 86%, 97%, 0.2),
        hsla(10, 86%, 97%, 0.2)
      ),
      hsla(10, 86%, 97%, 0.01);
    background: linear-gradient(
        0deg,
        hsla(10, 86%, 97%, 0.2),
        hsla(10, 86%, 97%, 0.2)
      ),
      hsla(10, 86%, 97%, 0.01);
    border-radius: 18px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    padding: 3.2px 14.4px;
    padding: 0.2rem 0.9rem;
  }
  .card-videos-doctor-info .video-time .time {
    color: var(--bg);
    font-size: 14.4px;
    font-size: 0.9rem;
    line-height: 16px;
    line-height: 1rem;
    text-align: center;
    width: 100%;
  }
  .form-container {
    background-color: var(--celeste-claro);
    border-radius: 24px;
    padding: 1.5rem;
    min-height: 350px;
  }

  .form-container.form-container-celeste {
    background-color: var(--celeste-claro);
  }
  
  .form-container.form-container-blanco {
    background-color: var(--bg);
  }

  .form-container.form-container-celeste h3,.form-container.form-container-celeste h4,.form-container.form-container-celeste h5,.form-container.form-container-celeste h6,.form-container.form-container-celeste p, .form-container.form-container-blanco h6 {
    color: var(--azul);
  }

  .form-container.form-newsletter {
    min-height: unset;
  }

  [data-theme="dark"] .form-container {
    background-color: var(--color-celeste-claro);
  }

  #form .container-fluid.form {
    padding: 0;
  }

  .form-container.form-evento {
    background-color: var(--bg);
    box-shadow: 0 16px 32px -16px var(--celeste);
    border: 3px solid var(--celeste-oscuro);
  }

  #form .field {
    margin-top: 0.75rem;
  }

  #form label:not(.hs-form-checkbox-display) {
    font-weight: 700;
    color: var(--celeste-oscuro);
    font-size: 14px;
  }

  #form ul {
    padding: 0;
    list-style: none;
  }

  #form input[type="text"], #form input[type="email"] {
    width: 100%;
  }

  #form input:not([type=checkbox]), #form select {
    min-height: 42px;
    padding: 4px 8px;
    border: 1px solid var(--celeste-muted);
    border-radius: 8px;
  }

  #form input.hs-button.primary {
    padding: 1.25rem 1rem;
    margin: 2rem -1.5rem -1.5rem -1.5rem;
    display: block;
    width: calc(100% + 3rem);
    border-radius: 0 0 1.25rem 1.25rem;
  }


  #form label.hs-form-checkbox-display {
    padding: 0.375rem 0;
  }

  #form .legal-consent-container label.hs-form-booleancheckbox-display {
    display: flex;
    align-items: center;
    font-weight: 400 !important;
    color: var(--font) !important;
  }

  #form li.hs-form-checkbox input {
      margin-right: 0.5rem;
  }

  #form ul.hs-error-msgs li {
      line-height: 1;
  }

  #form ul.hs-error-msgs label {
      color: #e26470;
      font-size: 12px;
      font-weight: 400;
      margin: 0;
  }

.legal-consent-container .hs-richtext {
    font-size: 14px;
}

  footer {
    background-color: var(--azul);
    color: var(--blanco) !important;
    padding-bottom: 48px;
    padding-bottom: 3rem;
    padding-top: 48px;
    padding-top: 3rem;
    position: relative;
  }
  ul.footer-menu {
    list-style: none;
    padding: 0;
    margin-bottom: 0;
  }
  ul.footer-menu li.footer-links {
    margin-bottom: 4px;
    padding: 4px 0;
  }
  li.footer-links a {
    color: var(--blanco);
    display: block;
    text-decoration: none;
  }
  footer ul li {
    margin-bottom: 16px;
    margin-bottom: 1rem;
  }
  .footer-title {
    color: var(--celeste);
    font-size: 16px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 24px;
    line-height: 1.5rem;
    margin-top: 40px;
    margin-top: 2.5rem;
  }
  
  .footer-sub-links {
    margin-bottom: 20px;
    margin-bottom: 1.25rem;
  }
  
  .footer-sub-links p {
    margin-bottom: 4px;
    margin-bottom: 0.25rem;
  }
  
  .social-links-icons {
    display: -webkit-box;
    display: flex;
    gap: 0 10px;
    -webkit-box-pack: start;
        justify-content: flex-start;
    grid-gap: 0 16px;
  }
  .social-links-icons > a {
    height: 32px;
    height: 2rem;
    width: 32px;
    width: 2rem;
  }
  .social-links .contact-info {
    -webkit-box-align: start;
            align-items: flex-start;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    gap: 16px 0;
    gap: 1rem 0;
    margin-top: 16px;
    margin-top: 1rem;
  }
  .links-apps {
    display: -webkit-box;
    display: flex;
    gap: 0 16px;
    gap: 0 1rem;
    -webkit-box-pack: center;
    justify-content: center;
  }
  
  .links-apps {
    display: -webkit-box;
    display: flex;
    gap: 0 16px;
    gap: 0 1rem;
    -webkit-box-pack: center;
            justify-content: center;
  }
  .glide__bullets {
    -webkit-box-align: center;
            align-items: center;
    display: -webkit-box;
    display: flex;
    gap: 12px;
    gap: 0.75rem;
    -webkit-box-pack: center;
            justify-content: center;
    margin-top: -12px;
    margin-top: -0.75rem;
    position: relative;
    z-index: 1;
  }
  button.glide__bullet {
    background-color: var(--celeste-muted);
    border: none;
    border-radius: 10px;
    height: 8px;
    width: 8px;
    padding: 0;
  }
  button.glide__bullet.glide__bullet--active {
    background-color: var(--celeste-oscuro);
    width: 24px;
  }
  
  .glide__arrow{
    z-index: 2;
    position: relative;
  }
  
  button.glide__arrow.glide__arrow--left, button.glide__arrow.glide__arrow--right {
    position: absolute;
    top: 35%;
    left: -32px;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 4px;
    background-color: var(--bg);
    color: var(--font);
    box-shadow: 0 8px 16px -4px var(--sombra-1);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
  }
  
  button.glide__arrow.glide__arrow--left:hover, button.glide__arrow.glide__arrow--right:hover {
    background-color: var(--font);
    color: var(--bg);
    box-shadow: 0 1px 2px 0px var(--sombra-1);
  }
  
  button.glide__arrow.glide__arrow--right {
    left: unset;
    right: -32px;
  }


  #pricing-simple.container button.glide__arrow.glide__arrow--left,
  #pricing-simple.container button.glide__arrow.glide__arrow--right,  
  #pricing.container button.glide__arrow.glide__arrow--left,
  #pricing.container button.glide__arrow.glide__arrow--right {
    border: 1px solid var(--celeste-oscuro);
    border-radius: 50%;
    left: 8px;
    position: absolute;
    top: 25%;
    box-shadow: unset;
    color: var(--celeste-oscuro);
  }

  #pricing-simple.container button.glide__arrow.glide__arrow--left,
  #pricing-simple.container button.glide__arrow.glide__arrow--right,{
    top: 45%;
  }


  #pricing-simple.container button.glide__arrow.glide__arrow--left:hover,
  #pricing-simple.container button.glide__arrow.glide__arrow--right:hover,  
  #pricing.container button.glide__arrow.glide__arrow--left:hover,
  #pricing.container button.glide__arrow.glide__arrow--right:hover {
    background-color: var(--celeste-oscuro);
    border: 1px solid var(--celeste-oscuro);
    color: var(--blanco);
    box-shadow: unset;
  }

  #pricing-simple.container button.glide__arrow.glide__arrow--right,
  #pricing.container button.glide__arrow.glide__arrow--right{
    left: unset;
    right: 8px;
  }

  /*
  LOGOS
   */
  [data-theme="dark"] .logos-alianzas{
    filter: grayscale(1) invert(1) brightness(2);
    -webkit-filter: grayscale(1) invert(1) brightness(2);
    mix-blend-mode: screen;
  }
  
  /*
  ACCORDION
   */
  button.accordion-button {
    font-size: 18px;
    background-color: var(--bg);
    color: var(--font);
    padding: 1rem 2.5rem 1rem 1rem;
  }
  
  .accordion-button:not(.collapsed) {
    color: var(--celeste-oscuro);
    font-weight: 700;
    background-color: var(--bg);
    box-shadow: unset;
  }
  
  .accordion-button .accordion-flecha {
    position: absolute;
    top: 1rem;
    right: 0.5rem;
  }
  
  .accordion-button:not(.collapsed) .accordion-flecha {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  
  .accordion-button:after {
    content: unset;
  }
  
  .accordion-item {
    border: 1px solid var(--celeste-muted);
    background-color: transparent;
  }
  
  .accordion-body {
    background-color: var(--bg);
    color: var(--font);
    padding: 0.5rem 1rem 1.5rem;;
  }

  .accordion-flush .accordion-item:last-child {
    border-bottom: 1px solid var(--celeste-muted);
  }

  
  table.table {
    color: var(--font);
  }

  table:not(.comparativa) > thead tr th {
    background-color: var(--celeste-oscuro);
    color: var(--blanco);
  }

  table:not(.comparativa) tbody, table:not(.comparativa) td, table:not(.comparativa) tfoot, table:not(.comparativa) th, table:not(.comparativa) thead, table:not(.comparativa) tr {
    border: 1px dashed var(--celeste-muted);
  }

  table td{
    position:relative;
  }

  span.material-symbols-rounded.tooltip-celda {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 1rem;
    color: var(--celeste-muted);
  }

  .text-vertical span.material-symbols-rounded.tooltip-celda {
      transform: rotate(90deg);
      top: unset;
      bottom: 4px;
      left: 4px;
      right: unset;
    }

  table.comparativa tr.border-bottom {
    border-bottom-color: var(--celeste-muted) !important;
    border-bottom-width: 2px !important;
  }
  
  table.comparativa th {
    font-weight: 400;
  }
  
  table.comparativa tr.border-bottom th{
    font-weight: 700;
    font-size: 20px;
    padding:2rem 0 1rem;
    color: var(--font);
  }
  
  table.comparativa>:not(caption)>*>* {
    padding: 0.5rem;
    border-bottom-color: var(--celeste-muted);
    vertical-align: middle;
  }
  
  table.comparativa span.material-symbols-rounded.xmark {
    color: #afd3e140;
  }
  
  table.comparativa > tbody td {
    font-weight: 700;
  }
  
  table.comparativa th.text-start p {
    margin-bottom: 0.5rem;
  }

  table.comparativa > thead tr th:not(:first-child), table.comparativa > tbody tr td {
    padding: 1rem 0.5rem;
  }

td.text-vertical {
  writing-mode: sideways-lr;
}

  table.comparativa>thead tr th:not(:first-child) h4 {
      margin: 0 auto;
      writing-mode: sideways-lr;
      font-size: 1.125rem;
  }

  table.comparativa > tbody tr:not(.border-bottom) td:nth-child(2) {
    border-right: 1px dashed var(--celeste-muted);
  }
  
  table.comparativa > tbody tr:not(.border-bottom) td:nth-child(3) {
    border-right: 1px dashed var(--celeste-muted);
  }
  
  table.comparativa > tbody tr:not(.border-bottom) td:nth-child(4) {
    border-right: 1px dashed var(--celeste-muted);
  }

  table.comparativa > tbody td:nth-child(5), table.comparativa > thead tr th:nth-child(5)  {
    color: var(--font) !important;
  }



  table.comparativa > tbody td:nth-child(2) span.material-symbols-rounded.check  {
    color: var(--celeste) !important;
  }
  
  table.comparativa > tbody td:nth-child(3) span.material-symbols-rounded.check  {
    color: var(--celeste) !important;
  }
  
  table.comparativa > tbody td:nth-child(4) span.material-symbols-rounded.check  {
    color: var(--celeste) !important;
  }

  table.comparativa > tbody td:nth-child(5) span.material-symbols-rounded.check  {
    color: var(--celeste) !important;
  }


  table.comparativa > tbody tr td {
    font-size: 15px;
    font-weight: 400;
    color: var(--font) !important;
  }



  table.comparativa > thead tr th:nth-child(2)  {
    background-color: var(--azul-sat) !important;
    color: var(--bg) !important;
  }
  
  table.comparativa > thead tr th:nth-child(3)  {
    background-color: var(--celeste) !important;
    color: var(--bg) !important;
  }
  
  table.comparativa > thead tr th:nth-child(4)  {
    background-color: var(--celeste-oscuro) !important;
    color: var(--bg) !important;
  }

  table.comparativa > thead tr th:nth-child(5)  {
    background-color: var(--font) !important;
    color: var(--bg) !important;
  }


  
  th.text-start small.text-muted {
    font-size: 11px;
    line-height: 1.25;
  }

  .pricing.lite span.small.contenido-lite {
    display: inline-block;
    font-size: 70%;
  }

  span.small.contenido-lite {
    display: none;
  }

  #pricing-simple .glide__slide, #pricing .glide__slide{
   height: auto;
  }

  .pricing .card-pricing-container{
    display: -webkit-box;
    display: flex;
    height: 100%;
  }

  .card-pricing h4.card-title{
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 0;
  }

  .card-pricing p.card-subtitle{
    font-size: 14px;
    margin-top: 0.25rem;
    margin-bottom: 0;
  }


  .card-pricing.card-pricing-premium h4.card-title{
    background: -webkit-linear-gradient(to left, var(--celeste-sat), var(--azul-sat));
    background: linear-gradient(to left, var(--celeste-sat), var(--azul-sat));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    color: var(--azul-sat);
  }
  
  .card-pricing.card-pricing-pro h4.card-title{
    color: var(--celeste-sat);
  }

  .card-pricing.card-pricing-lite h4.card-title{
    color: var(--celeste-oscuro);
  }

  .card-pricing.card-pricing-free h4.card-title, .card-pricing.card-pricing-free p.card-subtitle{
    color: var(--azul-sat);
  }

  .card-pricing.card-pricing-individual h4.card-title, .card-pricing.card-pricing-individual p.card-subtitle{
    color: var(--celeste);
  }

  .card-pricing.card-pricing-basico h4.card-title, .card-pricing.card-pricing-basico p.card-subtitle{
    color: var(--celeste-oscuro);
  }

  [data-theme="dark"] .card-pricing.card-pricing-free h4.card-title,
  [data-theme="dark"] .card-pricing.card-pricing-free p.card-subtitle,
  [data-theme="dark"] .card-pricing.card-pricing-individual h4.card-title,
  [data-theme="dark"] .card-pricing.card-pricing-individual p.card-subtitle,
  [data-theme="dark"] .card-pricing.card-pricing-basico h4.card-title,
  [data-theme="dark"] .card-pricing.card-pricing-basico p.card-subtitle{
    color: var(--font);
  }



  .card-pricing-features {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
  }
  
  span.tag-nopill {
    text-transform: uppercase;
    color: var(--celeste);
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
  }

    span.new-tag {
      display: inline-block;
      padding: 2px 4px;
      background-color: #0d6efd;
      color: #fff;
      font-size: 9px;
      line-height: 1;
      height: 13px;
      position: relative;
      border-radius: 8px;
      text-transform: uppercase;
      margin-left: 2px;
    }
  
  a.tag, span.tag-recomendado {
    background-color: var(--celeste-muted);
    border-radius: 4px;
    color: var(--font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 2px 4px;
    text-transform: uppercase;
  }
  
  span.tag-recomendado {
    background-color: var(--amarillo);
    position: absolute;
    left: 50%;
    top: 0;
    display: inline-block;
    width: fit-content;
    margin: 0 auto;
    font-size: 10px;
    padding: 0px 8px;
    transform: translateX(-50%);
    border-radius: 0 0 8px 8px;
  }

  /*****ESTILO TEST QUITAR CUANDO SE APRUEBE****/
  .test span.tag-recomendado {
    top: 1rem;
    border-radius: 4px;
    width: 10rem;
    font-size: 12px;
  }

  
  /*
  SWITCHER
  */
  
  .switch-container, .select-container {
    display: -webkit-box;
    display: flex;
    gap: 0.5rem;
    -webkit-box-align: center;
    align-items: center;
    margin-top: 1rem;
    margin-bottom: -1.5rem;
    z-index: 1;
  }
  
  .select-container .form-select {
    background-color: var(--bg);
    color: var(--font);
    border-color: var(--celeste-muted);
    padding: 0.5rem 2.25rem 0.5rem 0.5rem;
  }
  
  .switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--font);
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--bg);
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: var(--celeste-oscuro);
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px var(--celeste-oscuro);
  }
  
  input#switch:checked + .slider:before {
    -webkit-transform: translateX(24px);
    transform: translateX(24px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 16px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }
  
  .tag-oferta {
    display:none;
    font-size: 13px;
    line-height: 1.4;
    background-color: transparent;
    margin-bottom: 1.5rem;
    padding: 0.5rem 1rem;
    color: var(--font);
    border-radius:0.5rem;
    border: 1px solid var(--celeste-muted);
  }

  .dp-oferta .tag-oferta{
    display:block;
  }

  .dp-oferta .increase-doctors span.material-symbols-rounded {
    display: none;
  }


  #pricing:not(.dp-1) li.max-1 {
      opacity: 0.5;
  }

  #pricing:not(.dp-1) li.max-1 .tooltip-info {
    display: inline-block;
  }

  li.max-1 {
      opacity: 1;
  }

  #pricing li.max-1 .tooltip-info {
      display: none;
  }

  .plan-switch-container{
      width: 100%;
  }

  .card-pricing .switch {
    width: 100%;
    height: 60px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
  }
  
  .card-pricing .slider.round, .card-pricing .slider.round:before  {
    border-radius: 8px;
  }
  
  .card-pricing .slider:before {
    height: 60px;
    width: 50%;
    left: 0;
    bottom: 0;
    background-color: var(--bg);
    border: 2px solid var(--azul);
  }
  
  .card-pricing .switch-container {
    margin-bottom: 16px;
    margin-bottom: 1rem;
    font-size: 14px;
  }
  
  .card-pricing .switch-container .switch {
    cursor: pointer;
  }

  .content-anual, .content-mensual {
    display: none !important;
  }

  .anual .content-anual, .mensual .content-mensual {
    display: initial !important;
  }

  .anual ul.content-anual, .mensual ul.content-mensual {
    display: flex !important;
  }

  .price-container {
    margin: 2.75rem auto 3rem;
    position: relative;
    width: 100%;
  }
  
  .select-container {
    margin-top: 0.5rem;
  }

  label.btn-outline-primary {
    border-color: var(--celeste-oscuro);
    color: var(--celeste-oscuro);
    padding: 0.5rem 0.75rem;
    font-weight: 400;
  }

  .btn-group .small.material-symbols-rounded {
    font-size: 1.25rem;
    vertical-align: sub;
  }

  .btn-check:checked+.btn-outline-primary, .btn-outline-primary.active {
    background-color: var(--celeste-oscuro);
    border-color: var(--celeste-oscuro);
    color: var(--bg);
    font-weight: 700;
  }

  .btn-check+.btn-outline-primary:hover {
    color: var(--blanco);
    background-color: var(--celeste);
    border-color: var(--celeste);
  }

  span.doctores-counter-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }

  span.button-counter-container {
    display: flex;
  }

  span.doctores-counter-container span.material-symbols-rounded  {
    position:relative;
    left: unset;
    font-size: 1.375rem;
  }

  .doctor-counter {
    display: flex;
    gap: 0.25rem;
  }

  .counter-container {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  input#additional_doctors {
    text-align: center;
    padding: 0;
    background-color: transparent;
    border: 0;
    font-weight: 700;
    color: var(--font);
  }

  button.btn-counter {
    background-color: transparent;
    color: var(--celeste);
    padding: 0;
    text-align: center;
  }

  #pricing button.btn-counter {
    line-height: 1;
    border: unset;
  }

  button#decrease_doctors {
    margin-left: 0;
  }

  button.btn-counter:hover{
    color: var(--celeste-oscuro);
  }

  .tag-ahorro {
    font-size: 14px;
    color: var(--celeste-oscuro);
    font-weight: 700;
    background-color: rgb(97 214 230 / 20%);
    padding: 0px 8px;
    padding: 0rem 0.75rem;
    border-radius: 4px;
  }

  .card-pricing .tag-ahorro {
    padding: 0rem 1.5rem;
    position: absolute;
    width: 70%;
    left: 15%;
    bottom: -1.5rem;
  }

  .card-pricing.card-recomendado .tag-ahorro {
    color: var(--blanco);
  }

  /*****ESTILO TEST QUITAR CUANDO SE APRUEBE****/
  .test .tag-ahorro, .test .card-pricing.card-recomendado .tag-ahorro {
    color: var(--font);
    background-color: rgb(255 222 106 / 25%);
  }

  [data-theme="dark"] .tag-ahorro {
    color: var(--celeste-hover);
  }

  /*****ESTILO TEST QUITAR CUANDO SE APRUEBE****/
  [data-theme="dark"] .test .tag-ahorro {
    color: var(--font);
  }
  
  .anual .anual-text,.mensual .mensual-text{
    font-weight: 700;
  }
  
   #switcher.anual .anual-text, #switcher.mensual .mensual-text{
    font-weight: 700;
    color: var(--celeste-oscuro);
  }
  
  #switcher.mensual .mensual-text{
    color: var(--font);
  }
  
  .card-pricing .switch div {
    width: 50%;
    z-index: 2;
  }
  
  .card-pricing input + .slider {
    background-color: #e5f2f741;
    box-shadow: 0px 0px 8px 4px var(--celeste-muted) inset;
  }
  
  .card-pricing.card-recomendado .slider:before{
    background-color: var(--font);
    border: 2px solid var(--bg);
  }
  
  .card-pricing.card-recomendado input + .slider {
    background-color: var(--font);
    box-shadow: 0 0 8px 4px var(--azul) inset;
  }
  
  #pricing.anual .card-pricing input + .slider:before {
    left: 50%;
  }
  
  .table-hover>tbody>tr:not(.border-bottom):hover>* {
    --bs-table-accent-bg: var(--celeste-claro) !important;
    color: var(--font);
  }

  .table-hover>tbody>tr.border-bottom:hover>* {
      --bs-table-accent-bg: transparent !important;
    }

  .table-head-sticky thead{
    position:sticky;
    top:75px;
    z-index:1;
  }



  .doctores-slider-wrapper {
    width: 149px; /* ancho visible aprox. 3 imágenes con borde y superposición */
    overflow: hidden;
    border-radius:28px;
  }

  .doctores-social-proof {
    display: flex;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
  }

  .doctores-social-proof img {
    width: 55px;
    margin-right: -8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  
  .tablet {
    width: 100%;
    height: auto;
    display: block;
    z-index: 0;
    box-shadow: 0 72px 64px -48px #46878e96;
    border-radius: 1rem;
  }

  .tabs-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 0px;
  }

  #tabs-controller::-webkit-scrollbar {
    display: none;
  }

  #tabs-controller {
    scrollbar-width: none; /* Firefox */
    border-bottom: 0px;
  }

  .nav-tabs .nav-link {
    white-space: nowrap;
    flex: 0 0 auto;
    padding: 0.5rem 1.5rem;
    border: 0 !important;
    background-color: var(--celeste-claro);
    border-radius: 2rem;
    margin: 0 0.25rem;
    color: var(--celeste-oscuro);
    align-items: center;
    display: flex;
    gap: 0.5rem;
  }

  .nav-tabs .nav-link.active {
    background-color: var(--azul);
    color: var(--blanco);
  }

  [data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--celeste-oscuro);
    color: var(--blanco);
  }


  .carousel-wrapper {
    width: 100%;
  }

  .carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }

  .testimonial-slide {
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    color: var(--font);
    border-radius: 1rem;
    flex-flow: column;
    justify-content: center;
    height: 25rem;
    padding: 1rem;
    display: flex;
    overflow: hidden;
    position: relative;
  }

  .testimonial-slide-inner {
    background-color: #008b9d;
    height: 100%;
    display: flex;
    justify-content: space-around;
    padding: 2rem 1.5rem;
    border-radius: 1rem;
    color: #fff;
    background-position: center;
    background-size: cover;
    flex-direction: column;
  }

  .testimonial-slide-inner h5 {
    font-size: 1.25rem;
    line-height: 1.35;
  }

  .testimonial-slide.testimonial-slide-video {
    cursor: pointer;
  }

  .testimonial-slide:not(.testimonial-slide-video):before {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: #008b9b;
    top: 50%;
    left: 9px;
    z-index: 1;
    transform: rotate(45deg) translate(-50%, -50%);
    border-radius: 2px;
  }

  .testimonial-slide-azul-claro .testimonial-slide-inner {
    background-color: var(--azul-claro);
  }

  .testimonial-slide-azul-claro.testimonial-slide:not(.testimonial-slide-video):before {
    background-color: var(--azul-claro);
  }

  .testimonial-slide-azul-sat .testimonial-slide-inner {
    background-color: var(--azul-sat);
  }

  .testimonial-slide-azul-sat.testimonial-slide:not(.testimonial-slide-video):before {
    background-color: var(--azul-sat);
  }



  @media (min-width: 768px) {
    .testimonial-slide {
      width: 50%;
    }

    .testimonial-slide-inner h5 {
      font-size: 1.5rem;
      line-height: 1.25;
    }
  }

  @media (min-width: 992px) {
    .testimonial-slide {
      width: 33.3333%;
    }

    .title.title-grande {
      font-size: 3rem;
      line-height: 1.2;
    }

  }


  @media (min-width: 1300px) {
    .testimonial-slide {
      width: 25%;
    }

    .title.title-grande {
      font-size: 3.5rem;
      line-height: 1.2;
    }
  }

  @media (min-width: 1600px) {
    .testimonial-slide {
      width: 20%;
    }
  }

  .comillas-svg{
    width:100%;
    opacity:0.3;
  }

  .comillas-svg.justify-content-start svg{
    transform:rotate(180deg);
    margin-bottom: 0.75rem;
  }


  #testimonialModal .modal-content {
    background-color: transparent;
    border: unset;
  }

  #testimonialModal .modal-header.border-0 {
    padding-top: 0;
    padding-bottom: 0.5rem;
    padding-right: 0;
    padding-left: 0;
  }


  .testimonial-slide.testimonial-slide-video .testimonial-slide-inner {
    justify-content: end;
    align-items: end;
  }

  .video-play-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0.15);
    color: #ffffff;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(8px);
  }

  .video-play-icon span.material-symbols-rounded {
    font-size: 4rem;
    font-variation-settings:
      'FILL' 1,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24
  }


  /* Mostrar en hover solo en desktop */
  @media (min-width: 768px) {
    .testimonial-slide-video:hover .video-play-icon {
      opacity: 1;
    }
  }

  /* Siempre visible en mobile */
  @media (max-width: 767px) {
    .video-play-icon {
      opacity: 1;
    }
  }


  .foto-doctor-testimonio{
    position:relative;

  }

  .foto-doctor-testimonio img{
    width:72px;
    height 72px;
    border: 1px solid var(--celeste);
    border-radius: 50%;
  }

  .foto-doctor-testimonio span.bandera{
    bottom: 0;
    border: 2px solid var(--celeste);
    box-sizing: content-box;
  }

  .cintillo-celeste {
    background-color: var(--celeste-muted);
    color: var(--bg);
  }

  img.comillas {
    display: inline-block;
    width: 32px;
    vertical-align: baseline;
    margin-right: 0.5rem;
  }

  /* ===== Slider de logos de clientes (social proof) ===== */
  .clientes-logos-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  }

  .clientes-logos-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: clientesScroll 40s linear infinite;
  }

  .clientes-logos-wrapper:hover .clientes-logos-track {
    animation-play-state: paused;
  }

.clientes-logos-track img {
    height: 120px;
    width: auto;
    margin: 0 2.5rem;
    object-fit: contain;
    flex-shrink: 0;
}

  @keyframes clientesScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  
  
  
  
  .columns-img-container {
    width: 100%;
    height: auto;
    border-radius: 1rem;
  }

  .columns-img-inner {
    width: 100%;
    height: 0;
    padding-bottom: 75%;
    position: relative;
  }

  .columns-img-inner img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 3rem);
  }

  /* Mostrar en hover solo en desktop */
  @media (min-width: 768px) {
      .columns-img-container {
        border: 1px solid var(--celeste);
        box-shadow: 0 72px 64px -48px rgba(70,135,142,0.25);
      }

  }
  
  
  
  /* ===== FAQ (AEO) ===== */
  .faq-item {
    margin-bottom: 1rem;
  }

  .faq-question {
    width: 100%;
    text-align: left;
    background: #ffffff00;
    padding: 1.25rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    color: var(--font);
    font-weight: 700;
    font-size: 1.125rem;
    border-radius: 1rem;
    border: 1px solid var(--celeste-muted);
  }

  .faq-question .material-symbols-rounded {
    transition: transform 0.3s ease;
    flex-shrink: 0;
  }
  
  .faq-question[aria-expanded="true"]{
    background: #ffffff;
    border-color: #ffffff;
    color: var(--celeste-oscuro);
  }

  .faq-question[aria-expanded="true"] .material-symbols-rounded {
    transform: rotate(180deg);
  }

  .faq-answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease;
  }

  .faq-answer-inner {
    padding: 1rem;
    color: var(--font);
    opacity: 0.9;
  }

  .rotating-wrapper {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    transition: height 0.4s ease;
  }

  .rotating-text {
    position: relative;
    display: block;
  }

  .rotating-text span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    color:  var(--celeste);
    transform: translateY(12px);
    transition: opacity 1s ease, transform 1s ease;
    pointer-events: none;
  }

  .rotating-text span.active {
    opacity: 1;
    position: relative;
    transform: translateY(0);
    pointer-events: auto;
  }


/* ============================================================
   ESTILOS DEL FILTRO — barra compacta tipo pill + dropdowns
   ------------------------------------------------------------
   Va en main.css o en el bloque <style> del template.
   Solo color desde tokens --dc-* (con fallback); layout en px/rem.
   ============================================================ */

.dc-filtros { padding-bottom: 1.25rem; }

/* --- Barra pill --- */
.dc-bar {
  display: flex; align-items: center; gap: 0;
  background: var(--dc-surface, #fff);
  border: 1px solid var(--dc-border, #d9e0ea);
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 12px 28px -12px var(--dc-sombra-1, rgba(20,30,50,.14));
}

/* Buscador (se oculta en móvil) */
.dc-bar-search {
  flex: 1 1 auto; display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px;
}
.dc-bar-search .material-symbols-rounded { color: var(--celeste-oscuro); font-size: 24px; }
.dc-bar-input {
  border: none; background: none; outline: none;
  width: 100%; font-size: 15px; font-family: inherit;
  color: var(--font, #1b2733);
}
.dc-bar-input::placeholder { color: var(--celeste-muted, #7a869a); }

/* --- Dropdown (contenedor relativo) --- */
.dc-dd { position: relative; flex: 0 0 auto; }
.dc-dd-toggle {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border: none; background: none; cursor: pointer;
  font-size: 15px; font-family: inherit;
  color: var(--dc-font, #1b2733);
  border-radius: 999px;
}
.dc-dd + .dc-dd .dc-dd-toggle,
.dc-dd .dc-dd-toggle { border-left: 1px solid transparent; }
.dc-dd:not(:first-child) .dc-dd-toggle { position: relative; }
.dc-dd .dc-dd-caret { font-size: 20px; color: var(--celeste-muted, #7a869a); transition: transform .18s ease; }
.dc-dd.is-open .dc-dd-caret { transform: rotate(180deg); }
.dc-dd-count {
  font-size: 11px; line-height: 1;
  background: var(--celeste-oscuro); color: #fff;
  border-radius: 999px; padding: 3px 7px; min-width: 18px; text-align: center;
}

/* separador vertical entre dropdowns */
.dc-dd::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 1px; background: var(--dc-border, #d9e0ea);
}
.dc-dd:first-of-type::before { display: none; }

/* --- Panel del dropdown --- */
.dc-dd-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  min-width: 240px;
  background: var(--dc-surface, #fff);
  border: 1px solid var(--dc-border, #d9e0ea);
  border-radius: 14px; padding: 8px;
  box-shadow: 0 16px 32px -8px var(--dc-sombra-1, rgba(20,30,50,.18));
}
.dc-dd[data-eje="cat"] .dc-dd-panel { left: auto; right: 0; }

/* --- Opción con checkbox --- */
.dc-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
  font-size: 14px; color: var(--dc-font, #1b2733);
  user-select: none;
  margin-bottom:2px;
}
.dc-opt:hover { background: var(--celeste-claro, rgba(23,179,176,.08)); }
.dc-opt-icon { font-size: 20px; color: var(--celeste-oscuro);}
.dc-opt-text { flex: 1; }
.dc-opt-check { position: absolute; opacity: 0; pointer-events: none; }
.dc-opt-mark { font-size: 18px; color: var(--celeste-oscuro); visibility: hidden; }

/* Estado seleccionado */
.dc-opt:has(.dc-opt-check:checked) { background: var(--celeste-claro, rgba(23,179,176,.10)); }
.dc-opt:has(.dc-opt-check:checked) .dc-opt-text,
.dc-opt:has(.dc-opt-check:checked) .dc-opt-mark { visibility: visible; }

/* --- Fila de resultados estilo e-commerce --- */
.dc-status {
  padding: 12px 4px;
}
.dc-status-inner {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 4px;
}
.dc-count { font-size: 16px; color: var(--font, #1b2733); }
.dc-count strong { font-weight: 600; }
.dc-clear {
  display: inline-flex; align-items: center; gap: 5px;
  border: none; background: none; cursor: pointer;
  color: var(--celeste-oscuro);
  font-size: 16px; font-family: inherit;
}
.dc-clear .material-symbols-rounded { font-size: 18px; }
.dc-clear:hover { text-decoration: none; }

/* --- Grid de resultados: hereda clases nativas (.card .blog-card) --- */
.dc-resultados { padding-top: 1rem; }

/* --- Estado vacío --- */
.dc-empty { text-align: center; padding: 3rem 1rem; max-width: 420px; margin: 0 auto; }
.dc-empty .material-symbols-rounded { font-size: 48px; color: var(--celeste-muted, #7a869a); }
.dc-empty-title { font-weight: 600; font-size: 1.1rem; margin: .75rem 0 .25rem; color: var(--dc-font, #1b2733); }
.dc-empty-sub { color: var(--dc-text-secondary, #55677d); margin-bottom: 1.25rem; }

/* ============================================================
   MÓVIL: se oculta el buscador, dropdowns full-width
   ============================================================ */
@media (max-width: 768px) {
  .dc-bar {
    border-radius: 16px; padding: 6px;
    gap: 6px;
  }
  .dc-bar-search { display: none; }
  .dc-dd { flex: 1 1 0; }
  .dc-dd::before { display: none; }
  .dc-dd-toggle {
    width: 100%; justify-content: space-between;
    border: 1px solid var(--dc-border, #d9e0ea);
    border-radius: 12px;
  }
  .dc-dd-panel { min-width: 0; width: 100%; }
  .dc-dd[data-eje="cat"] .dc-dd-panel { left: 0; right: auto; }
}


/* ============================================================
   TARJETA DESTACADA — imagen de fondo + overlay
   Mismo ancho de columna que las normales (col-lg-4)
   ============================================================ */
.blog-card-featured {
  position: relative;
  display: block;
  height: 100%;
  min-height: 340px;
  border-radius: 1rem;
  overflow: hidden;
  padding: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-decoration: none;
  color: #fff;
}

/* Degradado oscuro para legibilidad del texto */
.blog-card-featured .blog-card-featured-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 1.5rem;
  background: linear-gradient(to top,
    rgba(2,64,89,.90) 0%,
    rgba(0,139,157,.10) 55%,
    rgba(2,64,89,.05) 100%);
}


.blog-card-featured-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--amarillo);
  color:var(--azul);
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}
.blog-card-featured-badge .material-symbols-rounded { font-size: 15px; }

.blog-card-featured .blog-card-topic .tag {
    background: rgba(255,255,255,.2);
    border: none;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px;
    border-radius: 5px;
    backdrop-filter: blur(4px);
}

.card h3.blog-card-featured-title {
  color: #fff;
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 0;
}

.blog-card-featured-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: rgba(255,255,255,.85);
}
.blog-card-featured-meta .material-symbols-rounded { font-size: 16px; }

.blog-card-featured:hover { transform: translateY(-2px); transition: transform .2s ease; }

  /*
   BLOG
  */
  
  .blog-post__body p, .main-pilar p{
    font-size: 17px;
    line-height: 1.6;
  }
  
  .blog-post__body h2, .main-pilar h2 {
    color: var(--celeste-oscuro);
    font-size: 2rem;
    margin: 2.5rem 0 1rem 0;
  }
  
  [data-theme="dark"] .blog-post__body h2, [data-theme="dark"] .main-pilar h2 {
      color: var(--color-celeste);
  }
  
  .blog-post__body h3, .main-pilar h3 {
    color: var(--azul);
    font-size: 1.5rem;
    margin: 1.75rem 0 0.75rem 0;
  }
  
  [data-theme="dark"] .blog-post__body h3, [data-theme="dark"] .main-pilar h3 {
      color: var(--color-celeste-claro);
  }
  
  .blog-post__body h4, .main-pilar h4{
    font-size: 1.25rem;
    margin: 1.25rem 0 0.75rem 0;
  }
  
  .blog-post__body h5, .main-pilar h5{
    font-size: 1.125rem;
    margin: 1rem 0 0.75rem 0;
  }
  .blog-post__body h6, .main-pilar h6{
    font-size: 1rem;
  }
  
  .blog-post__body img, .main-pilar img {
    border-radius: 1rem;
  }
  
   .img-overlay{
    margin-bottom: -12rem;
  }
  
  section.container.content-overlay, section.container-fluid.content-overlay{
    padding-top: 12rem;
  }
  
  
  h1.title.blog-title {
    font-size: 2rem;
  }
  
  .card .blog-post-name h3 a {
    font-size: 1.25rem;
    color: var(--font);
  }
  
  .card.blog-card {
    overflow: hidden;
    text-align:left;
    box-shadow: 0 0px 0px 0px var(--sombra-1);
  }

  .card.blog-card:hover {
    box-shadow: 0 24px 32px -16px var(--sombra-1)
  }
  
  .card.blog-card ul.list-inline {
    color: var(--celeste-oscuro);
    font-size: 12px;
  }
  
  .card .blog-card-featured-image{
    margin: -1rem -1rem 1.5rem;
    width: calc(100% + 2rem);
    border-radius: 0.75rem;
    overflow: hidden;
  }

  
  .blog-card-featured-image img.featured-image {
    aspect-ratio: 16 / 9;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
  }
  
  .blog-post__body blockquote, .main-pilar blockquote {
    padding: 1.5rem;
    background: -webkit-linear-gradient(45deg, var(--celeste-claro), #f0fdff);
    background: linear-gradient(45deg, var(--celeste-claro), #f0fdff);
    border: 1px solid var(--celeste-muted);
    border-radius: 8px;
  }

  .blog-post__body blockquote.bq-simple, .main-pilar blockquote.bq-simple {
    background: transparent;
  }

  .blog-post__body blockquote h1,
  .blog-post__body blockquote h2,
  .blog-post__body blockquote h3,
  .blog-post__body blockquote h4,
  .blog-post__body blockquote h5,
  .blog-post__body blockquote h6,
  .blog-post__body blockquote p
  {
    margin:0;
  }

  [data-theme="dark"] .blog-post__body blockquote, [data-theme="dark"] .main-pilar blockquote {
    background: -webkit-linear-gradient(45deg, var(--celeste-claro), var(--azul-claro));
    background: linear-gradient(45deg, var(--celeste-claro), var(--azul-claro));
  }

  [data-theme="dark"] .blog-post__body blockquote.bq-simple, [data-theme="dark"] .main-pilar blockquote.bq-simple {
    background: transparent;
  }

  
  .blog-post__body blockquote h5 {
    font-weight: unset;
    font-size: 1rem;
  }
  
  .hs-search-field--open ul.hs-search-field__suggestions {
    position: absolute;
    background: var(--bg);
    width: 100%;
    border: 1px solid var(--celeste-muted);
    border-radius: 0 0 8px 8px;
    z-index: 1;
  }
  
  .hs-search-field__suggestions #results-for, .hs-search-field__suggestions a {
    padding: 8px 16px;
    color: var(--font);
  }

  .hs-search-field__suggestions #results-for {
    color: #4ab0be;
  }

  .hs-search-field__suggestions a:focus, .hs-search-field__suggestions a:hover {
    background-color: var(--celeste-claro) !important;
  }
  
  .hs-search-field input.hs-search-field__input {
    padding: 12px 48px 12px 16px;
    border: 1px solid var(--celeste-muted);
    border-radius: 8px;
    background-color: var(--bg);
    color: var(--font);
  }
  
  .hs-search-field.hs-search-field--open input.hs-search-field__input {
    border: 1px solid var(--celeste-muted);
    border-radius: 8px 8px 0 0;
  }

  .hs-search-field input.hs-search-field__input:focus-visible {
    outline: none;
  }

  .search-container .material-symbols-rounded {
    position: absolute;
    z-index: 1;
    right: 0.5rem;
    top: 0.625rem;
    font-size: 2rem;
    color: var(--celeste);
    pointer-events: none;
  }
  
  /**
   * ----------------------------------------
   * animation heartbeat
   * ----------------------------------------
   */
   
  .blog-post__body .btn.btn-cta, .pulse {
      -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
              animation: heartbeat 1.5s ease-in-out infinite both;
  }
  
  @keyframes heartbeat {
    from {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: center center;
              transform-origin: center center;
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    10% {
      -webkit-transform: scale(0.91);
              transform: scale(0.91);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    17% {
      -webkit-transform: scale(0.98);
              transform: scale(0.98);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    33% {
      -webkit-transform: scale(0.87);
              transform: scale(0.87);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    45% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }
  
  @media (min-width: 640px){
    
  
    section.container,section.container-fluid{
      padding-bottom: 72px;
      padding-bottom: 4.5rem;
      padding-top: 72px;
      padding-top: 4.5rem;
    }
  
    .bg-celeste.bg-trama{
      background-size: 200%;
    }
    
    .plan-switch-container{
      width: 200px;
    }
    
  }
  

  @media (max-width: 991px){
  
    .dropdown-menu{
      border: none;
    }
    
  }
  

  @media (min-width: 768px){
    
    .btn, input.hs-button.primary, a.button, a.hs-button {
      width: auto;
    }
  
    .hero .text-container{
      text-align: left;
    }
  
    button[data-theme-toggle]{
      margin-right: 1.5rem;
    }

    table.comparativa>:not(caption)>*>* {
      padding: 0.5rem 0.25rem;
    }

    h1.title.blog-title{
      font-size: 3.25rem;
    }
  
    .funcionalidades-item{
      margin-bottom: 4rem;
    }
  
    .links-apps{
      -webkit-box-pack: start;
      justify-content: start;
    }
  }
  
  @media (min-width: 992px){

    table.comparativa>thead tr th:not(:first-child) h4 {
      font-size: 1.25rem;
      writing-mode: initial;
      -webkit-writing-mode: initial;
      -ms-writing-mode: initial;
    }

    table.comparativa > thead tr th:not(:first-child), table.comparativa > tbody tr td {
      padding: 1rem;
      width: 15%;
      min-width: 100px;
    }

    td.text-vertical {
      writing-mode: initial;
      -webkit-writing-mode: initial;
      -ms-writing-mode: initial;
    }
    
    .text-vertical span.material-symbols-rounded.tooltip-celda {
      top: 4px;
      bottom: unset;
      left: unset;
      right: 4px;
    }

    li.nav-item {
      display: flex;
      align-items: center;
    }

    h2{
      font-size: 40px;
      font-size: 2.5rem;
    }
  
    .hero h2.title{
      font-size: 48px;
      font-size: 3rem;
    }
  
    .bg-celeste.bg-trama{
      background-size: 100%;
    }
    
    .select-container.select-moneda-old {
      margin-top: -2.125rem;
    }
  
  
    span.tag-recomendado{
      font-size: 11px;
    }

    img.rounded, video.rounded{
      border-radius: 1.5rem !important;
    }
  
    .navbar-expand-lg .offcanvas .offcanvas-body{
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
    }
  
    .navbar-nav{
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: unset;
      gap: 1rem;
    }
  
    .navbar-brand{
      margin-right: 1rem;
      margin-bottom: 0.5rem;
    }
  
    .navbar .has-megamenu{
      position: static !important;
    }
  
    .navbar .megamenu{
      left: 0;
      margin-top: 0;
      right: 0;
      width: 100%;
    }
  
    .dropdown-menu{
      border: 1px solid var(--celeste-oscuro);
      border-radius: 1rem;
      box-shadow: 0 24px 32px -16px var(--sombra-1);
    }
  
    a.dropdown-item{
      padding: 0.75rem 1rem;
    }
  
    .dropdown-menu-lg a.dropdown-item{
      min-width: 360px;
    }
  
    footer{
      padding-bottom: 5rem;
      padding-top: 5rem;
    }
  
    .form-container{
      padding: 2rem;
    }
    
    .form-container.form-newsletter{
      padding: 1.5rem;
    }
    
    .form-container.form-newsletter h6 {
      color: var(--azul);
    }
    
    #form input.hs-button.primary {
      margin: 2rem -2rem -2rem -2rem;
      width: calc(100% + 4rem);
    }
    #form.form-newsletter input.hs-button.primary {
      margin: 1.5rem -1.5rem -1.5rem -1.5rem;
      width: calc(100% + 3rem);
    }
  
    .footer-title{
      margin-top: 0rem;
    }
  }
  
  @media (max-width: 991px){
  
    .benefits-container{
          grid-template-columns: 1fr;
          grid-template-rows: repeat(3, 1fr);
    }
  
    .benefits-container .benefit-content{
      -webkit-box-align: center;
      align-items: center;
      display: -webkit-box;
      display: flex;
      padding: 1rem;
    }
  
    .benefits-container .benefit-content .benefit-number{
      font-size: 2.5rem;
      font-weight: 700;
      line-height: 2.7rem;
    }
  
    .benefits-container .benefit-content .benefit-text{
      width: 50%;
    }
  }
  
  @media (max-width: 767px){
  
    .social-links-icons{
      -webkit-box-pack: center;
      justify-content: center;
    }
  }
  
  @media (max-width: 500px){
  
    .text-container{
      padding: 0;
    }
  
    .card-body{
      width: 99%;
    }
  
    .benefits-container .benefit-content .benefit-text{
      width: 87.5%;
    }
  }