/* BASE */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
    /* Reduced offset for better visual balance */
}

body {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
    line-height: 1.6;
    /* Soft diffused backdrop inspired by the Salud Ocupacional page */
    background-image:
        radial-gradient(circle at 12% 18%, rgba(122, 184, 0, 0.09), transparent 28%),
        radial-gradient(circle at 82% 12%, rgba(37, 99, 235, 0.07), transparent 25%),
        radial-gradient(circle at 20% 88%, rgba(13, 148, 136, 0.07), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9));
}

/* UTILITIES */
.text-center {
    text-align: center;
}

.mb-1 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.mb-3 {
    margin-bottom: 3rem;
}

/* GLASS PANEL UTILITY (Deep Liquid Style) */
.glass-panel {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 5px 15px rgba(0, 0, 0, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.glass-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: skewX(-25deg);
    transition: 0.7s;
    opacity: 0;
    pointer-events: none;
}

.glass-panel:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.12),
        0 10px 20px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.8);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
}

.glass-panel:hover::before {
    left: 150%;
    opacity: 1;
    transition: 0.7s;
}

/* COMITES */
.comites__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.comite__card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4));
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    padding: 2.5rem;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.05),
        0 5px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}

/* Green Glow Accent instead of solid bar */
.comite__card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, var(--first-color), var(--first-color-alt));
    opacity: 0.8;
}

.comite__card:hover {
    transform: translateY(-10px);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.1),
        0 10px 20px rgba(0, 0, 0, 0.06);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
}

/* Remove Icon Styles */
.comite__icon {
    display: none;
}

.comite__title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--title-color);
    letter-spacing: -0.5px;
}

.comite__desc {
    font-size: 1rem;
    margin-bottom: 2rem;
    color: var(--text-color);
    line-height: 1.6;
}

.comite__link {
    margin-top: auto;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    background: linear-gradient(90deg, var(--first-color), var(--first-color-alt));
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(106, 191, 75, 0.3);
    transition: .3s;
}

.comite__link:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(106, 191, 75, 0.5);
}

