:root {
    --bs-primary : rgb(3, 87, 114);
    --bs-primary-hover : rgb(196, 36, 108);
}
.comegico-white { color: #fff; }

.btn-comegico-1 {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.btn-comegico-1:hover {
    background-color: var(--bs-primary-hover);
    border-color: var(--bs-primary-hover);
    color: #fff;
}
.header-registro-comegico   {
    
    .logo-comegico-blanco {
        height: 135px;
				width: 102px;
    }
    .titulo-comegico-blanco {
        width: 100%;
				height: auto;
    }

}

/* Base styles already applied via tool */
header.header-registro-comegico {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding-left: 5%;
  padding-right: 5%;
}

header.header-registro-comegico > img {
  max-width: 45%; /* For smaller screens, closer to "across all the space" */
  height: auto;
}

/* For larger screens (e.g., desktops) */
@media (min-width: 992px) { /* Adjust breakpoint as needed for 'large screen' */
  header.header-registro-comegico {
    padding-left: 15%; /* More padding for large screens */
    padding-right: 15%; /* More padding for large screens */
  }
  header.header-registro-comegico {
    .logo-comegico-blanco {
         max-width: 35%; /* Allow images to take up more space */
    }
    .titulo-comegico-blanco {
         max-width: 50%; /* Allow images to take up more space */
    }
  }
}

/* For very small screens, if the 45% is still too much and causes overflow or excessive squishing */
@media (max-width: 576px) { /* Adjust breakpoint as needed for 'smaller screens' */
  header.header-registro-comegico {
    padding-top: 50px;
    padding-left: 2%; /* Even less padding for very small screens */
    padding-right: 2%;
  }
  header.header-registro-comegico {
    .logo-comegico-blanco {
        height: 80px;
        max-width: 35%; /* Allow images to take up more space */
				width: 55px;
    }
    .titulo-comegico-blanco {
        height: 60px;
        max-width: 60%; /* Allow images to take up more space */
    }

  }
}



/* Base styles already applied via tool */
header.header-congresista-comegico {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding-left: 5%;
  padding-right: 5%;
	background-image: linear-gradient(to right, #033e8d 0%, #814c91 100%);
}

header.header-congresista-comegico > img {
  max-width: 45%; /* For smaller screens, closer to "across all the space" */
  height: auto;
}

/* For larger screens (e.g., desktops) */
@media (min-width: 992px) { /* Adjust breakpoint as needed for 'large screen' */
  header.header-congresista-comegico {
    padding-left: 15%; /* More padding for large screens */
    padding-right: 15%; /* More padding for large screens */
  }
  header.header-congresista-comegico {
    .logo-comegico-blanco {
				max-width: 35%; /* Allow images to take up more space */
				max-width: 100px;
				max-height: 150px;
    }
    .titulo-comegico-blanco {
         max-width: 50%; /* Allow images to take up more space */
				 
    }
  }
}

/* For very small screens, if the 45% is still too much and causes overflow or excessive squishing */
@media (max-width: 576px) { /* Adjust breakpoint as needed for 'smaller screens' */
  header.header-congresista-comegico {
    padding-top: 50px;
    padding-left: 2%; /* Even less padding for very small screens */
    padding-right: 2%;
  }
  header.header-congresista-comegico {
    .logo-comegico-blanco {
        height: 80px;
        max-width: 35%; /* Allow images to take up more space */
				width: 55px;
    }
    .titulo-comegico-blanco {
        height: 60px;
        max-width: 60%; /* Allow images to take up more space */
    }

  }
}


.btn-comegico-1 {
		background-color: var(--bs-primary);
		border-color: var(--bs-primary);
		color: #fff;
		transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}


.comegico-pricing-card {
    /* Define the linear gradient background */
    background-image: linear-gradient(to right, #033e8d 0%, #814c91 100%);
    /* Ensure text is readable on the dark gradient */
    color: white;
    /* You might want to style the card-body for better contrast */
    font-size: 15px !important;

    .btn-pricing-1 {
        /* Base styles - similar to Option 1 */
        display: inline-block;
        font-weight: bold;
        line-height: 1.5;
        color: #fff;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        user-select: none;

        border: 1px solid transparent; /* Border might be transparent or match gradient edge */
        padding: 0.375rem 1.75rem;
        font-size: 1.352rem;
        font-family: 'Roboto', sans-serif;
        text-transform: uppercase;
        border-radius: 0.25rem;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

        /* Custom Gradient Background (example) */
        background-image: linear-gradient(to right, #004aad 0%, #cb6ce6 100%);
        border: 2px solid #a3a3a3d9;

        /* Hover effect - change background or shadow */
        &:hover {
        /* You could change the gradient slightly or add a shadow */
        filter: brightness(1.1); /* Slightly brighter on hover */
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
        }
        &:focus {
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25); /* Adjust focus shadow color */
        }
        &:active {
        filter: brightness(0.9); /* Slightly darker on active */
        box-shadow: none;
        }
    }
    .card-title {
        font-family: "Bebas Neue", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 60px !important;
        margin-bottom: 0px !important;
    }
    .card-body {
        padding: 2rem !important;
        h4, span {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        h4 { line-height: 1; font-size: 42px !important;  }
    }
    .price-value {
        font-size: 2.3rem !important;
    }
    .price.price-show {
        justify-content: center;
    }
    .price-currency, .price-duration, .price-value {
        color: #fff !important;
    }
    .icon-list.bullet-soft-primary i {
        color: #000 !important;
    }

  }
.comegico-pricing-card .card-title,
.comegico-pricing-card .card-text {
    color: white;
}

.categoria-seleccionada { font-size: 20px; }

.select2-container--bootstrap-5 .select2-selection {
	border: 1px solid rgba(8,60,130,.07) !important;
  min-height: calc(1.5em + .75rem + 8px) !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: #60697b !important;
    font-weight: 500 !important;
    font-family: 'Urbanist', sans-serif;
    font-size: .75rem !important;
    padding: .15rem !important;
}

.select2-container--bootstrap-5 .select2-selection {
    display: flex;
    align-items: center;
    border: 1px solid #CED8E5;
    border-radius: 0.375rem;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    background-color: #fff;
    color: #A6ACB7;
    line-height: 1.5;
}