/*
7Theme Name: iGuau
Theme URI: https://iguau.es
Description: Plantilla personalizada la web de iGuau.
Author: Gustavo Iglesias
Author URI: iGuau
Version: 1.0
License: GNU General Public License
License URI: licence/GPL.txt

CSS changes can be made in files in the /css/ folder. This is a placeholder file required by WordPress, so do not delete it.

*/
@font-face {
  font-family: 'GreatVibes';
  src: url('assets/fonts/GreatVibes-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/Poppins/Poppins-Medium.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/Poppins/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: bolder;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/Poppins/Poppins-ExtraLight.ttf') format('truetype');
  font-weight: lighter;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/Poppins/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/Poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto-Bold';
  src: url('assets/fonts/Roboto-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto-Light';
  src: url('assets/fonts/Roboto-Light.ttf') format('truetype');
  font-weight: 300;  
}

@font-face {
  font-family: 'Khand';
  src: url('assets/fonts/khand/Khand-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'AlexBrush-Regular';
  src: url('assets/fonts/AlexBrush-Regular.ttf') format('truetype');
  font-style: normal;
}
@font-face {
  font-family: 'Allura-Regular';
  src: url('assets/fonts/Allura-Regular.otf') format('truetype');
  font-style: normal;
}
@font-face {
  font-family: 'FeatherScript';
  src: url('assets/fonts/FeatherScript.otf') format('truetype');
  font-style: normal;
}
@font-face {
  font-family: 'Miama';
  src: url('assets/fonts/Miama.otf') format('truetype');
  font-style: normal;
}
@font-face {
  font-family: 'Penelope-Anne';
  src: url('assets/fonts/Penelope-Anne.ttf') format('truetype');
  font-style: normal;
}
@font-face {
  font-family: 'Allura-Regular';
  src: url('assets/fonts/Allura/Allura-Regular.ttf') format('truetype');
  /*font-style: normal;*/
}
@font-face {
  font-family: 'Montserrat-Light';
  src: url('assets/fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
  /*font-style: normal;*/
}
@font-face {
  font-family: 'LobsterTwo';
  src: url('assets/fonts/Lobster_Two/LobsterTwo-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Futura-Light';
  src: url('assets/fonts/futura/FuturaCyrillicLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Futura-Medium';
  src: url('assets/fonts/futura/FuturaCyrillicMedium.ttf') format('truetype');
}
@font-face {
  font-family: 'Futura-Bold';
  src: url('assets/fonts/futura/FuturaCyrillicBold.ttf') format('truetype');
}
@font-face {
  font-family: 'LexendDeca-Regular';
  src: URL('assets/fonts/LexendDeca-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'LexendDeca-Light';
  src: URL('assets/fonts/LexendDeca-Light.ttf') format('truetype');
}

:root {
  /* Colores principales adaptados */
  --primary-color: #ff6803;                 /* Naranja principal */
  --primary-suave: #ffb380;
  --primary-color-shadow: #ffba33;          /* Sombra más clara del principal */
  --secondary-color: #e85a00;               /* Naranja más oscuro */
  --secondary-color-shadow: #b84600;        /* Sombra aún más oscura */

  /* Variantes suaves */
  --primary-color-light: #ffe199;           /* Versión clara del color principal */
  --fondo-suave: #fff3d6;                   /* Fondo suave basado en #ffa600 */
  --fondo-iguau: #ffa600;
  --fondo-suave-transparente: rgba(255, 243, 214, 0.9);

  /* Terceros tonos */
  --terciary-color: #ffe9c2;                /* Tono crema derivado */
  --color-suave: #fff8e0;                   /* Suave universal */
  --page-bg: #f4f6f2;                       /* Color de fondo suave para toda la página */

  --surface-soft: #eef4ee;

  --bg: #f4f6f2;
  --ink: #17201d;
  --muted: #65716c;
  --surface: #ffffff;
  --surface-soft: #eef4ee;
  --line: rgba(23, 32, 29, 0.12);
  --green: #2f7d5c;
  --green-dark: #20563f;
  --coral: #e56d4f;
  --blue: #3f76af;
  --amber: #c58b24;
  --shadow: 0 18px 45px rgba(35, 51, 45, 0.12);

  --radius-lg: 24px;
  --radius-md: 16px;
  --max-width: 1180px;
}
body {
  font-family: 'Poppins', sans-serif!important;
  font-weight: 500!important;
  color: #222222!important;
  overflow-x: hidden;
  background-color: var(--page-bg) !important;
	background-image: url('assets/img/fondoiguau.png')!important;
	background-repeat: no-repeat!important;
	background-position: center top!important;
  /*background-attachment: fixed !important;*/
}
.logo {
	/*background-image: url('assets/img/iguaulogo-400.png');*/
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
  margin-top: 1%;
	height: 80px;
}

.container {
  margin-right: auto !important;
  margin-left: auto !important;
}
.eltdf-container-inner {
  width: 100%!important;
}
b, strong {
  font-weight: 900!important;
}
.fw-bold {
  font-weight: 600!important;
}
.fw-light {
  font-weight: 300!important;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.GreatVibes {
  font-family: 'GreatVibes'!important;
}
.fs-plus {
  font-size: 130%!important;
}
.fs-height {
  line-height: 2.2rem;
}
.khand {
  font-family: 'Khand'!important;
}
.AlexBrush {
  font-family: 'AlexBrush-Regular'!important;
}
.Allura {
  font-family: 'Allura-Regular'!important;
}
.FeatherScript {
  font-family: 'FeatherScript'!important;
}
.Miama {
  font-family: 'Miama'!important;
}
.Penelope-Anne {
  font-family: 'Penelope-Anne'!important;
  letter-spacing: 0.1em!important;
}
.Poppins {
  font-family: 'Poppins'!important;
  letter-spacing: 0.1em!important;
}
.Roboto-Bold {
  font-family: 'Roboto-Bold'!important;
}
.Roboto-Light {
  font-family: 'Roboto-Light'!important;
}
.Allura-Regular {
  font-family: 'Allura-Regular'!important;
}
.Montserrat-Light {
  font-family: 'Montserrat-Light'!important;
}
.LobsterTwo {
  font-family: 'LobsterTwo'!important;
}
.Futura-Light {
  font-family: 'Futura-Light'!important;
}
.Futura-Medium {
  font-family: 'Futura-Medium'!important;
}
.Futura-Bold {
  font-family: 'Futura-Bold'!important;
}
.bg-page-body {
  background-color: var(--page-bg)!important;
}
.bg-primary-color {
  background-color: var(--primary-color)!important;
}
.bg-primary-light {
  background-color: var(--fondo-suave)!important;
}
.bg-secondary-color {
  background-color: var(--secondary-color)!important;
}
.bg-secondary-color a {
  color: #f6e3d3!important;
}
.bg-secondary-color a:hover {
  color: white!important;
  text-decoration: underline!important;
}
.bg-terciary-color {
  background-color: var(--terciary-color)!important;
} 
.bg-color-suave {
  background-color: var(--fondo-suave)!important;
}
.btn {
  padding: 8px 16px!important;
  /*border-radius: 5px!important;*/
  text-decoration: none!important;
  /*font-size: 14px!important;
  font-weight: 600!important;*/
  transition: background-color 0.3s, color 0.3s!important;
	border-radius: 1.175rem!important;
}

.btn-primary {
  padding: 8px 16px!important;
  border: 1px solid var(--primary-color)!important;
  background-color: var(--primary-color)!important;
  color: #ffffff!important;
  /*border-radius: 5px!important;*/
  text-decoration: none!important;
  /*font-size: 14px!important;
  font-weight: 600!important;*/
  transition: background-color 0.3s, color 0.3s!important;
}
.btn-white {
  padding: 8px 16px!important;
  border: 1px solid white!important;
  background-color: white!important;
  color: black!important;
  text-decoration: none!important;
  transition: background-color 0.3s, color 0.3s!important;
}

.btn-white:hover {
  background-color: #f5f5f5!important;
  color: black!important;
  border: 1px solid #f5f5f5!important;
}


.btn-primary:hover {
  background-color: var(--secondary-color)!important;
  border: 1px solid var(--secondary-color)!important;
  color: #ffffff!important;
}

.btn-outline-primary {
  color: var(--primary-color)!important;
  --bs-btn-color: var(--primary-color)!important;
  --bs-btn-border-color: var(--primary-color)!important;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-color)!important;
  --bs-btn-hover-border-color: var(--primary-color)!important;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary-color)!important;
  --bs-btn-active-border-color: var(--primary-color)!important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--primary-color)!important;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--primary-color)!important;
  --bs-gradient: none;
  border: 2px solid var(--primary-color)!important;
  /*color: var(--primary-color)!important;*/
}
.btn-outline-primary:hover {
  background-color: var(--secondary-color)!important;
  color: #ffffff!important;
}
.btn.disabled {
    background-color: var(--fondo-suave)!important; /* tu color */
    color: #666 !important;               /* color del texto */
    border-color: #cccccc !important;     /* borde opcional */
    opacity: 1 !important;                /* quitar el efecto de transparencia */
}
.btn-sinborde {
  border: 0px!important;
}
.box-shadow {
  box-shadow: 0 0px 10px var(--primary-color-shadow); /* Aumenta la sombra */
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* Agrega un efecto adicional */
}
.box-shadow:hover {
  box-shadow: 0 0px 15px var(--primary-color-shadow); /* Resalta más al pasar el cursor */
}
.box-shadow-top {
  box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.1);
}
.box-shadow-left {
  box-shadow: -3px 0 5px rgba(0, 0, 0, 0.1);
}
.box-shadow-right {
  box-shadow: 3px 0 5px rgba(0, 0, 0, 0.1);
}
.pointer {
  cursor: pointer;
}
.move {
  cursor: move;
}
.background-dynamic {
  background-size: cover;
  background-position: center;
  height: auto;
  width: 100%;
  z-index: 0;
}
.background-right {
  background-position: right center!important;
}
.text-iguau {
  color: var(--primary-color)!important;
}
.text-iguau-secondary {
  color: var(--secondary-color)!important;
}
.text-secondary-suave {
  color: #cacac9!important;
}
.text-terciary {
  color: var(--terciary-color)!important;
}
.text-green {
  color: var(--green)!important;
}
.text-green-dark {
  color: var(--green-dark)!important;
}

a {
  color: var(--primary-color)!important;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  text-decoration: none!important;
}

a:hover {
  color: var(--secondary-color)!important;
  text-decoration: underline;
}
a:active {
  color: var(--primary-color)!important;
}

.a-dark {
  color: #333!important;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  text-decoration: none!important;
}

.a-dark:hover {
  color: var(--primary-color)!important;
  text-decoration: underline;
}
.a-dark:active {
  color: var(--primary-color)!important;
}

.a-white {
  color: white!important;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  text-decoration: none!important;
}

.a-white:hover {
  color: white!important;
  text-decoration: none!important;
}
.a-white:active {
  color: white!important;
}

a.custom-link {
  text-decoration: none;        /* Quita el subrayado */
  color: inherit;               /* Mantiene el color del texto */
  padding: 4px 6px;            /* Espaciado interno */
  border-radius: 8px;           /* Bordes redondeados */
  transition: background-color 0.3s ease; /* Animación suave */
  background: var(--surface-soft);
}
a.custom-link:hover {
  background-color: #e0e0e0;    /* Gris claro */
}

.custom-link {
  text-decoration: none;        /* Quita el subrayado */
  color: inherit;               /* Mantiene el color del texto */
  padding: 4px 6px;            /* Espaciado interno */
  border-radius: 8px;           /* Bordes redondeados */
  transition: background-color 0.3s ease; /* Animación suave */
  cursor: pointer;
  background: var(--surface-soft);
}
.custom-link:hover {
  background-color: #e0e0e0;    /* Gris claro */
  color: var(--primary-color)!important;
}
.custom-link.is-done {
  color: var(--green-dark)!important;
}

.card {
  /*border-color: #ff6780!important;*/
  border: 0!important;;
}
.bg-transparent {
  background-color: transparent!important;
}

/* Estilos para navegadores basados en WebKit (Chrome, Safari) */
::-webkit-scrollbar {
	width: 5px; /* Ancho del scrollbar vertical */
  height: 0px; /* Altura del scrollbar horizontal */
	background-color: transparent!important; /*#f5f5f5*/
}
::-webkit-scrollbar-track {
  /*-webkit-box-shadow: inset 0 0 6px rgba(200,200,200,1);*/
  border-radius: 0px;
}
::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background-color:var(--secondary-color);
	/*-webkit-box-shadow: inset 0 0 6px rgba(90,90,90,0.7);*/
}

ng-select .ng-placeholder {
  color: grey;
}
/* Estilizar las opciones del dropdown */
ng-select .ng-dropdown-panel .ng-option {
  background-color: #f8f9fa; /* Fondo claro */
  color: #333; /* Texto oscuro */
  padding: 2px 15px;
}

/* Cambiar el color al pasar el ratón sobre una opción */
ng-select .ng-dropdown-panel .ng-option:hover {
  background-color: var(--secondary-color); /* Fondo dinámico */
  color: white; /* Texto blanco para contraste */
  cursor: pointer; /* Cambiar el cursor a mano */
}

/* Estilo para el borde del dropdown */
ng-select .ng-dropdown-panel {
  border: 1px solid #dee2e6; /* Color del borde */
  border-radius: 4px; /* Esquinas redondeadas */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra */
}

/* Cambiar el estilo del grupo */
ng-select .ng-dropdown-panel .ng-optgroup {
  background-color: #f8f9fa; /* Fondo claro */
  font-weight: bold; /* Texto destacado */
  padding: 2px; /* Espaciado interno */
  border-bottom: 1px solid #dee2e6; /* Línea separadora */
}

/* Estilo para las opciones seleccionadas */
ng-select .ng-option.selected {
  background-color: #d1e7dd; /* Verde claro para opciones seleccionadas */
  color: var(--primary-color);; /* Texto verde oscuro */
  font-weight: bold;
}

/* Cambiar color de texto al pasar sobre una opción seleccionada */
ng-select .ng-option.selected:hover {
  background-color: var(--secondary-color); /* Color dinámico */
  color: white; /* Texto blanco */
}

/* Opcional: personalizar scrollbar del dropdown */
ng-select .ng-dropdown-panel::-webkit-scrollbar {
  width: 8px;
}
ng-select .ng-dropdown-panel::-webkit-scrollbar-thumb {
  background-color: #adb5bd; /* Color de la barra */
  border-radius: 4px;
}
ng-select .ng-dropdown-panel::-webkit-scrollbar-thumb:hover {
  background-color: #6c757d; /* Cambio de color al pasar el ratón */
}
/* Cambiar el color de la opción seleccionada */
.ng-select .ng-option-selected {
  background-color: var(--primary-color) !important;  /* Azul Bootstrap */
  color: white !important;
}
/* Cambiar el color de la opción sobre la que pasas con las teclas */
.ng-select .ng-option-marked {
  background-color: var(--primary-color) !important; /* Azul más claro */
  color: white !important;
}

.search-container {
  position: relative;
  width: 300px;
  margin: 0 auto;
}
.search-input {
  width: 100%;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.results-dropdown {
  position: absolute;
  width: 100%;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
}
.result-item {
  padding: 8px;
  cursor: pointer;
}
.result-item:hover {
  background-color: #f0f0f0;
}

.titulo-modulo {
  display: flex;
  align-items: center;
  /*font-family: 'Khand'!important;*/
  font-size: 1.2em;
}
.titulo-modulo::after {
  content: ""; /* Genera un elemento vacío */
  flex: 1; /* Ocupa todo el espacio disponible */
  height: 2px; /* Grosor de la línea */
  background-color: var(--secondary-color); /* Color de la línea */
  margin-left: 10px; /* Espacio entre el texto y la línea */
}

.titulo-modulo-left {
  display: flex;
  align-items: center;
  font-size: 1.2em;
}

.titulo-modulo-left::before {
  content: "";
  flex: 1; /* Ocupa el espacio disponible */
  height: 2px; /* Grosor de la línea */
  background-color: var(--secondary-color); /* Color */
  margin-right: 10px; /* Espacio entre línea y texto */
}

.titulo-modulo-center {
  display: flex;
  align-items: center;
  /*font-family: 'Khand' !important;*/
  /*font-size: 1.5em;*/
}

.titulo-modulo-center::before,
.titulo-modulo-center::after {
  content: ""; /* Genera un elemento vacío */
  flex: 1; /* Ocupa todo el espacio disponible */
  height: 2px; /* Grosor de la línea */
  background-color: var(--secondary-color); /* Color de la línea */
}

.titulo-modulo-center::before {
  margin-right: 10px; /* Espacio entre la línea izquierda y el texto */
}

.titulo-modulo-center::after {
  margin-left: 10px; /* Espacio entre el texto y la línea derecha */
}
.subtitulo-modulo {
  letter-spacing: 3px!important;
}

.modulo-fondo-1 {
  background-color: var(--secondary-color)!important; /*#c2afa1!important;*/
}
.modulo-fondo-2 {
  background-color: var(--primary-color-light)!important;/*#feedeb!important;*/
}
.modulo-fondo-3 {
  background-color: var(--fondo-suave)!important;/*#f2b2b3!important;*/
}

.container-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow: hidden; /* Asegura que todo lo fuera del contenedor quede cortado */
}

.circle {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: circle(60% at 0% 50%);
  transition: transform 0.3s ease;
  background-size: cover;
  background-position: right center;
}

.circle:hover {
  transform: scale(1.1); /* Agranda el círculo ligeramente al pasar el ratón */
}

.circle img {
  width: 150%; /* Haz la imagen más grande para asegurarte de cubrir el círculo */
  height: auto;
  object-fit: cover;
  object-position: center;
}
.pts {
  padding-top: 3%;
}
.pbs {
  padding-bottom: 5%;
}
.fondo-semi-transparente {
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px); /* Aplica el desenfoque */
  -webkit-backdrop-filter: blur(2px); /* Para compatibilidad con Safari */
  padding: 3%;
}
.img-service {
  width: 100%;
  border-radius: 5px;
}
.borde-bottom-primary {
  border-bottom: 1px solid var(--primary-color)!important;
}
.borde-top-primary-shadow {
  border-top: 1px solid var(--primary-color-shadow)!important;
}
.borde-bottom-primary-shadow {
  border-bottom: 1px solid var(--primary-color-shadow)!important;
}
.borde-top-secondary {
  border-top: 1px solid var(--secondary-color)!important;
}
.borde-top-terciary {
  border-top: 1px solid var(--terciary-color)!important;
}
.hide {
  display: none!important;
}
.main-container {
  display: flex;
  height: 100vh;
}
.main-content {
  flex: 1; /* Toma el espacio disponible */
  overflow-y: auto; /* Scroll vertical independiente */
  padding: 20px;
}
.sidebar {
  width: 25%; /* Ancho fijo para la barra lateral */
  overflow-y: auto; /* Scroll vertical independiente */
  overflow-x: hidden;
  padding: 20px;
}
/* Estilo para cambiar el color del placeholder */
input::placeholder {
  color: #aaaaaa!important; /* Cambia a tu color preferido */
}
.page-link {
  color: var(--primary-color)!important;
}
.pagination {
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--primary-color)!important;
  --bs-pagination-active-border-color: var(--primary-color)!important;
  --bs-pagination-disabled-color: var(--bs-secondary-color);
  --bs-pagination-disabled-bg: var(--bs-secondary-bg);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
  list-style: none;
}
/*.pagination.active {
  background-color: var(--primary-color)!important;
  color: white!important;
}*/