h1,
h2,
h3,
h4 {
    color: var(--title-color);
    font-family: var(--title-font);
    font-weight: var(--font-bold);
    line-height: 1.2;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* REUSABLE CSS CLASSES */
.container {
    max-width: 1024px;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

.section {
    padding: 4.5rem 0 2rem;
}

.section--tight {
    padding: 2.5rem 0 1.5rem;
}

.section__header {
    text-align: center;
    margin-bottom: 3rem;
}

.section__header--compact {
    margin-bottom: 1.75rem;
}

/* HERO */
.section__title {
    font-size: 4.5rem;
    font-weight: 800;
    letter-spacing: -1.5px;
    color: #222222;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.section__subtitle {
    display: block;
    font-size: 1.5rem;
    color: var(--first-color);
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.section__description {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.25rem;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.button {
    display: inline-block;
    background-color: var(--first-color);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: var(--font-medium);
    transition: .3s;
    border: none;
    box-shadow: none;
}

.button:hover {
    background-color: var(--first-color-alt);
    transform: translateY(-2px);
}

/* HEADER & NAV */
/* HEADER */
.header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-fixed);
    background-color: rgba(255, 255, 255, 0.9);
    /* Initial transparent/white */
    transition: all 0.4s ease;
    /* Smooth transition for height/padding */
    backdrop-filter: blur(10px);
}

/* Dynamic Header Title (Hidden initially) */
.header__title-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    /* Start slightly above */
    font-size: 1.5rem;
    /* Increased from 1.25rem */
    font-weight: 700;
    color: #1d1d1f;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    white-space: nowrap;
}

/* SCROLL HEADER STATE */
.scroll-header {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    /* Stronger shadow */
    background-color: rgba(255, 255, 255, 0.98);
    /* Almost solid white */
    padding: 0.35rem 0;
    /* Keep a bit more air so the logos don't collapse */
    height: 90px;
    /* Taller scroll state to preserve logo presence */
}

.scroll-header .header__container {
    height: 90px;
    /* Match the header to avoid over-shrinking children */
}

/* Show Title on Scroll */
.scroll-header .header__title-center {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    top: 50%;
    margin-top: -18px;
    /* Moved up more as requested */
}

/* Keep logos larger on scroll for better brand presence */
.scroll-header .logo img {
    height: 68px;
    /* Gentle scale-down only */
    transition: none;
}

.scroll-header .logo-img-brisa {
    height: 78px;
    max-height: 78px;
}

.scroll-header .logo-img-heart {
    height: 64px;
    max-height: 64px;
}

/* Adjust Nav Links on Scroll */
.scroll-header .nav__link {
    font-size: 0.85rem;
    /* Smaller font */
    color: #555;
}

.scroll-header .nav__list {
    gap: 1rem;
    /* Tighter spacing */
}

/* Ensure Nav moves right */
/* Ensure Nav stays put */
.scroll-header .nav__menu {
    transform: none;
}

.scroll-header .logo-wrapper {
    transform: none;
}

.logo-wrapper {
    /* margin-top: 10px; Removed for vertical alignment */
    display: flex;
    flex-direction: row;
    /* Explicitly set row */
    flex-wrap: nowrap;
    /* Prevent wrapping */
    align-items: center;
    gap: 1.5rem;
    flex-shrink: 0;
    /* Prevent wrapper from shrinking */
}

.header__container {
    height: 120px;
    /* Taller Header */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    flex-shrink: 0;
    /* Prevent logo from shrinking */
}

/* Ensure images don't shrink or cause layout shifts */
/* Ensure images don't shrink or cause layout shifts */
.logo img {
    max-width: 100%;
    /* Restore safety net */
    display: block;
    object-fit: contain;
}

/* Explicit Dimensions to prevent CLS (Cumulative Layout Shift) */
.logo-img-brisa {
    height: 85px;
    max-height: 85px;
    /* Double constraint */
    width: auto;
    aspect-ratio: 200/85;
}

.logo-img-heart {
    height: 70px;
    max-height: 70px;
    /* Double constraint */
    width: auto;
    aspect-ratio: 80/70;
    margin-bottom: 8px;
    /* Lift slightly for optical alignment */
}

.logo__text {
    font-family: var(--title-font);
    font-weight: var(--font-bold);
    font-size: 1.1rem;
    color: var(--first-color);
}

.logo__sub {
    font-size: 0.7rem;
    color: var(--text-color);
    letter-spacing: 0.5px;
}

.nav__menu {
    display: flex;
    align-items: center;
}

.nav__list {
    display: flex;
    gap: 2.5rem;
    /* Increased gap for better spacing */
}

.nav__link {
    font-weight: 600;
    /* Semi-bold */
    font-size: 0.95rem;
    /* Slightly larger */
    color: var(--title-color);
    letter-spacing: 0.3px;
    /* Cleaner tracking */
    transition: .3s;
}

.nav__link:hover,
.nav__link.active-link {
    color: var(--first-color);
}

.nav__toggle,
.nav__close {
    display: none;
}

/* Logout Button Custom Style */
.btn-logout-custom {
    background: #ffffff;
    color: #2E6B46;
    /* Corporate Green */
    border: 1px solid #2E6B46;
    border-radius: 12px;
    /* Subtle rounding */
    padding: 0.4rem 1.2rem;
    /* Compact */
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    box-shadow: none;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-logout-custom:hover {
    background-color: #F0FFF4;
    /* Pale green hover */
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(46, 107, 70, 0.1);
}

.btn-logout-custom:active {
    transform: translateY(0);
}

/* HOME */
.home__container {
    display: grid;
    gap: 2rem;
    padding-top: 6rem;
}

.home__data {
    text-align: center;
}

.home__title {
    font-size: var(--big-font-size);
    margin-bottom: 1rem;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.home__description {
    margin-bottom: 2rem;
    color: #1d1d1f;
    font-size: 1.1rem;
    opacity: 0.8;
}

.home__img-wrapper {
    width: 100%;
    /* height: 300px; Remove fixed height to let image dictate or use aspect ratio */
    border-radius: 24px;
    overflow: hidden;
    /* Ensure image stays within border radius */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.home__img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* SERVICES */
.services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.service__card {
    /* Glass effect applied via class or here */
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    border-radius: 24px;

    padding: 2rem;
    text-align: center;
    transition: .3s;
}

.service__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.2);
}

.service__icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.service__title {
    font-size: var(--h3-font-size);
    margin-bottom: 0.5rem;
}

/* ABOUT */
.about__container {
    display: grid;
    gap: 2rem;
}

.about__img-wrapper {
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.about__img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.about__list {
    margin-top: 1.5rem;
}

.about__item {
    margin-bottom: 0.5rem;
}

/* REFERENTES (Triangle Layout) */
.referentes__container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1400px;
    /* Wider to accommodate side-by-side */
    margin: 0 auto;
}

.referentes__row--top {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 1200px !important;
    /* Match bottom row width */
    margin: 0 auto;
}

/* Bottom Row (Leaders) Styles */
.referentes__row--bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
    max-width: 1200px !important;
    /* Force alignment with Coordinators */
    margin: 0 auto;
}

.referente__card {
    display: flex;
    flex-direction: row;
    /* Horizontal */
    align-items: center;
    text-align: left;
    flex-direction: column;
    /* Vertical stack for cards in grid */
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 2rem;
    gap: 1.5rem;
    height: 100%;
    /* Equal height */
}

/* Top card can remain horizontal if desired, or switch to vertical for consistency. 
   User asked for "Card destacada, ancho completo o centrada superior". 
   Let's keep the top one horizontal for distinction, or vertical if it looks better. 
   Given the "Triangle" request, usually the top one is the "apex". 
   Let's make the top one horizontal to stand out as "Level 1", and bottom ones vertical "Level 2". */
/* Top card (Leila) - Premium CEO Style */
.referentes__row--top .referente__card {
    flex-direction: row;
    text-align: left;
    max-width: 100%;
    /* Span full width of container */
    width: 100%;
    gap: 2.5rem;
    padding: 3rem;
    /* More breathing room */
    padding: 3rem;
    /* More breathing room */
    /* border-top removed for gradient pseudo-element */
    border-radius: 16px;
    background: #fff;
    /* Ensure clean white background */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    /* Very subtle, premium shadow */
    align-items: center;
    justify-content: center;
    position: relative;
    /* Ensure positioning context */
}

.referentes__row--top .referente__card::after {
    height: 3px !important;
    /* Finer line */
    background: linear-gradient(90deg, var(--first-color), #2563eb, var(--first-color)) !important;
    /* Creative gradient: Green -> Blue -> Green */
    opacity: 1 !important;
}

.referentes__row--top .referente__img-wrapper {
    width: 170px;
    /* Largest: CEO */
    height: 170px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    border: none;
    /* No border */
    box-shadow: none;
    /* No shadow on image */
    background: transparent;
}

.referentes__row--top .referente__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.referentes__row--top .referente__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.referentes__row--top .referente__name {
    font-size: 2rem;
    /* Larger name */
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.referentes__row--top .referente__role {
    font-size: 1.1rem;
    color: var(--first-color);
    /* Brisa Green */
    margin-bottom: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.referente-hero-desc {
    font-size: 1.15rem;
    /* Slightly larger for hero */
    color: #6e6e73;
    line-height: 1.6;
    max-width: 100%;
    /* Ensure full width to prevent wrapping */
    text-align: left;
    /* Explicitly requested */
    margin-top: 0.5rem;
}

.referentes__row--top .referente__desc {
    font-size: 1.1rem;
    color: #6e6e73;
    line-height: 1.6;
    max-width: 800px;
    /* Increased width for text */
}

/* Explicit Hero Layout Rules to Ensure Text Field Width */
.referente-hero {
    display: flex;
    flex-direction: row;
    gap: 3rem;
    /* Increased gap for better spacing when centered */
    align-items: center;
    width: 100%;
    justify-content: center;
    /* Center the entire group */
    padding-left: 120px;
    /* Visual offset to right as requested */
}

@media (max-width: 768px) {
    .referente-hero {
        padding-left: 0 !important;
        flex-direction: column;
        align-items: center;
        /* Center align on mobile */
        text-align: center;
    }

    .referente-hero-body {
        align-items: center;
        text-align: center;
    }

    .referente-hero-desc {
        text-align: center;
    }
}

.referente-hero-photo {
    flex-shrink: 0;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.referente-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.12);
    /* Slightly zoom in to hide any white border */
    transition: transform 0.3s ease;
}

.referente-hero-photo:hover img {
    transform: scale(1.15);
}

.referente-hero-body {
    flex: 0 1 auto;
    /* Don't stretch */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.referente-hero-desc {
    font-size: 1.15rem;
    color: #6e6e73;
    line-height: 1.6;
    max-width: 100%;
    margin-top: 0.5rem;
    white-space: normal;
    /* Allow normal wrapping, but space should be enough */
}

/* Bottom Row (Leaders) Styles */
.referente__img-wrapper {
    width: 135px;
    /* Medium: Leaders (Larger than Coordinators 110px) */
    height: 135px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.referente__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
}

.referente__content {
    flex: 1;
}

.referente__name {
    font-size: 1.3rem;
    /* Slightly smaller than CEO */
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 0.25rem;
}

.referente__role {
    font-size: 0.95rem;
    color: var(--first-color);
    /* Brisa Green */
    margin-bottom: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.referente__desc {
    font-size: 0.95rem;
    color: #6e6e73;
    line-height: 1.5;
}

/* Mobile Referentes */
@media screen and (max-width: 968px) {
    .referentes__row--bottom {
        grid-template-columns: 1fr;
    }

    .referente__card {
        flex-direction: column;
        text-align: center;
    }
}

/* COORDINADORES */
.coordinadores__container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* Force 5 columns on same line */
    gap: 1.5rem;
    /* Reduce gap slightly to fit */
    width: 100%;
    margin-top: 2rem;
    align-items: stretch;
    /* Stretch to match height */
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 992px) {
    .coordinadores__container {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

.coordinator__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    gap: 0.8rem;
    /* Reduced gap */
    height: 100%;
    border-top: 4px solid var(--first-color);
    /* Green top border */
    border-radius: 12px;
    /* Slightly less rounded to match top border */
}

.coordinator__img-wrapper {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 0.5rem;
    /* Removed shadow for a cleaner, flat look */
    box-shadow: none;
    border: none;
    /* Removed all borders */
    outline: none;
    background: transparent;
    /* Ensure no background color */
    transition: all 0.3s ease;
}

.coordinator__card:hover .coordinator__img-wrapper {
    transform: scale(1.05);
    /* Subtle shadow on hover only */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.coordinator__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.coordinator__name {
    font-size: 1rem;
    /* Reduced size */
    font-weight: 700;
    color: #555;
    /* Corporate Grey */
    margin: 0;
    white-space: nowrap;
    /* Try to keep on one line */
}

.coordinator__role {
    font-size: 1rem;
    /* Increased from 0.9rem */
    color: var(--first-color);
    /* Brisa Green */
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    max-width: 100%;
}

.coordinadores__img-wrapper {
    width: 100%;
    height: 100%;
    /* Fill the grid cell height */
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
    padding: 0 !important;
    position: relative;
    min-height: 400px;
    /* Ensure minimum height */
}

.coordinadores__img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Cover the area without distortion */
    object-position: center;
}

.coordinadores__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    /* Center content vertically if image is taller, or stretch */
}


/* LOGIN MODAL */
.login-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    /* Above everything */
    display: flex;
    /* Hidden by default, toggled via JS */
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Initially hidden logic will be handled by JS adding/removing a class or style */
}

.login-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/images/login-bg-blue.png');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.login-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Rich blue gradient overlay for a premium look */
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 58, 138, 0.8) 100%);
    backdrop-filter: blur(8px);
    /* Increased blur for better focus on modal */
    -webkit-backdrop-filter: blur(8px);
    z-index: 1;
}

