/* =========================================
   DIRECTORIO DE DISEÑADORAS
   Convierte la promesa "cada pieza lleva la
   firma de quien la hizo" en algo navegable.
========================================= */

/* =========================================
   ENLACES DE NAVEGACIÓN (botones)
   El menú y el pie ahora pueden abrir el
   directorio, así que un <button> debe verse
   igual que un <a>.
========================================= */

.nav-principal .nav-enlace {
    position: relative;

    padding: 0 0 3px;

    font-family: inherit;
    font-size: 15px;
    color: inherit;

    cursor: pointer;
}

.nav-principal .nav-enlace::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;

    width: 0%;
    height: 1px;

    background: var(--negro);
    transition: width 0.25s ease;
}

.nav-principal .nav-enlace:hover::after,
.nav-principal .nav-enlace:focus-visible::after {
    width: 100%;
}

.pie-columna .pie-enlace {
    display: block;

    padding: 0;
    margin-bottom: 10px;

    font-family: inherit;
    font-size: 14px;
    color: var(--blanco);
    text-align: left;
    opacity: 0.85;

    cursor: pointer;
}

.pie-columna .pie-enlace:hover {
    opacity: 1;
    text-decoration: underline;
}

/* =========================================
   DRAWER DE DISEÑADORAS
========================================= */

.drawer-intro {
    padding: 18px 28px 0;

    font-size: 13.5px;
    line-height: 1.55;
    color: var(--niebla);
}

.drawer-nota {
    font-size: 14px;
    color: var(--niebla);
}

.drawer-vacio {
    text-align: center;
    padding: 30px 8px;
}

.drawer-vacio strong {
    display: block;

    font-family: var(--serif);
    font-style: italic;
    font-size: 19px;
    color: var(--negro);

    margin-bottom: 8px;
}

.drawer-vacio p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--niebla);

    margin-bottom: 18px;
}

/* ---- Cada diseñadora ---- */

.disenadora-item {
    display: flex;
    align-items: center;
    gap: 14px;

    width: 100%;
    padding: 14px 12px;

    border-bottom: 1px solid var(--linea-oscura);

    text-align: left;
    color: inherit;

    cursor: pointer;

    transition: background var(--transicion-rapida), transform var(--transicion-rapida);
}

.disenadora-item:hover {
    background: var(--hueso);
    transform: translateX(3px);
}

.disenadora-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background: var(--negro);
    color: var(--blanco);

    font-family: var(--serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.disenadora-item:nth-child(3n + 2) .disenadora-avatar {
    background: var(--esmeralda-texto);
}

.disenadora-item:nth-child(3n + 3) .disenadora-avatar {
    background: var(--terracota-texto);
}

.disenadora-datos {
    display: flex;
    flex-direction: column;
    gap: 3px;

    flex: 1;
    min-width: 0;
}

.disenadora-datos strong {
    font-family: var(--serif);
    font-size: 16.5px;
    font-weight: 600;
    color: var(--negro);
}

.disenadora-datos span {
    font-size: 12.5px;
    color: var(--niebla);
}

.disenadora-flecha {
    flex-shrink: 0;

    font-size: 16px;
    color: var(--niebla);

    transition: transform var(--transicion-rapida), color var(--transicion-rapida);
}

.disenadora-item:hover .disenadora-flecha {
    color: var(--negro);
    transform: translateX(4px);
}

/* =========================================
   FICHA DE ORIGEN (dentro del detalle)
========================================= */

.detalle-origen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;

    margin: 20px 0 24px;

    background: var(--linea-oscura);

    border: 1px solid var(--linea-oscura);
    border-radius: var(--radio-md);

    overflow: hidden;
}

.origen-item {
    display: flex;
    flex-direction: column;
    gap: 3px;

    padding: 11px 13px;

    background: var(--blanco);
}

.origen-etiqueta {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--niebla);
}

.origen-valor {
    font-size: 14px;
    color: var(--negro);
}

.origen-destacado {
    background: rgba(16, 97, 74, 0.08);
}

.origen-destacado .origen-valor {
    color: var(--esmeralda-texto);
    font-weight: 600;
}

/* =========================================
   MÁS DE ESTA DISEÑADORA
========================================= */

.detalle-relacionadas {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--linea-oscura);
}

.relacionadas-titulo {
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--negro);

    margin-bottom: 14px;
}

.relacionadas-pista {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.relacionada {
    display: flex;
    flex-direction: column;
    gap: 5px;

    text-align: left;
    color: inherit;

    cursor: pointer;
}

.relacionada-img {
    display: block;

    aspect-ratio: 3 / 4;

    overflow: hidden;

    background: var(--hueso);
    border-radius: var(--radio-sm);
}

.relacionada-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform 0.35s ease;
}

.relacionada:hover .relacionada-img img {
    transform: scale(1.06);
}

.relacionada-nombre {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--negro);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.relacionada-precio {
    font-size: 12.5px;
    color: var(--niebla);
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 560px) {
    .relacionadas-pista {
        grid-template-columns: repeat(2, 1fr);
    }

    .detalle-origen {
        grid-template-columns: 1fr;
    }
}