.active > .page-link, .page-link.active {
  color: white!important;
  background-color: var(--primary-color)!important;
  border-color: var(--primary-color)!important;
}
.border-left-iguau {
  border-left: 1px solid var(--primary-color); /* Borde izquierdo de 5px con color #ff6b6b */
  padding-left: 10px; /* Espaciado interno para separar el contenido del borde */
}
.border-iguau {
  border: 1px solid var(--primary-color); /* Borde de 5px con color #ff6b6b */
}
.alert-iguau {
  padding: 15px 20px; /* Espaciado interno */
  margin: 20px 0; /* Espaciado externo */
  border: 1px solid var(--primary-color);; /* Borde con el color personalizado */
  border-radius: 5px; /* Bordes redondeados */
  background-color: rgba(255, 107, 107, 0.2); /* Fondo con transparencia */
  color: var(--primary-color); /* Texto del color personalizado */
  font-size: 16px; /* Tamaño de fuente */
  line-height: 1.5; /* Altura de línea */
  position: relative; /* Necesario para posicionar el botón de cierre */
}
.alert-iguau strong {
  font-weight: bold; /* Énfasis en el texto en negrita */
}
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  color: var(--primary-color);;
  cursor: pointer;
  border: none;
  background: none;
  font-weight: bold;
}
.close-btn:hover {
  color: var(--primary-color);; /* Color más oscuro al pasar el mouse */
}
.active-href {
  color: var(--primary-color)!important;
  font-weight: bold;
}