.login-card {
    position: relative;
    z-index: 10;
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 420px;
    padding: 2rem;
    margin: 0 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.fade-in-up {
    animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0;
    transform: translateY(30px);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-logo-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.login-logo-circle {
    position: relative;
    width: 240px;
    height: 240px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    padding: 0;
    /* overflow: hidden; REMOVED to allow ribbon/shadow to show */
    z-index: 10;
    /* Ensure it sits above if needed */
}

.login-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.25);
    /* Increased scale for pop-out effect */
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2));
    /* Enhanced shadow */
    position: relative;
    z-index: 20;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-title {
    color: #2E6B46;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    border-bottom: 2px solid #2E6B46;
    display: inline-block;
    padding-bottom: 0.25rem;
    margin-bottom: 0.5rem;
}

.login-subtitle {
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.login-input-group {
    display: flex;
    flex-direction: column;
}

.login-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 0.5rem;
}

.login-input-wrapper {
    position: relative;
}

.login-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    padding-left: 1rem;
    display: flex;
    align-items: center;
    pointer-events: none;
    color: #9ca3af;
    transition: color 0.2s;
}

.login-input-wrapper:focus-within .login-icon {
    color: #2E6B46;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.password-toggle:hover {
    color: #2E6B46;
}

.login-helper-text {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.5rem;
    margin-left: 0.25rem;
}

.login-input {
    display: block;
    width: 100%;
    padding-left: 2.75rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 1rem;
    color: #1f2937;
    background-color: #f9fafb;
    transition: all 0.2s;
    outline: none;
}

.login-input::placeholder {
    color: #9ca3af;
}

.login-input::-ms-reveal,
.login-input::-ms-clear {
    display: none;
}

.login-input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
}

/* Hide native password eye in Edge/IE */
.login-input::-ms-reveal {
    display: none;
}

.password-masked {
    -webkit-text-security: disc;
    font-family: 'Inter', sans-serif;
    /* Ensure consistent font */
}

.login-input:focus {
    border-color: transparent;
    box-shadow: 0 0 0 2px #2E6B46;
    background-color: #ffffff;
}

.login-btn {
    width: 100%;
    background-color: #2E6B46;
    color: #ffffff;
    font-weight: 700;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.login-btn:hover {
    background-color: #245538;
    transform: translateY(-2px);
}

.login-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #2E6B46;
}

.login-links {
    text-align: center;
    padding-top: 0.5rem;
}

.login-forgot {
    font-size: 0.75rem;
    color: #9ca3af;
    text-decoration: underline;
    text-decoration-style: dotted;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    transition: color 0.2s;
}

.login-forgot:hover {
    color: #2E6B46;
}

/* Error Animation */
.shake {
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
    border-color: #ef4444 !important;
}

/* Ensure SweetAlert is above the login modal */
.swal2-container {
    z-index: 9999 !important;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

.coordinadores__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    /* Fill height */
    justify-content: space-between;
    /* Distribute cards evenly */
}

.coordinator__item {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    border-left: 4px solid var(--first-color);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: 0.3s;
    flex: 1;
    /* Make items grow to fill space evenly */
    justify-content: center;
}

