.elementor-802 .elementor-element.elementor-element-2dac020{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-802 .elementor-element.elementor-element-29264d9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-802 .elementor-element.elementor-element-6e14d01{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-802 .elementor-element.elementor-element-56bbe50.elementor-element{--align-self:center;}.elementor-802 .elementor-element.elementor-element-56bbe50 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;color:#000000;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-802 .elementor-element.elementor-element-bd11edd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-802 .elementor-element.elementor-element-b46552e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-802 .elementor-element.elementor-element-6477645{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-b84ac77 */body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: #f4f6f9;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  padding: 2rem;
}

.card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  max-width: 320px;
  flex: 1 1 280px;
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
}

.card img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  padding: 1rem;
  background-color: white;
}

.card-content {
  padding: 1rem;
}

.card-content h2 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.card-content p {
  font-size: 0.95rem;
  color: #555;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d6413bc *//* ======================================================
   A) POSICIONAMIENTO “sticky” Y ESTILO GENERAL DE LA SIDEBAR
   ====================================================== */
/* El contenedor principal de la sidebar:
   - position: fixed → permanece fijo al hacer scroll.
   - top: 0; left: 0 → siempre en la esquina superior izquierda.
   - height: 100vh → ocupa el 100% de la altura de la ventana.
   - width: 250px → ancho por defecto cuando está expandida.
   - transition: width 0.3s ease → animación suave al cambiar el ancho.
   - overflow-x: hidden → oculta el contenido sobrante cuando se colapsa.
   - z-index: 9999 → por encima del resto del contenido.
   - background-color y border-right → estilo visual.
   - display: flex; flex-direction: column → organiza hijos en columna.
*/
#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;           
  width: 222px;            
  transition: width 0.3s ease;
  overflow-x: hidden;      
  z-index: 9999;
  background-color: #f8f9fa;
  border-right: 1px solid #dee2e6;
  display: flex;
  flex-direction: column;
}

/* Cabecera interna de la sidebar:
   - padding vertical para separar del borde.
   - position: relative → para que el botón “☰” posicionado en absoluto
     se oriente respecto a este contenedor.
*/
#sidebar .header-sidebar {
  padding-top: 0.72rem;
  padding-bottom: 0.75rem;
  position: relative;      
}

/* ======================================================
   B) BOTÓN “☰” (btn-toggle) DENTRO DE LA CABECERA
   ====================================================== */
/* El botón “☰” que sirve para colapsar/expandir:
   - background-color, border y box-shadow → estilo visual.
   - border-radius: 4px 0 0 4px → redondea sólo las esquinas izquierdas.
   - padding: 0.25rem 0.5rem → espacio interno cómodo.
   - display: flex; align-items: center; justify-content: center → centra el icono.
   - cursor: pointer → muestra cursor de mano.
   - transition sobre background-color, right y transform → animación suave.
   - z-index: 10000 → por encima de los demás elementos internos.
   - El posicionamiento (top:50%; right:0; transform:translateY(-50%))
     se define inline en el HTML para centrar verticalmente respecto a la cabecera.
*/
#sidebar #btn-toggle {
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 4px 0 0 4px; 
  padding: 0.25rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: background-color 0.2s ease, right 0.3s ease, transform 0.3s ease;
  z-index: 10000;
}
#sidebar #btn-toggle:hover {
  background-color: #f1f1f1;
}
#sidebar #btn-toggle i {
  color: #212529;
}

/* ======================================================
   C) ESTILO BÁSICO DE LOS ENLACES (ICONO + TEXTO)
   ====================================================== */
/* Cada enlace de la lista (nav-link):
   - color, font-weight → apariencia del texto.
   - display: flex; align-items: center → para mostrar icono + texto alineados.
   - transition: padding 0.3s ease → animación suave al colapsar.
   - padding-left / padding-right: 1rem → separación del borde cuando está expandido.
*/
#sidebar .nav-link {
  color: #212529;
  font-weight: 500;
  display: flex;
  align-items: center;
  transition: padding 0.3s ease;
  padding-left: 1rem;      
  padding-right: 1rem;
}
/* El icono dentro del enlace:
   - min-width: 1.25rem → ancho mínimo para que no “salte” al colapsar.
   - text-align: center → centra el “glyph” en ese espacio.
*/
#sidebar .nav-link i {
  min-width: 1.25rem;       
  text-align: center;
}
#sidebar .nav-link:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #000;
}

/* ======================================================
   D) TEXTO DE LOS ENLACES (span.link-text)
   ====================================================== */
/* El texto que acompaña a cada icono dentro del enlace:
   - white-space: nowrap → evita quiebres de línea.
   - opacity: 1; transition: opacity 0.3s ease → para “desvanecerlo” al colapsar.
*/
#sidebar .link-text {
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* ======================================================
   E) ESTADO “collapsed” CUANDO EL NAV TIENE LA CLASE
   ====================================================== */
/* 1) Reducir ancho a 70px: al añadir .collapsed, el ancho pasa de 250px → 70px */
#sidebar.collapsed {
  width: 70px !important;
}

/* 2) Ocultar por completo la palabra “Menú” dentro de .header-sidebar */
#sidebar.collapsed .header-sidebar .fw-bold {
  display: none !important;
  opacity: 0 !important;
}

/* 3) Ocultar el texto de cada enlace (span.link-text) */
#sidebar.collapsed .link-text {
  display: none !important;
  opacity: 0 !important;
}

/* 4) Centrar los iconos al colapsar:
   - justify-content: center → el <i> queda en el centro de los 70px.
   - padding-left/right: 0 → sin espaciado lateral.
*/
#sidebar.collapsed .nav-link {
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 5) Ajuste del botón “☰” cuando está colapsado:
   - width: 70px → que ocupe todo el ancho de la sidebar colapsada.
   - right: 0 → se pega al borde derecho de la barra de 70px.
   - transform: translateY(-50%) rotate(180deg) → rota 180° y mantiene el centrado vertical.
   - border-radius: 0 → quita redondeos para que abarque toda la anchura.