.navbar-nav {
  --bs-nav-link-padding-x: 0!important;
  --bs-nav-link-padding-y: 0!important;
}
.bg-height {
  min-height: 150px!important;
  max-height: 150px!important;
}
.bg-height-md {
  min-height: 100px!important;
  max-height: 100px!important;
}
.bg-height-sm {
  min-height: 80px!important;
  max-height: 80px!important;
}
.bg-iguau {
  background-color: var(--primary-color)!important;
  color: white!important;
}
.bg-fondo-iguau {
  background-color: var(--fondo-iguau)!important;  
}
.bg-success-iguau {
  background-color: #7a9471!important;
  color: white!important;
}
.bg-iguau-gradient {
	background-image: linear-gradient(to bottom, rgba(255,0,0,0), rgba(0,0,0,1));	
}
.bg-iguau-gradient-top {
	background-image: linear-gradient(to top, rgba(255,0,0,0), rgba(0,0,0,0.8));	
}
.btn-check:checked + .btn {
  background-color: var(--primary-color)!important;
  color: white!important;
  border-color: var(--primary-color)!important;
}
.profile-picture {
  width: 40px; /* Ajusta el tamaño según lo necesites */
  height: 40px; /* Igual que el ancho para mantener proporciones */
  border-radius: 50%; /* Hace que el contenedor sea redondo */
  object-fit: cover; /* Asegura que la imagen se ajuste sin deformarse */
  box-shadow: 0 2px 5px var(--primary-color-shadow);/* rgba(0, 0, 0, 0.1);*/
  transition: box-shadow 0.3s ease;
}
.profile-picture-md {
  width: 60px; /* Ajusta el tamaño según lo necesites */
  height: 60px; /* Igual que el ancho para mantener proporciones */
}
.profile-picture-lg {
  width: 80px; /* Ajusta el tamaño según lo necesites */
  height: 80px; /* Igual que el ancho para mantener proporciones */
}
.profile-picture-xl {
  width: 120px; /* Ajusta el tamaño según lo necesites */
  height: 120px; /* Igual que el ancho para mantener proporciones */
}