.coordinator__item:hover {
    transform: translateX(10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.coordinator__item h4 {
    color: #1d1d1f;
    font-weight: 700;
}

.coordinator__item p {
    color: #6e6e73;
}

/* Mobile Coordinadores */
@media screen and (max-width: 968px) {
    .coordinadores__container {
        grid-template-columns: 1fr;
    }

    .coordinadores__img-wrapper {
        height: 300px;
        /* Fixed height on mobile */
    }
}

/* COMITES - Premium Redesign */
.comites__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Centers items */
    gap: 2.5rem;
    width: 100%;
}

/* Center the last card if it's the 7th item (odd number) */
.comite__card {
    flex: 0 1 350px;
    /* Base width ~350px, can shrink but not grow beyond max */
    max-width: 400px;
    /* Limit max expansion */
    width: 100%;
    /* Take full width up to max */

    background: #fff;
    padding: 3rem;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    /* Ultra subtle border */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    /* Very soft initial shadow */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Premium spring transition */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    height: 100%;
}

/* Elegant Top Accent */
.comite__card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--first-color);
    opacity: 0.8;
    transform-origin: left;
    transition: transform 0.4s ease;
}

.comite__card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    /* Deep, premium shadow on hover */
    border-color: rgba(0, 0, 0, 0);
}

.comite__card:hover::after {
    transform: scaleX(1.1);
    /* Subtle expansion effect */
}



.comite__title {
    font-size: 1.35rem;
    color: #1d1d1f;
    margin-bottom: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.comite__desc {
    font-size: 1rem;
    margin-bottom: 2.5rem;
    /* More space before button */
    color: #6e6e73;
    line-height: 1.6;
    flex-grow: 1;
    /* Push button to bottom */
}

/* Elegant Ghost Button */
.comite__link {
    margin-top: auto;
    background: transparent;
    color: var(--first-color);
    padding: 0.8rem 1.8rem;
    border-radius: 50px;
    border: 1px solid var(--first-color);
    /* Outlined style */
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: none;
}

.nav__logo-img {
    height: 70px;
    /* Increased from default/smaller size */
    width: auto;
    transition: all 0.3s ease;
}

.comite__link:hover {
    background: var(--first-color);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(106, 191, 75, 0.25);
}

.comite__link i {
    transition: transform 0.3s ease;
}

.comite__link:hover i {
    transform: translateX(4px);
    /* Arrow moves on hover */
}

/* --- Comités: acciones y botones alineados --- */
.comite__card-footer {
    margin-top: 1.75rem;
}

.comite__actions {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: stretch;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: center;
}

.comite__join-btn,
.comite__btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.84rem;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: #fafbfd;
    color: #2e2f35;
    transition: all 0.18s ease;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.04);
    flex: 0 0 auto;
    min-width: 120px;
    width: auto;
    text-align: center;
    white-space: nowrap;
}

.comite__join-btn .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.07);
    color: #2e2f35;
    font-size: 0.7rem;
    font-weight: 700;
}

.comite__join-btn:hover,
.comite__btn-secondary:hover {
    background: #f1f3f6;
    color: #1f1f1f;
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.07);
    transform: translateY(-1px);
}

/* SECTION SPACING */
.section {
    padding: 3rem 0;
    /* Reduced from 6rem to 3rem */
}

/* MISION (Equal Height Cards) */
.mision__container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    /* Increased gap */
    max-width: 1200px;
    margin: 0 auto;
    background: transparent;
    padding: 0 !important;
    box-shadow: none;
    border: none;
    backdrop-filter: none;
}

.mision__item {
    background: #fff;
    padding: 3rem;
    /* Generous padding */
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    /* Very subtle shadow */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    border-top: 3px solid var(--first-color);
    /* Thinner, more professional border */
    align-items: flex-start;
    text-align: left;
    height: 100%;
    /* Ensure equal height */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.mision__item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    /* Enhanced shadow */
}

.mision__item h3 {
    font-size: 1.75rem;
    /* Larger title */
    color: #1d1d1f;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.mision__item p {
    font-size: 0.95rem;
    /* Smaller, minimalist font */
    line-height: 1.7;
    color: #666666;
    /* Lighter gray */
}

/* Custom List for Valores */
.mision__item ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mision__item ul li {
    position: relative;
    padding-left: 1.75rem;
    font-size: 0.95rem;
    /* Match paragraph size */
    color: #666666;
    /* Match paragraph color */
    line-height: 1.7;
}

.mision__item ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--first-color);
    font-weight: bold;
    font-size: 1rem;
}

/* DOC OFICIAL (More Prominent) */
.doc-oficial {
    background: #fff;
    padding: 5rem;
    /* Generous padding */
    border-radius: 30px;
    text-align: center;
    max-width: 1000px;
    /* Wider */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
    /* Premium shadow */
}

.doc__icon {
    display: none;
}

/* SCROLL UP */
/* SCROLL UP - Modern Green Design */
.scrollup {
    position: fixed;
    right: 1.125rem;
    bottom: -20%;
    background: var(--first-color);
    /* Brisa Green */
    padding: 0.6rem;
    /* Reduced from 1rem */
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(106, 191, 75, 0.3);
    /* Soft green shadow */
    z-index: 9999;
    /* Ensure it stays above EVERYTHING */
    transition: all 0.4s ease;
    opacity: 0;
    transform: translateY(24px);
    animation: fab-float-up 0.6s ease-out 0.25s forwards;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    /* White icon */
    border: none;
}

.scrollup:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(106, 191, 75, 0.5);
    /* Enhanced shadow on hover */
    background: #5aa83f;
    /* Slightly darker green on hover */
}

.scrollup__icon {
    font-size: 1.25rem;
    /* Slightly smaller icon */
    font-weight: bold;
}

@keyframes fab-float-up {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.show-scroll {
    bottom: 1.125rem;
}

.scrollup__icon {
    font-size: 1.25rem;
    /* Slightly smaller icon */
    font-weight: bold;
}

/* FOOTER - Senior Design Polish */
.footer {
    padding: 1.5rem 0;
    /* Reduced padding further */
    background: #fff;
    position: relative;
    border-top: none;
}

/* Subtle Gradient Line */
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            var(--first-color) 50%,
            rgba(255, 255, 255, 0) 100%);
    opacity: 0.8;
}

.footer__container {
    display: flex;
    justify-content: center;
    /* Center content (text) */
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    /* For absolute positioning of logo */
}

.footer__logo-img {
    height: 70px;
    /* Increased from 32px */
    position: absolute;
    /* Keep logo on the left */
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.3s ease;
}

