.headerSection img {
    max-height: 500px !important;
    margin-bottom: -4rem;
    width: auto;
    max-width: 41%;
}

@media (min-width: 1200px) {

    .headerSection {
        height: 22.2em !important;
    }
    .headerSection h1 {
        font-size: 57px;
    }
}

.template-accordion_view .panel-group {
    padding-top: 7.1rem !important;
    padding-bottom: 7.1rem !important;
}
@media (min-width: 768px) {
    .template-accordion_view .panel-group {
        width: 750px;
    }
}
@media (min-width: 992px) {
    .template-accordion_view .panel-group {
        width: 990px;
    }
}
@media (min-width: 1200px) {
    .template-accordion_view .panel-group {
        width: 1170px;
    }
}
@media (min-width: 1600px) {
    .template-accordion_view .panel-group {
        width: 1570px;
    }
}

.frontend #parent-fieldname-text a {
    color: #333;
    text-decoration: none;
    border-bottom: none;
}


.template-accordion_view .panel-group {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    max-width: 100%;
}

/* ==========================================
   ARROW CHEVRON STYLE
   ========================================== */
.template-accordion_view .panel-heading .arrow {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-right: 2px solid #5a5a5a;
    border-bottom: 2px solid #5a5a5a;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    font-size: 0;
    line-height: 0;
}

/* Eliminar border y hover del accordion */
.template-accordion_view .panel-default > .panel-heading {
    border: none !important;
}

.template-accordion_view .panel-default > .panel-heading:hover,
.template-accordion_view .panel-default > .panel-heading:focus {
    border: none !important;
}

.template-accordion_view .panel-heading .accordion-toggle,
.template-accordion_view .panel-heading .accordion-toggle:hover,
.template-accordion_view .panel-heading .accordion-toggle:focus {
    text-decoration: none !important;
    border: none !important;
    color: #333 !important;
    outline: none !important;
}

.template-accordion_view .panel-heading .panel-title a,
.template-accordion_view .panel-heading .panel-title a:hover,
.template-accordion_view .panel-heading .panel-title a:focus {
    text-decoration: none !important;
    border: none !important;
    border-bottom: none !important;
    color: #333 !important;
}

/* Eliminar border del panel-body */
.template-accordion_view .panel-collapse > .panel-body {
    border: none !important;
    border-top: none !important;
}

/* ==========================================
   ANIMACIÓN DE COLLAPSE
   ========================================== */
.panel-collapse {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.8s ease-in-out;
    will-change: max-height, opacity;
}

.panel-collapse.in {
    max-height: 3000px;
    opacity: 1;
}

/* Animar también el panel-body para efecto más suave */
.panel-collapse .panel-body {
    transform: translateY(-15px);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.15s,
                opacity 0.7s ease-in-out 0.1s;
}

.panel-collapse.in .panel-body {
    transform: translateY(0);
    opacity: 1;
}

/* Rotar flecha cuando está abierto */
.panel-heading[aria-expanded="true"] .arrow {
    transform: rotate(-135deg);
}