.nav2 .nav-link {
  background: transparent!important;
  color: #333!important;
  padding: 10px!important;
  /*padding-bottom: 10px!important;*/
  text-align: left!important;
}
/*.nav2 .active {
  color: #ffffff!important;
}*/
.nav2 .tab-pane {
  font-weight:normal!important;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #ffffff!important;
  background-color: var(--primary-color)!important;
  border: 0!important;
}
.bg-confirmado {
  background-color: #198754!important;
  color: white!important;
}
.div-hover {
  transition: background-color 0.3s ease;
  border-radius: 5px;
}
.div-hover-active {
  transition: background-color 0.3s ease;
  border-radius: 5px;
  background-color: #ffa600;
}
.div-hover-active * {
  color: white!important;
}
.div-hover:hover {
  background-color: var(--secondary-color);
  color: white!important;
}
.div-hover:hover * {
  color: white!important;
}
.div-hover-terciary {
  transition: background-color 0.3s ease;
  border-radius: 5px;
}
.div-hover-terciary:hover {
  background-color: var(--terciary-color);
}

/* Cambiar el color del fondo del checkbox cuando no está marcado */
.form-check-input {
  /*width: 1.5rem;
  height: 1.5rem;*/
  /*transform: scale(1.25); */
  background-color: var(--fondo-suave)!important; /* Color de fondo */
  border-color: var(--primary-color)!important; /* Color del borde */
  cursor: pointer;
}

/* Cambiar el color del checkbox cuando está marcado */
.form-check-input:checked {
  background-color: var(--primary-color)!important; /* Color del fondo marcado */
  border-color: var(--primary-color)!important; /* Color del borde marcado */
}

/* Cambiar el color del ícono (checkmark) */
.form-check-input:checked::before {
  color: white!important; /* Cambia el color del checkmark */
}

/* Ajustar el enfoque (focus) para el checkbox */
.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 107, 107, 0.25)!important; /* Sombra al enfocar */
}
ul li::marker {
  color: var(--primary-color)!important;
}
.container-gradient {
  background: linear-gradient(rgba(255, 255, 255, 0), white);
  position: absolute;
  bottom: 0px;
  height: 6rem;
  width: 100%;
}
.custom-swal-confirm {
  background-color: var(--primary-color)!important;
  color: #fff !important;
  border-radius: 10px !important;
}
.custom-swal-cancel {
  background-color: var(--primary-color) !important;
  color: #fff !important;
  border-radius: 10px !important;
}
.rounded-mas {
  border-radius: 10%!important;
}
.image-container {
  position: relative;
  display: inline-block;
}
.image-container img {
  display: block;
  width: 100%; /* Ajusta según tus necesidades */
  height: auto;
}
.text-overlay {
  position: absolute;
  bottom: 10px; /* Para que se coloque en la parte inferior */
  left: 10px; /* Para alinearlo a la derecha */
  background-color: rgba(255, 255, 255, 0.7); /* Fondo blanco semitransparente */
  color: black; /* Texto en color negro */
  padding: 3px;
  padding-left: 15px; /* Espaciado interno */
  padding-right: 15px; /* Espaciado interno */  
  border-radius: 4px; /* Opcional: bordes redondeados */
}
.fade-left {
  /*width: 100%;*/
  position: relative;
}
.fade-left::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%; /* Controla el área del difuminado */
  height: 100%;
  background: linear-gradient(to right, white, transparent);
}
.padding-bottom {
  padding-bottom: 100px!important;
}
.search-container {
  display: flex;
  align-items: center;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  padding: 3px 15px;
}
.search-input {
  background-color: transparent;
  padding: 8px 10px;
  border: 0;
  outline: none;
  font-size: 16px;
  flex: 1; /* Hace que el input ocupe el espacio disponible */
}
.search-icon {
  font-size: 18px;
  color: #999;
  margin-left: 10px; /* Espacio entre el input y el icono */
}

#print-section {
  display: none;
}

@media print {
  body * {
    visibility: hidden;
  }

  #print-section, #print-section * {
    visibility: visible;
  }

  #print-section {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }

  .no-imprimir, 
  button, 
  nav {
    display: none !important;
  }

  /*html, body {
		width: 100%!important;
    margin-top: 0mm !important;
    margin-bottom: 0mm !important;
    background-image: none !important;
  }*/
  html, body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-sizing: border-box;
    -webkit-print-color-adjust: exact; /* Asegura que los colores se impriman correctamente */
    page-break-inside: avoid;
    print-color-adjust: exact;
  }

  * {
    box-sizing: border-box;
  }
  body > *:first-child {
    margin-top: -20mm !important;
    padding-top: 0 !important;
  }

  @page {
    margin-top: 10mm;
    margin-right: 10mm;
    margin-bottom: 10mm;
    margin-left: 10mm;
  }
  .table {
    margin-bottom: 0rem !important;
  }
  .table-sm td, .table-sm th {
    padding: .0rem !important;
  }
  .container {
    --bs-gutter-x: 0!important;
    --bs-gutter-y: 0!important;
    width: 100%!important;
    max-width: 100%!important;
    min-width: 100%!important;
    padding-right: 0!important;
    padding-left: 0!important;
    margin-right: 0!important;
    margin-left: 0!important;
  }
}
.sticky-top {
  top: 80px!important;
}
.margin-0 {
  padding: 0!important;
  margin: 0!important;
}
.padding-modulo {
  padding: 10%!important;
}
.bg-servicios {
  background-size:contain!important;
  background-repeat: no-repeat!important;
}
.bg-left {
  background-image: url('img/logo_wedinbo_marcaagua_left.png')!important;
  background-position: left!important;
}
.bg-rigth {
  background-image: url('img/logo_wedinbo_marcaagua_rigth.png')!important;
  background-position: right!important;
}
.bg-marcaagua-rigth {
  background-image: url('img/logo_wedinbo_marcaagua_blanco.png')!important;
  background-position: right!important;
  background-size: contain!important;
  background-repeat: no-repeat!important;
}
.bg-marcaagua-left {
  background-image: url('img/logo_wedinbo_marcaagua_blanco.png')!important;
  background-position: left!important;
  background-size: contain!important;
  background-repeat: no-repeat!important;
}

/* Estilos del input range */
.custom-range {
  accent-color: var(--primary-color)!important;
}

.custom-range::-webkit-slider-runnable-track {
  background: var(--fondo-suave)!important;
  height: 6px;
  border-radius: 5px;
}

.custom-range::-webkit-slider-thumb {
  background: var(--primary-color)!important;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -5px;
}
.g-0 {
  gap:0;
}
.g-1 {
  gap:1;
}
.g-2 {
  gap: 20px!important;;
}
.text-woman {
  color: #ef22ab!important;
}
.text-men {
  color: #3452f6!important;
}

.contenedor-scroll-pantalla-75 {
  height: 75vh; /* 100% de la altura del viewport (ventana del navegador) */
  overflow-y: auto; /* Muestra scroll vertical SÓLO si es necesario */
  overflow-x: auto; /* Opcional: Oculta el scroll horizontal si no lo quieres */
  box-sizing: border-box; /* Incluye padding y border en el alto total */
  /* Opcional: añade padding si quieres espacio interno */
  /* padding: 20px; */
  /* Opcional: añade un borde para visualizarlo */
  /* border: 2px solid red; */
}