.footer__logo-img:hover {
    opacity: 0.8;
}

.footer__copy {
    color: #98989d;
    font-weight: 400;
    text-align: center;
    /* Centered text */
    font-size: 0.85rem;
    letter-spacing: 0.01em;
}

.footer__copy .footer__brand {
    color: var(--first-color);
    font-weight: 700;
}

/* Responsive Footer */
@media screen and (max-width: 768px) {
    .footer {
        padding: 1.5rem 0;
    }

    .footer__container {
        flex-direction: column;
        gap: 1rem;
    }

    .footer__logo-img {
        position: static;
        /* Stack on mobile */
        transform: none;
        margin-bottom: 0.5rem;
    }

    .footer__copy {
        text-align: center;
        font-size: 0.75rem;
    }

    .footer__logo-img {
        height: 45px;
    }
}

/* RESPONSIVE */
@media screen and (min-width: 768px) {
    .container {
        margin-left: auto;
        margin-right: auto;
    }

    .home__container {
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        text-align: left;
    }

    .home__data {
        text-align: left;
    }

    .about__container {
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
    }

    .contact__info {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

@media screen and (max-width: 767px) {
    .nav__menu {
        position: fixed;
        bottom: -100%;
        left: 0;
        width: 100%;
        background-color: var(--body-color);
        padding: 2rem 1.5rem 4rem;
        box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
        border-radius: 1.5rem 1.5rem 0 0;
        transition: .3s;
    }

    /* Show menu */
    .show-menu {
        bottom: 0;
    }

    .nav__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .nav__link {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: var(--small-font-size);
        font-weight: var(--font-medium);
        color: var(--title-color);
    }

    .nav__close {
        position: absolute;
        right: 1.3rem;
        bottom: .5rem;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--first-color);
        display: block;
    }

    .nav__toggle {
        font-size: 1.1rem;
        cursor: pointer;
        display: block;
        color: var(--title-color);
    }

    .hamburger {
        width: 25px;
        height: 3px;
        background-color: var(--title-color);
        position: relative;
    }

    .hamburger::before,
    .hamburger::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: var(--title-color);
        transition: 0.3s;
    }

    .hamburger::before {
        top: -8px;
    }

    .hamburger::after {
        top: 8px;
    }
}

/* RESEARCH TOOLS */
.research__grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    .research__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.research__card {
    background: #fff;
    padding: 3rem 2rem;
    /* Increased vertical padding */
    border-radius: 1.5rem;
    /* rounded-3xl for smoother look */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    /* Softer shadow */
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Distribute content */
    transition: all 0.3s ease;
    height: 100%;
}

.research__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.research__logo {
    height: 3.85rem;
    /* Slightly larger */
    width: auto;
    object-fit: contain;
}

.research__logo--openevidence {
    height: 8.75rem;
    width: auto;
    object-fit: contain;
}

.research__logo-wrapper {
    height: 8.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2.5rem;
    width: 100%;
}

.research__logo-text {
    height: 3.5rem;
    margin-bottom: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.research__logo-title {
    font-family: serif;
    font-size: 2rem;
    /* Larger text logo */
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.03em;
}

.research__form {
    width: 100%;
}

.research__label {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #374151;
    /* Darker gray */
    margin-bottom: 0.75rem;
    text-align: left;
}

.research__input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.research__input {
    width: 100%;
    padding: 1rem 3.5rem 1rem 1.25rem;
    /* Larger padding */
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    outline: none;
    font-size: 1rem;
    transition: all 0.2s;
    background-color: #fff;
    color: #1f2937;
}

.research__input::placeholder {
    color: #9ca3af;
}

.research__card:first-child .research__input:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    border-color: #2563eb;
}

.research__card:last-child .research__input:focus {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
    border-color: #000;
}

.research__button {
    position: absolute;
    right: 0.5rem;
    /* Fixed distance from right */
    top: 50%;
    transform: translateY(-50%);
    /* Perfect vertical centering */
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.research__button--blue {
    background-color: #2563eb;
}

.research__button--blue:hover {
    background-color: #1d4ed8;
}

.research__button--black {
    background-color: #000;
}

.research__button--black:hover {
    background-color: #1f2937;
}

.research__icon {
    width: 1.25rem;
    height: 1.25rem;
}

.research__caption {
    font-size: 0.85rem;
    color: #9ca3af;
    margin-top: 0.75rem;
    text-align: center;
    font-weight: 500;
}

/* DASHBOARD - Custom Implementation */
.dashboard-container {
    width: 100%;
    max-width: 1280px;
    background-color: #ffffff;
    background-color: #ffffff;
    background-color: #ffffff;
    border-radius: 1.25rem;
    /* Punta roma / Rounded */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    /* Premium shadow */
    border: 1px solid rgba(229, 231, 235, 0.6);
    /* Subtle border */
    /* overflow: hidden; Removed to allow tooltip to show */
    display: flex;
    flex-direction: column;
    transition: all 0.5s ease-in-out;
}

.dashboard-container.is-open {
    height: 100%;
    max-height: 85vh;
}

.dashboard-container:not(.is-open) {
    height: auto;
}

/* Header */
.dashboard-header {
    width: 100%;
    background-color: #ffffff;
    padding: 1.5rem 2rem;
    /* Increased padding */
    border: none;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center content horizontally */
    cursor: pointer;
    transition: background-color 0.2s;
    z-index: 20;
    outline: none;
    border-radius: 1.25rem;
    position: relative;
    /* For absolute positioning of right element if needed */
}

/* ... existing styles ... */

.dashboard-header:hover {
    background-color: #f9fafb;
}

.dashboard-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* Increased gap */
    text-align: center;
    /* Center text */
    flex-direction: row;
    /* Keep row */
}

/* ... icon box ... */

.dashboard-eyebrow {
    font-size: 0.8rem;
    /* Slightly larger */
    font-weight: 700;
    color: #4CAF50;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    line-height: 1;
    text-align: left;
    /* Keep left or center? User asked for Titles centered. Eyebrow usually follows. Let's align left relative to title wrapper, but wrapper is centered. */
}

.dashboard-title {
    font-size: 2rem;
    /* Increased size significantly */
    font-weight: 800;
    /* Bolder */
    color: #111827;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin-top: 0;
}

@media (min-width: 640px) {
    .dashboard-title {
        font-size: 2.5rem;
        /* Even larger on desktop */
    }
}

