/* ============================================================
   SurLibrary — Liquid glass
   El cristal se reserva a navegación, avisos y pies de foto: nunca
   detrás de texto largo (01-MARCA). Fallback sólido sin backdrop-filter
   y cuando la persona prefiere menos transparencia.
   ============================================================ */
.glass {
    position: relative;
    background: var(--glass-light);
    border: 1px solid var(--glass-edge);
    box-shadow: var(--glass-sheen), var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    isolation: isolate;
}
/* Brillo «líquido»: reflejo curvo que se desplaza al pasar el ratón. */
.glass::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
    background:
        radial-gradient(120% 70% at var(--gx, 20%) -20%, rgba(255, 255, 255, .38), transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, .10), transparent 40%);
    transition: background-position .6s var(--ease);
}
.glass:hover { --gx: 70%; }

/* Píldora de navegación: sobre arena se vuelve cristal claro y algo más opaco. */
.nav-pill.glass { background: rgba(247, 244, 233, .86); border-color: rgba(255, 255, 255, .7); box-shadow: var(--glass-sheen), 0 8px 30px -14px rgba(33, 59, 45, .45); }
.has-hero .nav-pill.glass:not(.is-scrolled) { background: rgba(20, 38, 28, .22); border-color: rgba(255, 255, 255, .32); }
.nav-pill { transition: background-color .35s var(--ease), color .35s var(--ease); }

/* Variantes */
.glass--deep { background: rgba(26, 46, 35, .93); border-color: rgba(255, 255, 255, .2); }
.glass--forest {
    background: rgba(33, 59, 45, .93);
    border-color: rgba(247, 244, 233, .22);
    color: var(--arena);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 18px 40px -20px rgba(16, 32, 22, .7);
}
.glass--amber { background: rgba(217, 154, 58, .2); border-color: rgba(217, 154, 58, .55); }

/* Chips de situación: cristal ámbar sobre arena. */
.chip {
    display: inline-flex; align-items: center; gap: .55em; min-height: 48px; padding: 0 20px;
    border-radius: var(--r-pill); text-decoration: none; font-weight: 600; color: var(--senal-ink);
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(217, 154, 58, .16));
    border: 1px solid rgba(217, 154, 58, .55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 16px -10px rgba(168, 111, 28, .6);
    transition: transform .2s var(--ease), box-shadow .2s;
}
.chip:hover { color: var(--senal-ink); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 12px 22px -12px rgba(168, 111, 28, .75); text-decoration: none; }
.chip .ico { color: var(--senal-dk); width: 20px; height: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* Botón de cristal sobre foto. */
.btn--glass {
    --bg: rgba(247, 244, 233, .14); --fg: var(--arena);
    border-color: rgba(255, 255, 255, .45);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-sheen);
}
.btn--glass:hover { --bg: rgba(247, 244, 233, .24); }

/* Pie de foto de cristal dentro de las tarjetas. */
.card__glass {
    position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: .45em;
    padding: 6px 12px; border-radius: var(--r-pill); font-size: .8rem; font-weight: 650; color: var(--bosque);
    background: rgba(247, 244, 233, .7); border: 1px solid rgba(255, 255, 255, .75);
    -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass, .has-hero .nav-pill.glass:not(.is-scrolled) { background: rgba(33, 59, 45, .9); }
    .nav-pill.glass { background: var(--arena); }
    .btn--glass { --bg: rgba(33, 59, 45, .75); }
    .card__glass { background: var(--arena); }
}
@media (prefers-reduced-transparency: reduce) {
    .glass, .glass--deep { background: var(--bosque) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .nav-pill.glass, .nav-pill.glass.is-scrolled { background: var(--arena) !important; color: var(--bosque) !important; }
    .btn--glass { --bg: var(--bosque); backdrop-filter: none; }
    .card__glass { background: var(--arena); backdrop-filter: none; }
}