.contenedor-scroll-pantalla-55 {
  height: 55vh; /* 100% de la altura del viewport (ventana del navegador) */
  overflow-y: auto; /* Muestra scroll vertical SÓLO si es necesario */
  overflow-x: auto; /* Opcional: Oculta el scroll horizontal si no lo quieres */
  box-sizing: border-box; /* Incluye padding y border en el alto total */
  /* Opcional: añade padding si quieres espacio interno */
  /* padding: 20px; */
  /* Opcional: añade un borde para visualizarlo */
  /* border: 2px solid red; */
}
i.fa-star {
  cursor: pointer; /* Hace que el cursor sea interactivo */
}

i.fa-star.text-muted:hover {
  color: #f0ad4e; /* Cambia el color de la estrella vacía al pasar el mouse */
}
.btn-xs {
    padding: 4px 8px !important;
}

#eltdf-back-to-top>span {
  position: relative;
  display: block;
  width: 39px;
  height: 39px;
  line-height: 40px;
  font-size: 15px;
  text-align: center;
  border-radius: 50%;
  color: var(--primary-color);
  background-color: var(--fondo-suave);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--fondo-suave);
  overflow: hidden;
  -webkit-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
  -moz-transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;
  transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
}
#eltdf-back-to-top>span:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

.disabled-div {
  pointer-events: none;
  opacity: 0.5;
}
.bloqueada-div {
  position: relative;
  opacity: 0.85; /* menos opaco */
  transition: all 0.3s ease;
}
.eltdf-btn {
  font-family: inherit!important;
  font-size: inherit!important;
  line-height: inherit!important;
  letter-spacing: inherit!important;
  font-weight: inherit!important;
  border-radius: 5px!important;
  padding-top: 0!important;
  padding-bottom: 0!important;
}
.offcanvas-backdrop.show {
  opacity: .3!important;
}
.parent-container {
  overflow: visible;
}
.gallery-container {
  width: 100%;
  min-height: 200px; /* Altura personalizada */
  background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
  background-position: center; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita la repetición de la imagen */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wpb_content_element {
  margin-bottom: 0!important;
}
#scrollToTop {
  position: fixed;
  bottom: 30px;
  left: 30px;
  display: none;
  background-color: var(--primary-color);
  color: white!important;
  font-size: 16px;
  text-align: center;
  padding: 8px 12px;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease;
  z-index: 9999;
}

#scrollToTop:hover {
  background-color: var(--secondary-color);
}

.input-underline {
  border: none;
  border-bottom: 1px solid transparent;
  outline: none;
  background-color: transparent;
  width: 100%;
  padding: 6px 4px;
  transition: border-color 0.3s;
}

/* Mostrar solo la línea inferior al enfocar */
.input-underline:focus {
  border-bottom: 2px solid #a56b3f; /* Cambia el color si quieres */
}

.z-top {
  z-index: 9999!important;
  position: absolute; /* o fixed/sticky según el caso */
}
.div-agua {
  background: rgba(255, 255, 255, 0.15); /* fondo semitransparente */
  backdrop-filter: blur(20px) saturate(180%); /* desenfoque + saturación estilo iOS */
  -webkit-backdrop-filter: blur(20px) saturate(180%); /* soporte Safari/iOS */
  border: 1px solid rgba(255, 255, 255, 0.25); /* borde suave */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); /* sombra ligera */
}
.div-agua a {
  color: #f6e3d3!important;
}
.div-agua a:hover {
  color: white!important;
  text-decoration: underline!important;
}
.div-agua-verde {
  background: rgba(123, 117, 92, 0.35); /* #7b755c con transparencia */
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  color: #fff; /* texto en blanco para contraste */
  border-radius: 12px;
  padding: 1rem;
}
.div-agua-verde a {
  color: #f6e3d3!important;
}
.div-agua-verde a:hover {
  color: white!important;
  text-decoration: underline!important;
}

.div-agua-naranja {
  /* Naranja translúcido basado en #ff6803 */
  background: rgba(255, 104, 3, 0.18);
  /*background: rgba(255, 179, 128, 0.25);*/

  /* Efecto agua / glass */
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);

  /* Borde naranja suave */
  border: 1px solid rgba(255, 104, 3, 0.35);

  /* Sombra con tinte naranja */
  box-shadow: 0 8px 32px rgba(255, 104, 3, 0.25);

  /* Opcional: mejora visual */
  border-radius: 16px;
}
.div-agua-naranja a {
  color: #ffd8bf !important; /* naranja pastel claro */
}
.div-agua-naranja a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

.div-agua-blanco {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0.15)
  );

  backdrop-filter: blur(25px) saturate(200%);
  -webkit-backdrop-filter: blur(25px) saturate(200%);

  border: 1px solid rgba(255, 255, 255, 0.4);

  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);

  border-radius: 18px;
}
.div-agua-blanco a {
  color: #f2f2f2 !important;
}
.div-agua-blanco a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

.div-agua-oscuro {
  background: linear-gradient(
    135deg,
    rgba(30, 30, 30, 0.55),
    rgba(20, 20, 20, 0.35)
  );

  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  border-radius: 18px;
}
.div-agua-oscuro a {
  color: #ffb380 !important; /* combina con tu naranja #ff6803 */
}
.div-agua-oscuro a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

.div-agua-naranja-oscuro {
  background: linear-gradient(
    135deg,
    rgba(140, 45, 0, 0.55),
    rgba(110, 35, 0, 0.35)
  );

  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);

  border: 1px solid rgba(255, 140, 60, 0.25);

  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 180, 120, 0.15);

  border-radius: 18px;
}
.div-agua-naranja-oscuro a {
  color: #ffd8bf !important;
}
.div-agua-naranja-oscuro a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

.div-center {
  text-align: -webkit-center;
}
.icon-input {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--secondary-color);
}
.toggle-eye {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--secondary-color);
  cursor: pointer;
}

.height-div {
  min-height: 500px!important;
}
.font-1 { 
  font-size: clamp(0.8rem, 1vw, 1em); 
  line-height: 1.3em; 
}

.font-1-5 { 
  font-size: clamp(1rem, 1.5vw, 1.5em); 
  line-height: 1.35em; 
}

.font-2 { 
  font-size: clamp(1.2rem, 2vw, 2em); 
  line-height: 1.4em; 
}

.font-3 { 
  font-size: clamp(1.5rem, 3vw, 3em); 
  line-height: 1.45em; 
}

.font-4 { 
  font-size: clamp(2rem, 4vw, 4em); 
  line-height: 1.5em; 
}

.font-5 { 
  font-size: clamp(2.5rem, 5vw, 5em); 
  line-height: 1.55em; 
}

.font-6 { 
  font-size: clamp(3rem, 6vw, 6em); 
  line-height: 1.6em; 
}

.font-7 {
  font-size: clamp(2rem, 6vw, 7em);
  line-height: 1.65em;
}

.border-top-dotted {
  border-top: 2px dotted #333; /* Cambia el color y grosor según tus necesidades */
}
.bg-white-transparente {
  background-color: rgba(255, 255, 255, 0.5)!important;
}

.hover-div {
  position: relative; /* Para posicionar el icono dentro del div */
  padding: 20px;
  background-color: transparent;
  transition: border 0.3s ease;
  border: 2px solid transparent;
}

.hover-div:hover {
  border: 2px solid var(--primary-color); /* Agregar un borde al hacer hover */
}

.hover-div .icon {
  position: absolute;
  top: 10px; /* Ajusta según tu diseño */
  right: 10px; /* Ajusta según tu diseño */
  font-size: 1.2rem;
  color: var(--primary-color);
  opacity: 0; /* Ocultar el icono inicialmente */
  transition: opacity 0.3s ease; /* Suavizar la aparición del icono */
}

.hover-div:hover .icon {
  opacity: 1; /* Mostrar el icono al pasar el ratón */
}

.offcanvas-custom {
  width: 50%!important; /* Ajusta el ancho según tu necesidad */
}