/* Force the right-side info icon to absolute position so it doesn't mess with centering */
.dashboard-header-right {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dashboard-header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-info-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    color: #9ca3af;
    transition: color 0.2s;
}

.header-info-wrapper:hover {
    color: #4b5563;
}

.header-info-icon svg {
    width: 18px;
    height: 18px;
}

.header-tooltip-content {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.75rem;
    width: 16rem;
    background-color: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 11px;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-out;
    z-index: 100;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(0.5rem);
    text-align: left;
    pointer-events: none;
    font-weight: 400;
    line-height: 1.4;
}

.header-info-wrapper:hover .header-tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-tooltip-content .tooltip-arrow {
    position: absolute;
    top: -4px;
    right: 6px;
    /* Adjusted to align with icon center */
    left: auto;
    /* Override generic .tooltip-arrow left positioning */
    width: 8px;
    height: 8px;
    background-color: rgba(17, 24, 39, 0.95);
    transform: rotate(45deg);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.dashboard-chevron {
    width: 1.25rem;
    height: 1.25rem;
    color: #9ca3af;
    transition: transform 0.3s;
}

.dashboard-container.is-open .dashboard-chevron {
    transform: rotate(180deg);
}

/* Main Content */
.dashboard-content {
    transition: all 0.5s ease-in-out;
    background-color: #ffffff;
    overflow: hidden;
    display: flex;
    border-radius: 0 0 1.25rem 1.25rem;
    /* Rounded bottom for content */
    flex-direction: column;
}

.dashboard-container.is-open .dashboard-content {
    flex: 1;
    opacity: 1;
}

.dashboard-container:not(.is-open) .dashboard-content {
    height: 0;
    opacity: 0;
}

.dashboard-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

@media (min-width: 768px) {
    .dashboard-layout {
        flex-direction: row;
    }
}

/* Left Column: Chart */
.chart-column {
    width: 100%;
    padding: 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    position: relative;
    height: 45%;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .chart-column {
        width: 50%;
        border-bottom: 0;
        border-right: 1px solid #f3f4f6;
        height: auto;
        padding: 2rem;
        flex-shrink: 1;
    }
}

/* Live Badge */
.live-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background-color: #ffffff;
    border-radius: 9999px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.live-dot-container {
    position: relative;
    display: flex;
    height: 0.5rem;
    width: 0.5rem;
}

.live-dot-ping {
    position: absolute;
    display: inline-flex;
    height: 100%;
    width: 100%;
    border-radius: 9999px;
    background-color: #4CAF50;
    opacity: 0.75;
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.live-dot {
    position: relative;
    display: inline-flex;
    border-radius: 9999px;
    height: 0.5rem;
    width: 0.5rem;
    background-color: #1B5E20;
}

.live-text {
    font-size: 9px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

@keyframes ping {

    75%,
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Chart Area */
.chart-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
    min-height: 0;
}

.bars-area {
    flex: 1;
    position: relative;
    border-bottom: 1px solid #d1d5db;
}

.grid-lines {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.grid-line {
    width: 100%;
    border-top: 1px dashed #f3f4f6;
    height: 0;
    position: relative;
}

.bars-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1rem;
    padding-bottom: 1px;
}

@media (min-width: 640px) {
    .bars-wrapper {
        gap: 2rem;
    }
}

.bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 90%;
    justify-content: flex-end;
    position: relative;
}

.bar-percentage {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    /* text-xs */
    font-weight: 700;
    transition: all 0.5s;
    transform: translateY(0);
}

.bar-group:hover .bar-percentage {
    transform: translateY(-0.25rem);
}

.bar-track {
    width: 100%;
    max-width: 55px;
    height: 100%;
    background-color: #f9fafb;
    border-radius: 0.5rem 0.5rem 0 0;
    position: relative;
    overflow: hidden;
    border-left: 1px solid #d1d5db;
    border-right: 1px solid #d1d5db;
    border-top: 1px solid #d1d5db;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.bar-fill {
    position: absolute;
    bottom: 0;
    width: 100%;
    transition: height 1s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0.125rem 0.125rem 0 0;
    /* Colors handled by utility classes or inline styles */
}

.bar-fill:hover {
    filter: brightness(1.05);
}

.bar-shine {
    position: absolute;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.4);
}

/* Labels Area */
.labels-area {
    height: 3.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    padding-top: 1rem;
}

@media (min-width: 640px) {
    .labels-area {
        gap: 2rem;
    }
}

.label-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

.phase-tag {
    display: block;
    width: 100%;
    max-width: 55px;
    background-color: #111827;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    text-align: center;
    padding: 0.375rem 0;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    transition: background-color 0.2s;
    cursor: default;
}

.phase-tag:hover {
    background-color: #1f2937;
}

.phase-name {
    font-size: 0.65rem;
    color: #9ca3af;
    /* Softer gray */
    font-weight: 500;
    /* Medium weight, not bold */
    text-align: center;
    letter-spacing: 0.025em;
    line-height: 1.2;
    margin-top: 0.25rem;
}

/* Right Column: Checklist */
.list-column {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: rgba(249, 250, 251, 0.3);
    height: 55%;
    min-height: 0;
}

@media (min-width: 768px) {
    .list-column {
        width: 50%;
        height: auto;
    }
}

.list-header {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    z-index: 10;
    flex-shrink: 0;
}

.list-title-text {
    font-size: 10px;
    font-weight: 700;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.phase-dots {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.phase-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    box-shadow: 0 0 0 2px #ffffff;
}

/* Scrollable List */
.list-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-height: 0;
}

/* Custom Scrollbar */
.list-scroll-area::-webkit-scrollbar {
    width: 3px;
}

.list-scroll-area::-webkit-scrollbar-track {
    background: transparent;
    margin-block: 50px;
}

.list-scroll-area::-webkit-scrollbar-thumb {
    background-color: #e2e8f0;
    border-radius: 10px;
}

.list-scroll-area::-webkit-scrollbar-thumb:hover {
    background-color: #cbd5e1;
}

/* Task Item */
.task-item {
    display: flex;
    align-items: center;
    /* Center vertically for better alignment */
    gap: 1.5rem;
    /* Increased gap further for "espacio prolijo" */
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #f3f4f6;
    transition: all 0.2s;
    background-color: #ffffff;
    position: relative;
}

.task-item:hover {
    border-color: #81C784;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.task-item.completed {
    border-color: transparent;
    box-shadow: none;
    background-color: rgba(249, 250, 251, 0.5);
}

.task-checkbox-btn {
    flex-shrink: 0;
    width: 1.125rem;
    /* Slightly larger for better click area */
    height: 1.125rem;
    border-radius: 0.25rem;
    border: 1px solid #e5e7eb;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    cursor: pointer;
}

.task-checkbox-btn:hover {
    border-color: #4CAF50;
}

.task-checkbox-btn.checked {
    background-color: #4CAF50;
    border-color: #4CAF50;
    color: #ffffff;
    transform: scale(1);
}

.task-check-icon {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform 0.2s;
    transform: scale(0);
}

.task-checkbox-btn.checked .task-check-icon {
    transform: scale(1);
}

.task-text-content {
    flex: 1;
    min-width: 0;
    text-align: left;
    /* Force left alignment */
}

.task-text {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    color: #374151;
    margin: 0;
    text-align: left;
    /* Force left alignment */
}

.task-item.completed .task-text {
    color: #9ca3af;
    text-decoration: line-through;
    text-decoration-color: #4CAF50;
    text-decoration-thickness: 1px;
}

.task-phase-badge {
    flex-shrink: 0;
    font-size: 9px;
    /* Slightly larger for readability */
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid;
    margin-left: 0.5rem;
}

.task-delete-btn {
    color: #d1d5db;
    padding: 0.25rem;
    border-radius: 0.25rem;
    opacity: 0;
    transition: all 0.2s;
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 0.25rem;
}

.task-item:hover .task-delete-btn {
    opacity: 1;
}

.task-delete-btn:hover {
    color: #ef4444;
}

/* Footer Input */
.list-footer {
    padding: 0.75rem;
    background-color: #ffffff;
    border-top: 1px solid #f3f4f6;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.02);
    z-index: 10;
    flex-shrink: 0;
}

.dashboard-last-updated {
    text-align: right;
    font-size: 0.65rem;
    color: #9ca3af;
    margin-top: 0.75rem;
    font-style: italic;
    font-weight: 500;
}

.input-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.info-tooltip-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #d1d5db;
    transition: color 0.2s;
    cursor: help;
}