*/
#sidebar.collapsed #btn-toggle {
  width: 70px !important;
  right: 0 !important;      
  transform: translateY(-50%) rotate(180deg) !important;
  border-radius: 0 !important; 
}

/* ======================================================
   F) MÁRGEN IZQUIERDO PARA TU CONTENIDO PRINCIPAL
   ====================================================== */
/* Para que tu contenido no quede oculto tras la sidebar,
   asigna en la sección/columna principal de Elementor:
     margin-left: 250px;
   Cuando colapse, seguirá en 250px (si deseas que se mueva a 70px,
   tendrías que agregar JS adicional o un contenedor #main-content
   con CSS dinámico). *//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-464aafe */.back-fixed-btn {
  position: fixed;       /* Flota sobre toda la página */
  bottom: 60px;          /* 60px desde el borde inferior */
  right: 20px;           /* 20px desde el borde derecho */
  z-index: 9999;         /* Siempre encima */
  width: 65px;           /* Tamaño del botón circular */
  height: 90px;
  border-radius: 50%;    /* Lo hace circular */
  background-color: transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  /* Transición suave para aparecer/desaparecer */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none; /* No responde a clics mientras está oculto */
}

.back-fixed-btn.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; /* Habilita clics en estado visible */
}

.back-fixed-btn:hover {
  transform: scale(1.1); /* Zoom al pasar sobre el botón */
}

.back-fixed-btn img {
  width: 80%;            /* El ícono ocupa el 80% del círculo */
  height: 80%;
  object-fit: contain;
  border-radius: 0;      /* Quitar redondeo para que no recorte la flecha */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-577d938 *//* Botón flotante */
.whatsapp-fixed-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  cursor: pointer;
  /* IMPORTANTE: overflow visible para que no recorte nada del <img> */
  overflow: visible;
}

/* Hover con ligero zoom */
.whatsapp-fixed-btn:hover {
  transform: scale(1.1);
}

/* Ajuste del <img> para que quepa completo y no tenga bordes redondeados */
.whatsapp-fixed-btn img {
  width: 80%;       /* o ajusta al tamaño que necesites */
  height: auto;
  object-fit: contain;
  border-radius: 0; /* quitar redondeo para que no recorte la "colita" */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2542da6 *//* ================================================
   MENÚ MÓVIL/TABLET (< 992px) CON ALETA INVISIBLE
   EN SCROLL HACIA ARRIBA Y VISIBLE EN SCROLL HACIA ABAJO
   ================================================ */

/* 1) Contenedor principal */
#mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
}

/* 2) Aleta (tab) como botón centrado y sticky */
#mobile-menu .mobile-menu-tab {
  position: fixed;            /* fijo en la pantalla */
  top: 0;
  left: 50%;
  width: 120px;               /* ancho de la aleta */
  height: 40px;               /* alto de la aleta */
  transform: translateX(-50%) translateY(0);
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-bottom: none;        /* sin línea inferior para efecto “aleta” */
  border-radius: 0 0 8px 8px; /* esquinas redondeadas abajo */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 10001;
}

/* 2.1) Icono “☰” dentro de la aleta */
#mobile-menu .mobile-menu-icon {
  font-size: 1.5rem;
  color: #212529;
}

/* 3) Efecto “scroll-down”: la aleta baja 20px (50% de altura) */
#mobile-menu .mobile-menu-tab.scroll-down {
  transform: translateX(-50%) translateY(-30px);
}

/* 4) Hover de la aleta */
#mobile-menu .mobile-menu-tab:hover {
  background-color: #f9f9f9;
}

/* 5) Contenedor desplegable (dropdown) de enlaces */
#mobile-dropdown {
  position: absolute;
  top: 40px;                   /* justo debajo de la aleta (40px de alto) */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;                  /* ocupa el 90% del ancho de pantalla */
  max-width: 400px;            /* opcional para tablets horizontales */
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 0 0 8px 8px;  /* esquinas redondeadas abajo */
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  overflow-y: auto;
  max-height: calc(100vh - 50px); /* para permitir scroll interno */
  display: none;               /* oculto por defecto */
  z-index: 9999;
}

/* 5.1) Mostrar cuando no tenga .d-none */
#mobile-dropdown:not(.d-none) {
  display: block !important;
}

/* 6) Lista de enlaces dentro del dropdown */
#mobile-dropdown .mobile-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
#mobile-dropdown .mobile-nav .nav-item {
  border-bottom: 1px solid #f0f0f0;
}
#mobile-dropdown .mobile-nav .nav-item:last-child {
  border-bottom: none;
}
#mobile-dropdown .mobile-nav .nav-link {
  color: #212529;
  font-weight: 500;
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  transition: background-color 0.2s ease;
}
#mobile-dropdown .mobile-nav .nav-link i {
  font-size: 1.2rem;
  margin-right: 0.75rem;
  color: #495057;
}
#mobile-dropdown .mobile-nav .nav-link span {
  font-size: 1rem;
}
#mobile-dropdown .mobile-nav .nav-link:hover {
  background-color: rgba(0,0,0,0.05);
}

/* 7) Reservar espacio en el contenido principal para la aleta */
body {
  padding-top: 40px; /* deja 40px para que la aleta no tape el contenido */
}

/* 8) Ocultar este menú en escritorio ≥ 992px (si fuera necesario) */
@media (min-width: 992px) {
  #mobile-menu {
    display: none !important;
  }
}/* End custom CSS */