.fondo-transparente {
  background-color: rgba(255, 255, 255, 0.7);
  /*border-radius: 10px;*/
  padding-left: 3%;
  padding-right: 3%;
}
/* aplica al preview flotante (está en el body) y al elemento original */
.cdk-drag-preview,
.cdk-drag-dragging,
.cdk-drag-placeholder,
.div-hover-terciary.cdk-drag-dragging {
  background-color: rgba(255, 255, 255, 0.8) !important;
}
.img-fade {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* hace el "cover" tipo background */
  display: block;
  
  /* Aplica un degradado como máscara */
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 40%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  
  mask-image: linear-gradient(to bottom, transparent, black 40%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
.bg-fade {
  width: 100%;
  height: 300px;  /* ajusta según necesites */

  /* Difuminado superior con máscara */
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;

  mask-image: linear-gradient(to bottom, transparent, black 30%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
/* Membresía Básica */
.text-bg-basica {
  color: #000 !important;
  background-color: #FEF4ED !important;
}
/* Membresía Oro */
.text-bg-oro {
  color: #000 !important;
  background-color: #FFD700 !important;
}
/* Membresía Platinum */
.text-bg-platinum {
  color: #000 !important;
  background-color: #E5E4E2 !important;
}
/* Membresía Diamante */
.text-bg-diamante {
  color: #fff !important;
  background-color: #00CFFF !important;
}
.disabled-overlay {
  position: relative;
  pointer-events: none; /* Desactiva clics, hovers, etc. */
  opacity: 0.5; /* Lo hace ver desactivado */
  filter: grayscale(50%);
}
.disabled-overlay::after {
  /*content: "";*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  /*padding: 10px 20px;
  border-radius: 8px;
  font-size: 1rem;
  text-align: center;
  z-index: 10;
  animation: blink 1.5s infinite;*/
}
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
.form-select-bottom {
  border: none!important;
  /*border-bottom: 2px solid var(--primary-color);
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  transition: border-color 0.3s ease;*/
}
.custom-tabs {
  border-bottom: 2px solid var(--primary-color)!important;
  gap: 2px!important;
}
.custom-tabs-border {
  border-bottom: 1px solid var(--primary-color)!important;
  gap: 2px!important;
}
.custom-tabs .nav-link {
  /*color: #6c757d!important;*/
  border: 1px solid transparent!important;
  border-radius: 0!important;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease!important;
  border-top-left-radius: 5px!important;
  border-top-right-radius: 5px!important;
  background-color: transparent!important;
}
.custom-tabs .nav-link:hover {
  color: #ffffff!important;
  background-color: var(--primary-color)!important;
  border-color: var(--primary-color) var(--primary-color) transparent!important;
  border-top-left-radius: 5px!important;
  border-top-right-radius: 5px!important;
}
.custom-tabs .nav-link.active {
  color: #ffffff!important;
  background-color: var(--primary-color)!important;
  border-color: var(--primary-color) var(--primary-color) transparent!important;
  border-top-left-radius: 5px!important;
  border-top-right-radius: 5px!important;
}
.custom-tabs .nav-link.disabled {
  color: #6c757d!important;
  background-color: transparent!important;
  border-color: transparent!important;
  cursor: not-allowed!important;
}
.font-bold { font-weight: bold;	}
.font-normal { font-size: 1em; }
.font-titulo { font-size: 1.5em; }
.font-nombres { font-size: 2em; }
.font-fecha { font-size: 1.2em; }
.font-lugar { font-size: 1.1em; }

.custom-tabs.scrolled {
  background-color: white !important; /* Fondo cuando hace scroll */
}
.mini {
	font-size: 70%!important;
	font-family: 'LexendDeca-Light' !important;
}
.medium {
	font-size: 90%!important;
	font-family: 'LexendDeca-Light' !important;
}

/* Imagen grande */
.foto-grande {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
}
/* Texto superpuesto en la parte inferior */
.info-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 15px;
  color: white;
  font-size: 1rem;
}
/* Miniatura */
.thumb {
  cursor: pointer;
  transition: transform 0.2s;
}
.thumb:hover {
  transform: scale(1.05);
}
/* Centrado permanente del modal */
.modal-dialog {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0 auto; /* evita que se vaya a la izquierda */
}
/* Permite que el modal se adapte al contenido */
.modal-auto {
  max-width: none !important;
  width: auto !important;
}
.modal-auto .modal-content {
  width: auto !important;
  display: inline-block;
}
.badge {
  font-weight: 300!important;
}
 
.cerrar-contenedor {
  position: relative;
}
.cerrar {
  position: absolute;
  top: 0px;
  right: -8px;
  /*font-size: 20px;*/
  cursor: pointer;
  opacity: 0; /* Inicialmente oculto */
}
.cerrar-contenedor:hover .cerrar {
  opacity: 1; /* Mostrar al pasar el ratón por encima */
}
.leer-mas-bloque .oculto {
    max-height: 0;
    overflow: hidden;
    display: block;
    transition: max-height .4s ease;
}
.leer-mas-bloque .oculto.abierto {
    max-height: 500px; /* ajusta según tu contenido */
}
.form-label {
  margin-bottom: 0!important;
  font-size: .875em!important;
}

/* POPUP FOTO */
/* Fondo opaco pantalla completa */
#img-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Activado */
#img-popup-overlay.show {
  opacity: 1;
}

/* Contenedor que se adapta a la imagen */
#img-popup-container {
  position: relative;
  display: inline-block;          /* Importante: se ajusta al contenido */
  border: 6px solid white;
  border-radius: 6px;
  box-shadow: 0 0 20px rgba(255,255,255,0.5);
  background: #000;

  transform: scale(0.8);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Al abrir */
#img-popup-container.show {
  transform: scale(1);
  opacity: 1;
}

/* La imagen manda el tamaño, pero limitada por pantalla */
#img-popup-container img {
  display: block;
  max-width: 90vw;   /* Nunca más ancha que la pantalla */
  max-height: 90vh;  /* Nunca más alta que la pantalla */
  height: auto;
  width: auto;
}

/* Info superpuesta en la parte baja de la imagen */
#img-popup-info {
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8));
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;          /* Se ajusta al ancho de la imagen */
  padding: 10px 15px;
  color: white;
  font-size: 1rem;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Mostrar info cuando el contenedor aparece */
#img-popup-container.show #img-popup-info {
  opacity: 1;
}

.imagen-esquina {
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;         /* permite clickear lo que esté debajo */ 
  width: 200px;
}

.carousel-caption-title {
  background-color: rgba(255, 255, 255, 0.7); /* Blanco con 80% de opacidad */
  padding: 2px 10px; /* Espaciado interno */
  border-radius: 5px; /* Bordes redondeados */
  text-align: center; /* Centrar el texto */
  display: inline-block; /* Ajustar al tamaño del contenido */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
  color: #333; /* Color del texto */
  font-size: 80%;
}
/*.carousel-container {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
}*/

.carousel-track {
  display: flex;
  transition: transform 0.4s ease-in-out;
  width: 100%;
  max-width: 100%;
  /*gap: 5px;*/
}

/*.carousel-slide {
  flex: 0 0 100%;
  max-width: 100%;
  overflow: hidden;
}

.carousel-slide img {
  width: calc(100% - 10px);
  height: auto;
  display: block;
  max-width: 100%;
  object-fit: contain;
}*/

.carousel-container {
  width: 100%;
  max-width: 100%;
  /* CAMBIO: Permitimos que se vean las imágenes de los lados */
  overflow: visible; 
  position: relative;
  touch-action: pan-y;
}

/* OPCIONAL: Si no quieres que el carrusel rompa el layout de tu página 
   hacia los lados de la pantalla, envuelve el <app-carousel> en un div padre con overflow: hidden */

