/* =====================================================================
   A & E ATELIER — Icono de informacion
   Se usa en comparar.html y en los cinco muestrarios. Solo depende de
   los tokens --gold / --carbon / --tema-* que ambas paginas ya declaran.
   ===================================================================== */

.info-i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; flex: 0 0 16px;
    margin-left: .38rem; padding: 0;
    vertical-align: -2px;
    border: 1px solid rgba(var(--gold-rgb), .48);
    border-radius: 50%;
    background: none; color: var(--gold);
    font-family: Jost, sans-serif; font-size: .58rem; font-style: italic;
    line-height: 1; cursor: pointer; -webkit-appearance: none; appearance: none;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.info-i:hover { background: rgba(var(--gold-rgb), .16); border-color: var(--gold); }
.info-i:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.info-i[aria-expanded="true"] {
    background: var(--gold); border-color: var(--gold);
    color: var(--tema-btn-oro-txt, #14120F); transform: scale(1.08);
}

/* ------------------------------------------------------- la ventana */
.info-caja {
    position: fixed; z-index: 200;
    width: min(19rem, calc(100vw - 1.6rem));
    padding: 1rem 1.05rem 1.1rem;
    background: var(--tema-superficie, #1E1A15);
    border: 1px solid var(--gold);
    box-shadow: 0 22px 46px -20px rgba(0, 0, 0, .8),
                0 2px 8px rgba(0, 0, 0, .35);
    opacity: 0; visibility: hidden; transform: translateY(6px) scale(.985);
    transition: opacity .22s ease, transform .22s cubic-bezier(.16, 1, .3, 1),
                visibility 0s linear .22s;
}
.info-caja.abierta {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .22s ease, transform .22s cubic-bezier(.16, 1, .3, 1);
}

/* pico que apunta al icono */
.info-pico {
    position: absolute; width: 9px; height: 9px;
    background: var(--tema-superficie, #1E1A15);
    border-left: 1px solid var(--gold); border-top: 1px solid var(--gold);
    transform: rotate(45deg);
}
.info-caja[data-lado="abajo"] .info-pico { top: -5px; }
.info-caja[data-lado="arriba"] .info-pico { bottom: -5px; transform: rotate(225deg); }

.info-cab {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: .8rem; margin-bottom: .55rem;
}
.info-tit {
    margin: 0;
    font-family: 'Cormorant Garamond', serif; font-size: 1.06rem;
    line-height: 1.25; color: var(--gold); font-weight: 400;
}
.info-cerrar {
    flex: 0 0 24px; width: 24px; height: 24px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(var(--gold-rgb), .3); background: none;
    color: var(--carbon-soft, #B9B2A4);
    font-size: .95rem; line-height: 1; cursor: pointer;
    transition: color .25s ease, border-color .25s ease;
}
.info-cerrar:hover { color: var(--gold); border-color: var(--gold); }

.info-txt {
    margin: 0;
    font-family: Jost, sans-serif; font-size: .78rem; line-height: 1.68;
    color: var(--carbon-soft, #B9B2A4);
}
.info-txt b { color: var(--carbon, #F5F0E6); font-weight: 500; }
.info-txt em {
    display: block; margin-top: .5rem;
    font-style: normal; font-size: .72rem; opacity: .8;
}

@media (prefers-reduced-motion: reduce) {
    .info-caja, .info-i { transition-duration: .01ms !important; }
}