.info-icon:hover {
    color: #4CAF50;
}

.tooltip-content {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 0.75rem;
    width: 16rem;
    background-color: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 11px;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-out;
    z-index: 50;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(0.5rem);
    text-align: left;
}

.info-tooltip-container:hover .tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tooltip-arrow {
    position: absolute;
    top: 100%;
    left: 0.375rem;
    margin-top: -0.375rem;
    border-width: 4px;
    border-style: solid;
    border-color: rgba(17, 24, 39, 0.95) transparent transparent transparent;
}

.task-input-wrapper {
    position: relative;
    flex: 1;
}

.task-input {
    width: 100%;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    /* text-xs */
    font-weight: 500;
    outline: none;
    transition: all 0.2s;
}

.task-input:focus {
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
    border-color: #4CAF50;
}

.phase-select {
    padding: 0.5rem;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 10px;
    font-weight: 700;
    color: #4b5563;
    outline: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    transition: background-color 0.2s;
}

.phase-select:hover {
    background-color: #f3f4f6;
}

.add-btn {
    background-color: #111827;
    color: #ffffff;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: none;
    transition: all 0.2s;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-btn:hover {
    background-color: #000000;
}

.add-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.add-btn:active {
    transform: scale(0.95);
}

/* Utility Colors for Phases */
.bg-f1 {
    background-color: #81C784;
}

.bg-f2 {
    background-color: #4CAF50;
}

.bg-f3 {
    background-color: #2E7D32;
}

.bg-f4 {
    background-color: #1B5E20;
}

.text-f1 {
    color: #2E7D32;
}

.text-f2 {
    color: #1B5E20;
}

.text-f3 {
    color: #1B5E20;
}

.text-f4 {
    color: #0D3310;
}

.border-f1 {
    border-color: #81C784;
}

.border-f2 {
    border-color: #4CAF50;
}

.border-f3 {
    border-color: #2E7D32;
}

.border-f4 {
    border-color: #1B5E20;
}

.bg-light-f1 {
    background-color: #F1F8E9;
}

.bg-light-f2 {
    background-color: #E8F5E9;
}

.bg-light-f3 {
    background-color: #C8E6C9;
}

.bg-light-f4 {
    background-color: #A5D6A7;
}

.ring-f1 {
    box-shadow: inset 0 0 0 1px #66bb6a;
}

.ring-f2 {
    box-shadow: inset 0 0 0 1px #388E3C;
}

.ring-f3 {
    box-shadow: inset 0 0 0 1px #1B5E20;
}

.ring-f4 {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

/* Text Colors for Chart Percentages */
.text-phase-f1 {
    color: #2E7D32;
}

.text-phase-f2 {
    color: #1B5E20;
}

.text-phase-f3 {
    color: #1B5E20;
}

.text-phase-f4 {
    color: #0D3310;
}

/* =========================================
   MOBILE RESPONSIVENESS (Refactor)
   ========================================= */
/* =========================================
   MOBILE RESPONSIVENESS (Refactor)
   ========================================= */
@media screen and (max-width: 768px) {

    /* GLOBAL RESET & SCROLL */
    html,
    body {
        overflow-x: hidden;
        width: 100%;
    }

    .container {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
        width: auto;
    }

    /* HEADER & NAV */
    .header__container {
        padding: 0 1.5rem;
        height: 80px;
        /* Standard mobile header height */
    }

    /* Keep scroll state consistent on mobile */
    .scroll-header {
        height: 80px;
        padding: 0.25rem 0;
    }

    .scroll-header .header__container {
        height: 80px;
    }

    .logo img {
        height: 40px !important;
        /* Standard mobile logo size */
    }

    .scroll-header .logo img,
    .scroll-header .logo-img-brisa,
    .scroll-header .logo-img-heart {
        height: 40px !important;
        max-height: 40px;
    }

    .logo-wrapper {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Adjust logo sizes for mobile if needed */
    .logo-brisa img {
        height: 40px !important;
    }

    .logo-heart img {
        height: 35px !important;
    }

    /* Disable Dynamic Title on Mobile */
    .header__title-center {
        display: none !important;
    }

    /* Mobile Menu REMOVED as per user request */
    .nav__menu,
    .nav__toggle {
        display: none !important;
    }

    .hamburger {
        display: none;
        /* Hide custom hamburger, use icon or simple text if preferred, or style it */
    }

    /* Use a simple icon for toggle if hamburger div is hidden, or style hamburger div properly */
    .nav__toggle::after {
        content: '\2630';
        /* Unicode Hamburger Menu */
        font-size: 2rem;
        /* Larger hamburger */
    }

    /* HERO SECTION */
    .section {
        padding: 5rem 0 3rem;
        /* Reduced top padding */
    }

    .section__title {
        font-size: var(--h1-font-size);
        /* Use standardized variable */
        line-height: 1.1;
    }

    .section__subtitle {
        font-size: var(--h3-font-size);
        /* Use standardized variable */
        margin-bottom: 1rem;
    }

    .section__description {
        font-size: var(--description-font-size);
        /* Use standardized variable */
        padding: 0 0.5rem;
        margin-bottom: 2rem;
    }

    /* MISION CARDS (Mobile Only) */
    .mision__container {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .mision__item {
        background: #ffffff;
        padding: 1.5rem;
        border-radius: 1rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.02);
        text-align: left;
    }

    .mision__item h3 {
        font-size: 1.25rem;
        color: var(--first-color);
        margin-bottom: 0.5rem;
        border-bottom: 2px solid rgba(106, 191, 75, 0.1);
        padding-bottom: 0.5rem;
        display: inline-block;
    }

    .mision__item p,
    .mision__item li {
        font-size: 0.95rem;
        color: #555;
        line-height: 1.6;
    }

    /* GRIDS (Referentes, Comités) */
    .comites__grid,
    .referentes__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .comite__card {
        padding: 1.5rem;
    }

    /* REFERENTES SPECIFIC */
    .referentes__row--top .referente__card {
        flex-direction: column;
        /* Stack vertically */
        text-align: center;
        padding: 2rem 1.5rem;
        gap: 1.5rem;
    }

    .referentes__row--top .referente__img-wrapper {
        width: 140px;
        /* Slightly smaller than desktop */
        height: 140px;
        margin: 0 auto;
    }

    .referentes__row--top .referente__content {
        align-items: center;
    }

    .referentes__row--bottom {
        grid-template-columns: 1fr;
    }

    /* COORDINADORES SPECIFIC */
    .coordinadores__container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .coordinator__card {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 1.5rem;
        padding: 1rem;
    }

    .coordinator__img-wrapper {
        width: 80px;
        height: 80px;
        margin-bottom: 0;
    }

    .coordinator__name {
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
    }

    /* DASHBOARD RESPONSIVENESS */
    .dashboard-layout {
        flex-direction: column;
        height: auto;
    }

    /* Allow dashboard to expand fully on mobile */
    .dashboard-container.is-open {
        max-height: none !important;
        height: auto !important;
    }

    .chart-column,
    .list-column {
        width: 100%;
        height: auto;
    }

    .chart-column {
        padding: 1.5rem 1rem;
        border-right: none;
        border-bottom: 1px solid #f3f4f6;
        min-height: 350px;
    }

    .list-column {
        height: 800px;
    }

    .labels-area {
        gap: 0.5rem;
    }

    .phase-tag {
        font-size: 0.55rem;
        padding: 0.25rem 0;
        max-width: 45px;
    }

    .phase-name {
        font-size: 0.55rem;
    }

    .bars-wrapper {
        gap: 0.5rem;
    }

    /* TOUCH OPTIMIZATION (Capacitive) */
    .button,
    .nav__link,
    .comite__link,
    .add-btn,
    .task-checkbox-btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .task-item {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .task-checkbox-btn {
        width: 1.5rem;
        height: 1.5rem;
    }

    .task-text {
        font-size: 12px;
    }

    /* Input Form Stacking */
    .input-form {
        flex-wrap: wrap;
    }

    .task-input-wrapper {
        min-width: 100%;
        margin-bottom: 0.5rem;
    }

    .phase-select {
        flex: 1;
        height: 44px;
    }

    .add-btn {
        flex: 0 0 44px;
        height: 44px;
    }
}

/* DESKTOP HEADER SCROLL EFFECT */
@media screen and (min-width: 968px) {

    /* Peripheral Displacement on Scroll */
    .scroll-header .header__container {
        padding: 0 5rem !important;
        /* Significantly increase padding to push content out */
        transition: padding 0.4s ease;
        /* Smooth transition */
        max-width: 100%;
        /* Ensure it can expand */
    }

    /* Ensure Logo moves left */
    .scroll-header .logo-wrapper {
        margin-left: 0;
    }

    /* Ensure Nav moves right */
    .scroll-header .nav__menu {
        margin-right: 0;
    }

    /* Normal State (for reference/reset) */
    .header__container {
        transition: padding 0.4s ease;
    }
}

.medium-title {
    font-size: 2rem !important;
    /* Medium size on mobile */
}

@media screen and (min-width: 968px) {
    .medium-title {
        font-size: 3rem !important;
        /* Restore large size on desktop */
    }
}

.long-title {
    font-size: 1.75rem !important;
    /* Smaller on mobile for long titles */
}

/* ==================== SESSION OVERLAY ==================== */
.session-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.session-overlay.active {
    opacity: 1;
    visibility: visible;
}

.session-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(46, 107, 70, 0.1);
    border-top: 4px solid #2E6B46;
    /* First Color */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1.5rem;
}

.session-text {
    font-size: 1.25rem;
    color: #2E6B46;
    /* First Color */
    font-weight: 600;
    letter-spacing: 0.5px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media screen and (min-width: 968px) {
    .long-title {
        font-size: 3rem !important;
        /* Restore large size on desktop */
    }
}

/* ==================== CALENDAR EMBED ==================== */
.calendar-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    gap: 12px;
}

.calendar-edit-btn {
    background-color: #7AB800;
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.2s;
    white-space: nowrap;
    margin-left: 16px;
}

.calendar-edit-btn:hover {
    background-color: #6aa000;
}

.calendar-description {
    font-size: 14px;
    color: #555;
    margin-bottom: 12px;
}

.calendar-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 58%;
    /* Reduced from 75% to remove excess bottom space */
    height: 0;
    overflow: hidden;
}

.calendar-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.calendar-container::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    background: #f3f6fa;
    pointer-events: none;
}

.calendar-container::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 260px;
    height: 64px;
    background: #f3f6fa;
    border-radius: 0 0 0 16px;
    pointer-events: none;
}

/* ==================== VISITAS WIDGET ==================== */
.visitas-widget {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: -28px auto 0 auto;
    text-align: center;
}