.carousel-slide {
  max-width: 100%;
  overflow: hidden;
  /* Transición suave para el cambio de opacidad */
  transition: opacity 0.4s ease-in-out;
  opacity: 1; 
}

/* CLASE NUEVA: Baja la opacidad a las imágenes fuera del foco activo */
.carousel-slide.dimmed {
  opacity: 0.35; /* Ajusta este valor a tu gusto (0.1 a 0.9) */
}

.carousel-slide img {
  width: calc(100% - 10px);
  margin: 0 auto; /* Centra la imagen dentro de su celda */
  height: auto;
  display: block;
  max-width: 100%;
  object-fit: contain;
}

/* NUEVO: Contenedor de nivel superior para controlar el diseño global */
.carousel-wrapper {
  width: 100%;
  max-width: 100%; /* O puedes poner un ancho máximo, ej. 900px */
  margin: 0 auto; /* Centrar en la página */
  position: relative;
}

.carousel-container {
  width: 100%;
  max-width: 100%;
  /* CAMBIO: Volvemos a 'visible', pero estará confinado por la máscara */
  overflow: visible; 
  position: relative;
  touch-action: pan-y;
}

/* NUEVO: La 'máscara de recorte'. Corta lo que se salga de este contenedor */
.carousel-mask {
  width: 100%;
  overflow: hidden; /* <--- ESTE ES EL PASO CLAVE */
  position: relative;
}

.carousel-track {
  display: flex;
  transition: transform 0.4s ease-in-out;
  /* El ancho se calcula dinámicamente si hay más de 1 imagen */
}

.carousel-slide {
  max-width: 100%;
  position: relative;
  overflow: hidden;
  transition: opacity 0.8s ease-in-out;
  opacity: 1;
}

.carousel-slide.dimmed {
  opacity: 0.3; /* Ajusta la opacidad de las laterales */
}

.carousel-slide img {
  /* CAMBIO: Eliminamos calc() y márgenes para que encajen justo en el corte de la máscara */
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Indicadores: aseguramos que estén sobre la máscara pero dentro del contenedor */
.mi-carousel-indicators {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10; /* Asegurar que esté por encima */
  display: flex;
  justify-content: center;
  gap: 10px;
  /* ... resto de estilos de indicadores iguales ... */
}

/* Contenedor de los indicadores */
.mi-carousel-indicators {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 20px;
  width: auto; /* se adapta al contenido */
  margin: 0;
  background: rgba(255, 255, 255, 0.15); /* fondo semitransparente */
  backdrop-filter: blur(20px) saturate(180%); /* desenfoque + saturación estilo iOS */
  -webkit-backdrop-filter: blur(20px) saturate(180%); /* soporte Safari/iOS */
  border: 1px solid rgba(255, 255, 255, 0.25); /* borde suave */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* sombra ligera */
}

/* Bolitas */
.mi-carousel-indicators .dot {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.25); /* borde suave */
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}

.mi-carousel-indicators .dot.active {
  background: var(--primary-color);
}

.imagenes-montadas {
  display: flex;
  align-items: end; /* alineación base del stack */
}

/* estilo base de las imágenes */
.imagenes-montadas img {
  object-fit: cover;
  border: 3px solid #fff;
  position: relative;
  transition: all 0.3s ease;
}

/* superposición horizontal */
.imagenes-montadas img:not(:first-child) {
  margin-left: -20px;
}
.imagenes-montadas-mas img:not(:first-child) {
  margin-left: -15px;
}

.imagenes-montadas-xl img:not(:first-child) {
  margin-left: -10%!important;
}

/* hover interactivo con sombra más pequeña */
.imagenes-montadas img:hover {
  transform: translateY(-2px) scale(1.05); /* se levanta un poco y agranda ligeramente */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* sombra más suave */
  z-index: 10; /* siempre encima de las demás */
}

/* opcional: animación suave del stack al hover */
.imagenes-montadas img:hover ~ img {
  /*margin-left: -10px;*/ /* las imágenes siguientes se separan un poco */
  transition: margin 0.2s ease;
}

.div-delete {
  position: relative;
}

.btn-delete {
  position: absolute;
  top: 6px;
  right: 6px;

  width: 22px;
  height: 22px;
  border-radius: 50%;

  background-color: var(--primary-color);
  color: #fff;

  font-size: 12px;
  line-height: 22px;
  text-align: center;

  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  transition: all 0.2s ease;
}

/* Mostrar al pasar el ratón por el div */
.div-delete:hover .btn-delete {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

/* Hover sobre el icono */
.btn-delete:hover {
  background-color: var(--primary-color);
}

.col-limit {
  max-width: 83.333333%; /* 10 / 12 columnas */
}
.text-scale {
  font-size: 1.2em!important;
}
.badge-light-gray {
  background-color: var(--bs-gray-500);
  color: var(--bs-gray-700);
}
::placeholder {
  color: #bdbdbd; /* gris claro */
  opacity: 1;     /* evita que se vea más claro en algunos navegadores */
}
input::placeholder,
textarea::placeholder {
  color: #bdbdbd;
}
input::-webkit-input-placeholder { color: #bdbdbd; }
input::-moz-placeholder { color: #bdbdbd; }
input:-ms-input-placeholder { color: #bdbdbd; }
input::placeholder { color: #bdbdbd; }
.date-input {
  color: transparent;
}
.date-input:focus,
.date-input:not(:placeholder-shown) {
  color: #212529;
}
.online-green {
  color: #00ff00; /* verde puro */
}
.icon-glow {
  text-shadow: 0 0 6px white, 
               0 0 12px white;
}
/*
textarea {
  border: none!important;
  outline: none!important;
  box-shadow: none!important;
  resize: none!important;
}
*/
.opcion {
  color: white;
  transition: all 0.3s ease;
  cursor: pointer;
}
.opcion:hover {
  background-color: white;
  color: var(--primary-color);
}
.opcion-active {
  background-color: white;
  color: var(--primary-color);
}
.opcion-2 {
  color: var(--primary-color);
  transition: all 0.3s ease;
  cursor: pointer;
}
.opcion-2:hover {
  background-color: var(--primary-color);
  color: white;
}
.plugins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}
.swal2-top-end {
  width: 600px!important;
  max-width: 99%!important;
}
.disabled-div {
  pointer-events: none!important;
  opacity: 0.5!important;
}
.text-body {
  color: #222222!important;
}
.btn-gray {
  background-color: white!important;
  transition: all 0.3s ease; /* animación suave */
}
.btn-gray:hover {  background-color: #f0f1f5!important;
  color: black!important;
  border: 1px solid #f0f1f5!important;
}
.elementor-11 .elementor-element .elementor-button {
  color: white!important;
}
#cmplz-document, .editor-styles-wrapper .cmplz-unlinked-mode {
  max-width: inherit!important;
}
.bg-white {
  z-index: 1!important;
}
.div-shadow {
  box-shadow: 0 18px 50px rgba(18, 40, 44, 0.12);
}
.blur-strong {
  pointer-events: none;
  filter: blur(6px);
  user-select: none;
}
.vibrate-icon {
  display: inline-block;
  animation-name: vibrateIcon;
  animation-duration: 0.4s;
  animation-iteration-count: 15;
  transform-origin: center;
}
@keyframes vibrateIcon {
  0%   { transform: rotate(0deg) translate(0, 0); }
  20%  { transform: rotate(-6deg) translate(-1px, 1px); }
  40%  { transform: rotate(6deg) translate(1px, -1px); }
  60%  { transform: rotate(-5deg) translate(-1px, 1px); }
  80%  { transform: rotate(5deg) translate(1px, -1px); }
  100% { transform: rotate(0deg) translate(0, 0); }
}
.top-iguau {
  height: 100%;

  background: linear-gradient(
    to bottom,
    var(--primary-color) 0%,
    var(--primary-color) 50px,
    transparent 50px
  );
}
.borde-blanco{
  border: 4px solid white;
}
.perfil-nombre {
  font-family: Arial, sans-serif;
  max-width: 10ch;
  font-size: clamp(2.1rem, 4vw, 3rem);
  line-height: 1;
  display: block;
  /*font-size: 2em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;*/
  font-weight: bold;
  unicode-bidi: isolate;
}

.pet-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  /*min-height: 30px;
  padding: 0.35rem 0.62rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;*/
}

dl {
  margin: 0;
}

.next-visit dl,
.pet-details {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.75rem;
}

dt {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

dd {
  margin: 0.16rem 0 0;
  font-weight: 800;
}

.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.5rem 0 0;
}

.stats-strip article {
  padding: 1.15rem;
  border-radius: var(--radius-md);
}

.stats-strip strong {
  display: block;
  font-size: 2rem;
}

.stats-strip span {
  color: var(--muted);
}

.section-heading {
  max-width: 700px;
  margin-bottom: 1.7rem;
}

.split-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  max-width: none;
}

.pet-filters {
  display: flex;
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}

.filter-button {
  border: 0;
  cursor: pointer;
  background: transparent;
}

.filter-button.is-active {
  color: #fff;
  background: var(--green-dark);
}

.pets-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.pet-card {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.pet-card.is-hidden {
  display: none;
}

.pet-card .img-card {
  width: 100%;
  aspect-ratio: 6 / 3;
  object-fit: cover;
}

.pet-card-body {
  padding: 1.2rem;
}

.pet-title-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.pet-title-row h3 {
  font-size: 1.45rem;
}

.tag-ok {
  color: #155235;
  background: #d9f1e5;
}

.tag-alert {
  color: #8e2c1b;
  background: #ffe0d5;
}

.tag-watch {
  color: #744d08;
  background: #ffedbf;
}

.pet-note {
  margin: 1rem 0 0;
  color: #4d5d57;
  line-height: 1.55;
}

.two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 1.2rem;
  align-items: start;
}

.trait-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 1rem;
}
.trait-list span {
    min-height: 30px;
    padding: 0.38rem 0.62rem;
    border: 1px solid rgba(47, 125, 92, 0.18);
    border-radius: 999px;
    color: #285844;
    background: #eef7f1;
    font-size: 0.72rem;
    font-weight: 700;
}
.social-panel {
    display: grid;
    gap: 0.85rem;
    /*max-width: 620px;*/
    /*margin-top: 1.4rem;*/
    padding: 0.95rem;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
}
.social-stats, .social-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.social-stats .div-stat {
    color: var(--muted);
    background: var(--surface-soft);
}
.social-stats .div-stat, .icon-action {
    min-height: 36px;
    padding: 0.5rem 0.72rem;
    border-radius: 999px;
}
.social-stats .div-stat:hover,
.icon-action:hover {
    filter: brightness(0.92);
    transition: filter 0.2s ease;
}
.status-pill {
  color: #fff;
  background: var(--blue);
}
.status-pill, .pet-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  padding: 0.35rem 0.62rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.alert-list {
  display: grid;
  gap: 0.85rem;
}

