/* Frontend CSS */

/* APLICA A TODA LA WEB */

/* Desactivar animaciones de entrada de Elementor y forzar visibilidad */
.elementor-element.elementor-invisible {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
}

.elementor-element.animated {
  animation: none !important;
}

/* Contenedor 1920 - Ajuste de padding dinámico basado en el ancho del viewport */
.container-1920 {
  padding-inline: clamp(5px, calc((100vw - 1296px) / 2), 312px);
}

/* counters */
.kos-counter .elementor-counter-title {
    text-align: center;
}

.kos-link {
    color: var(--e-global-color-a954db2) !important;
    font-style: italic;
} 

.kos-link:hover {
    color: var(--e-global-color-accent) !important;
} 

/* Form Newsletter */

/* 1) El grupo del checkbox a 100% */
#generalnewsletterform .elementor-field-group.elementor-field-type-acceptance{
  width: 100% !important;
  max-width: 100% !important;
}

/* 2) El wrapper del checkbox */
#generalnewsletterform .elementor-field-group.elementor-field-type-acceptance .elementor-field-subgroup{
  width: 100% !important;
  max-width: 100% !important;
}

/* 3) ESTE ES EL CLAVE: el span que contiene checkbox + label */
#generalnewsletterform .elementor-field-group.elementor-field-type-acceptance .elementor-field-option{
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  width: 100% !important;
  max-width: 100% !important;
  font-size: 12px;
}

/* 4) El label específico: que ocupe todo el ancho disponible */
#generalnewsletterform label[for="form-field-kosconsent"]{
  flex: 1 1 auto;
  display: block;
  width: 100% !important;
  margin-top: -2px;
}


/*========================================
/*        CHECKBOX NEWSLETTER (NATIVO PRO)
/*========================================*/

#generalnewsletterform #form-field-kosconsent{
  width: 18px;
  height: 18px;
  margin-top: 2px;       /* ajusta la alineación con el texto */
  flex: 0 0 18px;
  accent-color: var(--e-global-color-accent);
  cursor: pointer;
}

#generalnewsletterform #form-field-kosconsent:focus{
  outline: none;
  border-radius: 4px;
}

/* Fin Form Newsletter */


/* FIN APLICA A TODA LA WEB */

/* ACORDIONES FAQ */

/* Contenedor principal */
.kos-accordion {
    width: 100%;
    margin-bottom: 12px !important;
}

.kos-accordion details {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

/* Pregunta (Summary) */
.kos-accordion summary {
    display: flex;
    align-items: center;
    padding: 18px 25px;
    font-size: 1.2rem;
    font-weight: 700 !important;
    border-radius: 3px 3px 0px 0px;
    cursor: pointer;
    list-style: none;
    color: var(--e-global-color-secondary);
    background-color: var(--e-global-color-a954db2);
    transition: background 0.4s ease, color 0.3s ease;
    position: relative;
    z-index: 2; /* Para que quede por encima del contenido al abrir */
}

.kos-accordion summary::-webkit-details-marker { 
    display: none; 
}

/*==============================
=            HOVER             =
==============================*/

/* Hover cuando está CERRADO */
.kos-accordion details:not([open]) summary:hover {
    background-color: #f3fbfe;              /* suave, no cambia el diseño */
    color: var(--e-global-color-primary);                         /* contraste y marca */
    border-color: rgba(45, 165, 204, 0.35);
}

/* Hover cuando está ABIERTO (mantiene el gradiente, sube un poquito el “peso”) */
.kos-accordion details[open] summary:hover {
    filter: brightness(1.05);
}

/* Hover del contenedor completo (sensación de “card interactiva”) */
.kos-accordion details:hover {
    border-color: rgba(45, 165, 204, 0.45);
    box-shadow: 0 10px 25px rgba(21, 50, 94, 0.08);
}

/* Accesibilidad: enfoque con teclado */
.kos-accordion summary:focus-visible {
    outline: 2px solid rgba(45, 165, 204, 0.65);
    outline-offset: 3px;
    border-radius: 6px;
}

/*==============================
=        ESTADO ABIERTO        =
==============================*/

.kos-accordion details[open] {
    border-color: transparent;
}

.kos-accordion details[open] summary {
    background: linear-gradient(90deg, var(--e-global-color-secondary) 50%, var(--e-global-color-primary)  100%);
    color: var(--e-global-color-a954db2);
}

/* El truco para la suavidad: Animación del Wrapper */
.kos-content-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); /* Transición suave de altura */
    background-color: #f9f9f9;
}

.kos-accordion details[open] .kos-content-wrapper {
    max-height: 1000px; /* Suficiente para el contenido */
    transition: max-height 1s ease-in-out;
}

.kos-content {
    padding: 20px 25px;
    line-height: 1.6;
    color: var(--e-global-color-text);
    border: 1px solid #e0e0e0;
    border-radius: 0px 0px 4px 4px;
}

/* Hover suave del contenido cuando está abierto */
.kos-accordion details[open] .kos-content:hover {
    background-color: var(--e-global-color-a954db2);
}

/* Icono personalizado */
.kos-accordion summary::after {
    content: '+';
    margin-left: auto;
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.kos-accordion details[open] summary::after {
    content: '-';
    transform: rotate(180deg);
}

/* FIN ACORDIONES FAQ */