:root {
    --verde-claro: #c7fff7;
    --verde-aguamarina: #9bfff6;
    --cian-brillante: #00e5e0;
    --cian-profundo: #00d1d2;
    --azul-verde: #0098a1;
    --teal-oscuro: #007c7c;
    --verde-musgo: #004f4d;
    --lila-claro: #f8eafc;
    --rosa-suave: #f3cffb;
    --purpura: #6829d0;
    --morado-oscuro: #3d0866;
    --indigo: #2d1470;
    --obsidiana: #1b2036;
    --ambar: #d8b039;
    --amarillo-miel: #ffcd2e;
    --rojo-ladrillo: #ba2f19;
    --azul-neblina: #61909e;
    --gris-mineral: #958e87;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background: linear-gradient(164deg, #003735, #ffe187);
    font-family: 'Inter', sans-serif;
    color: #FFFFFF;
    padding-top: 30px;
}

/* BARRA SUPERIOR FIJA CON LOGO */
.permanent-top-bar {
    position: fixed; top: 0; left: 0; width: 100%; height: 40px;
    background: var(--verde-musgo); backdrop-filter: blur(4px); z-index: 1100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.2rem; border-bottom: 1px solid var(--cian-brillante);
}
.top-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--verde-claro);
    font-weight: 600;
    cursor:pointer;
}
.top-brand i { font-size: 1rem; color: var(--amarillo-miel); }
#marca {max-width: 30px;}
#logo-text {
    font-family: 'Playfair Display', sans-serif;
    font-size: 0.85rem;
}
.top-actions a {
    color: var(--verde-claro);
    text-decoration: none;
    margin-left: 1rem;
    font-size: 0.7rem;
    transition: 0.2s;
}
.top-actions a:hover { color: var(--amarillo-miel); }

/* Menú hamburguesa */
.hamburger { display: none; flex-direction: column; gap: 4px; cursor: pointer; }
.hamburger span { width: 22px; height: 2px; background: var(--verde-claro); }
.mobile-menu {
    position: fixed; top: 30px; left: -100%; width: 75%; max-width: 280px;
    height: calc(100vh - 30px); background: var(--morado-oscuro);
    backdrop-filter: blur(12px); z-index: 1050; padding: 1.5rem;
    transition: 0.3s; border-right: 2px solid var(--purpura);
}
.mobile-menu a { color: var(--rosa-suave); display: block; padding: 0.6rem 0; border-bottom: 1px solid var(--purpura); text-decoration: none; }
.mobile-menu.open { left: 0; }
@media (max-width: 768px) { .desktop-menu { display: none; } .hamburger { display: flex; } }

/* Contenido con jerarquía visual */
.card-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 1.8rem;
    height: 100%;
    color: #000000;
}

.section-sub {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.5rem;
    color: #000000;
    opacity: 0.9;
    letter-spacing: 1px;
    color: var(--purpura);
    font-weight: 600;
}

.section-title {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 22PX;
    font-family: 'Playfair Display', serif;
    color: var(--verde-aguamarina);
    border-left: 4px solid var(--amarillo-miel);
    padding-left: 0.7rem; margin-bottom: 0.6rem;
}

#t-left {
    text-align: left!important;
}

#t-blanco{
    color: #FFFFFF;
}

#t-escarpe{
 color: var(--verde-musgo);
}

/* RETICULA GENERAL */
.index_1 { max-width: 1600px; margin: 1rem auto; padding: 0 1.2rem 2rem; }
.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}
.fib-1 { grid-column: span 1; }
.fib-2 { grid-column: span 2; }
.fib-3 { grid-column: span 3; }
.fib-4 { grid-column: span 4; }
.fib-5 { grid-column: span 5; }
.fib-6 { grid-column: span 6; }
.fib-8 { grid-column: span 8; }
.fib-9 { grid-column: span 9; }
.fib-10 { grid-column: span 10; }
.fib-11 { grid-column: span 11; }
.fib-12 { grid-column: span 12; }

.btn-cta{
    padding: 3px 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    color: #0a0a0a;
    background: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 11px;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
    cursor: pointer;
}

.btn-cta:hover{
    color: #ffffff;
    background: #0a0a0a;
    border: #0a0a0a;
    margin: 0 0 1px 0;
}
.btn-cta:active{
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
}

/*--------------------------------------------------*/


/* RESPONSIVE */
@media (max-width: 992px) {
    .fib-2, .fib-3, .fib-4, .fib-5, .fib-6, .fib-8 { grid-column: span 12; }
    .iconos-horizontales { flex-direction: column; align-items: center; }
    .buttons-right { justify-content: center; }
}