.alert-item {
  display: flex;
  gap: 0.9rem;
  padding: 1.1rem;
  border-radius: var(--radius-md);
}

.alert-item span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: #fff;
  font-weight: 800;
}

.alert-item.high span {
  background: var(--coral);
}

.alert-item.medium span {
  background: var(--amber);
}

.pet-thumbnails {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  left: 0.75rem;
  display: flex;
  gap: 0.45rem;
}
.pet-thumb {
  width: 52px;
  height: 52px;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  opacity: 0.82;
  transition: opacity 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.pet-thumb:hover {
  opacity: 1;
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.9);
}
.thumb-popup {
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  /*opacity: 0.82;*/
  transition: opacity 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.thumb-popup:hover {
  opacity: 1;
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.9);
}
.pet-filters {
  display: flex;
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}

.filter-button {
  border: 0;
  cursor: pointer;
  background: transparent;
}

.filter-button.is-active {
  color: #fff;
  background: var(--amber)!important;
}
.site-nav a, .filter-button {
  border-radius: 999px;
  padding: 0.72rem 0.95rem;
  color: #34423d;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.site-nav a:hover, .filter-button:hover {
  transform: translateY(-1px);
  background: var(--surface-soft);
}

.cuidado-fecha {
    padding: 0.34rem 0.58rem;
    border-radius: 999px;
    color: var(--green-dark);
    background: #d9f1e5;
    font-weight: 800;
    /*white-space: nowrap;*/
}
.cuidado-fecha.is-due {
  color: #8e2c1b;
  background: #ffe0d5;
}

.is-done strong {
  text-decoration: line-through;
}
.eyebrow {
  margin: 0 0 0.75rem;
  color: var(--green-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.post-type {
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  margin-bottom: 0.28rem;
  padding: 0.22rem 0.48rem;
  border-radius: 999px;
  color: var(--green-dark);
  background: #eef7f1;
  font-size: 0.72rem;
  font-weight: 800;
}
.post-type.type01 {
  color: #fff;
  background: var(--blue);
}
.post-type.type02 {
  color: #fff;
  background: var(--green);
}
.post-type.type03 {
  color: #fff;
  background: var(--amber);
}
.walk-post {
  border-color: rgba(63, 118, 175, 0.24);
}

.walk-details {
  /*display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));*/
  gap: 0.65rem;
  padding: 0.85rem;
  border-radius: var(--radius-md);
  background: #edf5ff;
}

.walk-details div {
  display: grid;
  gap: 0.2rem;
}

.walk-details div {
  color: #4d6b86;
  /*font-size: 0.76rem;
  font-weight: 800;*/
  text-transform: uppercase;
}

.walk-details strong {
  color: #17324b;
}

.visibility-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 0 0 1rem;
  padding: 0.72rem;
  border: 1px solid rgba(47, 125, 92, 0.16);
  border-radius: 16px;
  background: #eef7f1;
}

.visibility-control.is-private {
  border-color: rgba(101, 113, 108, 0.18);
  background: #f0f2ef;
}

.visibility-status {
  color: var(--green-dark);
  font-size: 0.88rem;
  font-weight: 800;
}

.visibility-control.is-private .visibility-status {
  color: var(--muted);
}

.switch-control {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.switch-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-control span {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #cfd8d3;
  transition: background-color 160ms ease;
}

.switch-control span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(23, 32, 29, 0.22);
  content: "";
  transition: transform 160ms ease;
}

.switch-control input:checked + span {
  background: var(--green);
}

.switch-control input:checked + span::after {
  transform: translateX(20px);
}

.switch-control input:focus + span {
  box-shadow: 0 0 0 4px rgba(47, 125, 92, 0.14);
}

.switch-control strong {
  min-width: 54px;
  color: var(--ink);
  font-size: 0.84rem;
}

.wall-filter-list {
  display: grid;
  gap: 0.55rem;
}

.wall-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  min-height: 44px;
  padding: 0.68rem 0.78rem;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--muted);
  background: var(--surface-soft);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.wall-filter:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 125, 92, 0.18);
  background: #fff;
}

.wall-filter.is-active {
  color: #fff;
  background: var(--green-dark);
}

.wall-filter.is-active01 {
  color: #fff;
  background: var(--blue);
}
.wall-filter.is-active02 {
  color: #fff;
  background: var(--green);
}
.wall-filter.is-active03 {
  color: #fff;
  background: var(--amber);
}

.wall-filter strong {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  color: var(--green-dark);
  background: #fff;
}

.wall-filter.is-active strong {
  color: var(--green-dark);
}

.wall-feed {
  display: grid;
  gap: 1rem;
}