:root {
    --color-green: #D8F859;
    --color-green-2: #BBFF00; 
}

.color-green, .color-green b, .color-green strong {
    color: var(--color-green);
}
.border-color-green {
    border-color: var(--color-green);
}

.floatImgTup2, .floatImgTup3 {
    width: 82%;
}
.floatImgTup1, .floatImgTup1 img {
    height: 100%;
}
.dh-screen {
    height: 100dvh;
}
.content-area {
    padding: 0 9vw;
}
.lightColorText {
    color: #F9F9F7;
}
.mainTitleTup {    
    font-size: clamp(5.25rem, 3.4691rem + 1.7798vw, 6.25rem);
    font-weight: 600;
    line-height: 1.2;
}
.dateTextPillTup {
    font-size: 26px;
    font-weight: 400;
    b, strong {
        font-weight: 600;
    }
}
.descriptionTextTup {
    font-size: 24px;
    font-weight: 400;
    b, strong {
        font-weight: 600;
    }
}
.informationRowTup {
    margin-bottom: 1.5%;
}
.informationRowBoxTup {
    justify-content: space-between;
}
.informationRowBoxTup .labelTup {
    font-weight: 400;
    font-size: 22px;
    b, strong {
        font-weight: 600;
    }
}
.floatImgTup2 img {
    max-width: 80%;
}
.floatImgTup3 img {
    max-width: 90%;
    margin-left: 5%;
}

/* AGREGAR AL CALENDARIO - MODO DROPUP */
/* Contenedor principal con posicionamiento relativo */
.custom-calendar-dropdown {
  position: relative;
  display: inline-block;
  margin: 20px 0;
}

/* Diseño del botón disparador principal */
.custom-calendar-dropdown .dropdown-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--color-green-2);
  color: #232320;
  border: none;
  padding: 12px 24px;
  font-family: var(--font-clash);
  text-transform: uppercase;  
  font-size: 16px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.custom-calendar-dropdown .dropdown-trigger-btn:hover {
  background-color: var(--color-green);
}

/* El menú oculto por defecto - AJUSTADO PARA SUBIR */
.custom-calendar-dropdown .dropdown-menu-content {
  display: none;
  position: absolute;
  left: 0;
  bottom: 100%; /* Cambiado de top a bottom para que suba */
  background-color: #ffffff;
  min-width: 210px;
  box-shadow: 0px -8px 16px 0px rgba(0,0,0,0.15); /* Sombra invertida hacia arriba */
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  z-index: 999;
  overflow: hidden;
}

/* Estilo de los enlaces internos del dropdown */
.custom-calendar-dropdown .dropdown-menu-content a {
  color: #333333;
  padding: 12px 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-clash);
  font-size: 14px;
  transition: background-color 0.15s ease;
  background-color: var(--color-green-2);
  font-weight: 400;
}

/* Efecto Hover para las opciones */
.custom-calendar-dropdown .dropdown-menu-content a:hover {
  background-color: var(--color-green);
  color: #000000;
}

/* TRUCO CSS: Mostrar el menú al pasar el ratón (Hover) o mantener el foco */
.custom-calendar-dropdown:hover .dropdown-menu-content,
.custom-calendar-dropdown:focus-within .dropdown-menu-content {
  display: block;
}

/* Pequeño ajuste de iconos dentro de las opciones */
.custom-calendar-dropdown .dropdown-menu-content svg, 
.custom-calendar-dropdown .dropdown-menu-content img {
  flex-shrink: 0;
}

/* RESPONSIVE */
@media (max-width: 480px) {  
    .mainTitleTup {    
        margin-top: 70px;
        font-size: clamp(1.375rem, 1.375rem + 1.6667vw, 1.875rem);
    }
    .dateTextPillTup {
        font-size: 16px;        
    }
    .descriptionTextTup {
        font-size: 16px;        
    }
    .informationRowBoxTup .labelTup {        
        font-size: 14px;
    }
    .informationRowBoxTup {
        margin-bottom: 2rem;
    }
    .mainTitleTup, .descriptionTextTup {
        margin-bottom: 0;
        text-align: center;
    }
    .informationRowBoxTup {
        flex-direction: column;
    }
    .informationRowBoxTup svg {
        display: none;
    }
    .pillBox {
        align-self: center;
    }
    .mainContentBox {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}
@media (min-width: 481px) and (max-width: 767px) {
    .mainTitleTup {    
        margin-top: 70px;
        font-size: clamp(1.5625rem, 0.8267rem + 2.4476vw, 2rem);
    }
    .dateTextPillTup {
        font-size: 18px;        
    }
    .descriptionTextTup {
        font-size: 16px;        
    }
    .informationRowBoxTup .labelTup {        
        font-size: 14px;
    }
    .informationRowBoxTup {
        margin-bottom: 2rem;
    }
    .mainTitleTup, .descriptionTextTup {
        margin-bottom: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 980px) {    
    .mainTitleTup {
        margin-top: 86px;
        font-size: clamp(2rem, -0.9434rem + 6.1321vw, 2.8125rem);
    }
    .dateTextPillTup {
        font-size: 20px;        
    }
    .descriptionTextTup {
        font-size: 18px;        
    }
    .informationRowBoxTup .labelTup {        
        font-size: 16px;
    }
    .informationRowBoxTup {
        margin-bottom: 2rem;
    }
}
@media (max-width: 1024px) {
        .informationRowBoxTup {            
            flex-wrap: wrap;
            justify-content: center;
            gap: 2.5rem;
        }
}
@media screen and (min-width: 981px) and (max-width: 1199px) {
    .mainTitleTup {    
        font-size: clamp(3.125rem, -2.4686rem + 9.1324vw, 4.375rem);
    }
    .dateTextPillTup {
        font-size: 22px;        
    }
    .descriptionTextTup {
        font-size: 20px;        
    }
    .informationRowBoxTup .labelTup {        
        font-size: 18px;
    }
}
@media screen and (min-width: 1200px) and (max-width: 1600px) {
    .mainTitleTup {    
        font-size: clamp(4.375rem, 1.75rem + 3.5vw, 5.25rem);      
    }
}
@media screen and (min-width: 1601px) {
    .mainTitleTup {    
        font-size: clamp(5.25rem, 3.4691rem + 1.7798vw, 6.25rem);  
    }
}