/**
 * LURKAIA - Ficha.css
 * Estilos para las fichas de criaturas, deidades y leyendas
 */

/* =====================================================
   VARIABLES ESPECÍFICAS DE FICHA
   ===================================================== */
:root {
    --ficha-bg: #f5f0e6;
    --ficha-paper: #faf8f3;
    --ficha-brown-dark: #3d2b1f;
    --ficha-brown-medium: #5c4033;
    --ficha-brown-light: #8b7355;
    --ficha-gold: #c9a959;
    --ficha-border: #d4c4a8;
    --ficha-text: #4a3f35;
    --ficha-text-muted: #6b5d4d;
}

/* =====================================================
   PAGE BACKGROUND
   ===================================================== */
.page-ficha {
    background: var(--ficha-bg);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect fill="%23f5f0e6" width="100" height="100"/><circle fill="%23ebe5d8" cx="50" cy="50" r="1" opacity="0.3"/></svg>');
}

/* =====================================================
   FICHA HEADER BACKGROUND (Fondo bajo navegación)
   ===================================================== */
.ficha-header-bg {
    position: relative;
    height: 100px;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%);
}

.ficha-header-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../assets/img/ficha-header-bg.webp') center/cover no-repeat;
    opacity: 0.35;
    z-index: 0;
}

/* =====================================================
   BREADCRUMB
   ===================================================== */
.ficha-breadcrumb {
    background: #1a1a1a;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.ficha-breadcrumb__list {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
}

.ficha-breadcrumb__list li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: rgba(255, 255, 255, 0.8);
}

.ficha-breadcrumb__list li:not(:last-child)::after {
    content: '/';
    color: rgba(255, 255, 255, 0.4);
    margin-left: var(--space-sm);
}

.ficha-breadcrumb__list a {
    color: #d4af7a;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.ficha-breadcrumb__list a:hover {
    color: #fff;
}

/* =====================================================
   HEADER PRINCIPAL (Título grande)
   ===================================================== */
.ficha-header {
    background: var(--ficha-paper);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: var(--space-lg) 0;
    text-align: center;
}

.ficha-header__title {
    font-family: 'Cinzel', serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--ficha-brown-dark);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 var(--space-sm);
}

.ficha-header__subtitle {
    font-family: 'Cinzel', serif;
    font-size: 1.225rem;
    color: var(--ficha-brown-light);
    font-style: italic;
    margin: 0;
    letter-spacing: 0.05em;
}

.ficha-header__subtitle-text {
    font-family: 'Lora', serif;
    font-size: 1.1rem;
    color: var(--ficha-brown-medium);
    font-style: normal;
    margin: 0;
}

/* =====================================================
   LAYOUT PRINCIPAL
   ===================================================== */
.ficha-content {
    background: var(--ficha-paper);
    padding: 0;
}

.ficha-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--space-2xl);
    align-items: start;
    border-top: 1px solid var(--ficha-border);
    padding-top: var(--space-lg);
}

/* =====================================================
   SIDEBAR (Columna izquierda)
   ===================================================== */
.ficha-sidebar {
    position: sticky;
    top: 100px;
}

.ficha-image {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    margin-bottom: var(--space-lg);
}

.ficha-image img {
    width: 320px;
    height: 550px;
    object-fit: cover;
    display: block;
}

/* Metadatos */
.ficha-metadata {
    background: var(--ficha-bg);
    border: 1px solid var(--ficha-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
}

.ficha-metadata__item {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--ficha-border);
}

.ficha-metadata__item:last-child {
    border-bottom: none;
}

.ficha-metadata__label {
    font-weight: 600;
    color: var(--ficha-brown-dark);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.ficha-metadata__value {
    color: var(--ficha-text);
    font-size: 0.9rem;
}

/* =====================================================
   CONTENIDO PRINCIPAL (Columna derecha)
   ===================================================== */
.ficha-main {
    padding-left: var(--space-lg);
}

.ficha-section {
    margin-bottom: var(--space-xl);
}

.ficha-section__title {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ficha-brown-dark);
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--ficha-border);
    text-transform: none;
}

.ficha-section__text {
    color: var(--ficha-text);
    font-size: 1rem;
    line-height: 1.8;
    margin: 0 0 var(--space-md) 0;
}

.ficha-section__text:last-child {
    margin-bottom: 0;
}

.ficha-separator {
    border: none;
    border-top: 1px solid var(--ficha-border);
    margin: var(--space-lg) 0;
}

/* Rasgos y Costumbres */
.ficha-traits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--ficha-border);
    margin-bottom: var(--space-md);
}

.ficha-trait {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
}

.ficha-trait__icon {
    font-size: 1.25rem;
}

.ficha-trait__text {
    color: var(--ficha-text);
    font-size: 0.9rem;
}

/* Tags */
.ficha-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.ficha-tag {
    background: var(--ficha-brown-light);
    color: var(--ficha-paper);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
}

/* =====================================================
   BOTÓN DE FICHA
   ===================================================== */
.ficha-btn {
    display: inline-block;
    background: var(--ficha-brown-dark);
    color: var(--ficha-paper);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-fast);
    border: 2px solid var(--ficha-brown-dark);
}

.ficha-btn:hover {
    background: var(--ficha-brown-medium);
    border-color: var(--ficha-brown-medium);
    color: var(--ficha-paper);
    transform: translateY(-2px);
}

.ficha-btn--small {
    padding: var(--space-xs) var(--space-md);
    font-size: 0.8rem;
}

/* Contenedor de botones */
.ficha-buttons {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* =====================================================
   LUGARES ASOCIADOS
   ===================================================== */
.ficha-places {
    background: var(--ficha-paper);
    padding: var(--space-xl) 0;
}

.ficha-places .ficha-section__title {
    border-top: 1px solid var(--ficha-border);
    padding-top: var(--space-xl);
}

.ficha-places .tradition-card {
    height: 150px;
}

.ficha-places .tradition-card__description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ficha-places__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.ficha-place {
    text-align: center;
}

.ficha-place img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ficha-place__name {
    font-weight: 600;
    color: var(--ficha-brown-dark);
    font-size: 0.95rem;
}

/* =====================================================
   LEYENDAS RELACIONADAS
   ===================================================== */
.ficha-legends {
    background: var(--ficha-paper);
    padding: var(--space-xl) 0;
    border-top: 1px solid var(--ficha-border);
}

.ficha-legends__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding: 0;
    list-style: none;
}

.ficha-legends__list li {
    position: relative;
    padding-left: var(--space-lg);
}

.ficha-legends__list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--ficha-brown-medium);
    font-weight: bold;
}

.ficha-legends__list a {
    color: var(--ficha-brown-dark);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.ficha-legends__list a:hover {
    color: var(--ficha-brown-medium);
    text-decoration: underline;
}

/* =====================================================
   CRIATURAS RELACIONADAS
   ===================================================== */
.ficha-related {
    background: var(--ficha-bg);
    padding: var(--space-2xl) 0;
    border-top: 1px solid var(--ficha-border);
}

.ficha-related__title {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ficha-brown-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--space-xl);
}

.ficha-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.ficha-related__card {
    background: var(--ficha-paper);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.ficha-related__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.ficha-related__card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.ficha-related__card h3 {
    font-family: 'Cinzel', serif;
    font-size: 20px;
    color: var(--ficha-brown-dark);
    margin: var(--space-md) 0 var(--space-sm);
}

.ficha-related__card .ficha-btn {
    margin-bottom: var(--space-md);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 900px) {
    .ficha-layout {
        grid-template-columns: 1fr;
    }

    .ficha-sidebar {
        position: static;
    }

    .ficha-main {
        padding-left: 0;
        border-left: none;
        padding-top: var(--space-lg);
        border-top: 1px solid var(--ficha-border);
    }

    .ficha-related__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .ficha-hero {
        padding: 120px 0 30px;
    }

    .ficha-traits {
        grid-template-columns: 1fr;
    }

    .ficha-related__grid {
        grid-template-columns: 1fr;
    }

    .ficha-breadcrumb__list {
        flex-wrap: wrap;
        font-size: 0.8rem;
    }
}

/* =====================================================
   NEW LAYOUT - Version 2
   ===================================================== */

/* Layout principal con imagen a la izquierda */
.ficha-layout-new {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--space-md);
    align-items: start;
    border-top: 1px solid var(--ficha-border);
    padding-top: var(--space-lg);
}

/* Sidebar con imagen */
.ficha-sidebar-new {
    position: static;
}

.ficha-image-new {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    margin-bottom: 0;
}

.ficha-image-new img {
    width: 300px;
    height: 600px;
    object-fit: cover;
    display: block;
}

.ficha-sidebar-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.ficha-btn-new {
    display: block;
    background: var(--ficha-brown-dark);
    color: #fff;
    text-align: center;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.ficha-btn-new:hover {
    background: var(--ficha-brown-medium);
}

.ficha-btn-new--secondary {
    background: var(--ficha-gold);
    color: var(--ficha-brown-dark);
}

.ficha-btn-new--secondary:hover {
    background: #d4b968;
}

/* Cajas de contenido lado a lado */
.ficha-boxes {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-sm);
    align-items: stretch;
}

/* Rasgos ocupa todo el ancho de la columna derecha */
.ficha-section--inline {
    grid-column: 1 / -1;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    margin-bottom: -65px;
}

/* Wrapper para tags y botones de compartir */
.tags-share-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: nowrap;
    /* Desktop: alineados en una fila */
}

.tags-share-wrapper .share-buttons {
    flex-shrink: 0;
    /* Evitar que los botones se aplasten */
}

@media (max-width: 768px) {
    .tags-share-wrapper {
        flex-wrap: wrap;
        /* Móvil: permitir envolver */
    }

    .ficha-section--inline {
        margin-bottom: 0px;
        /* Eliminar margen negativo en móvil */
    }

    /* Separador encima de los botones (entre tags y botones) */
    .share-buttons--inline {
        width: 100%;
        border-top: 1px solid var(--ficha-border);
        padding-top: 1rem;
        margin-top: 1rem;
    }
}

.ficha-box {
    background: #fff;
    border: 1px solid var(--ficha-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.ficha-box__title {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ficha-brown-dark);
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--ficha-border);
}

.ficha-box__text {
    color: var(--ficha-text);
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0 0 var(--space-md);
}

.ficha-box__text:last-child {
    margin-bottom: 0;
}

/* Ficha Rápida - Navegación */
.ficha-quick-nav {
    background: var(--ficha-paper);
}

.ficha-quick-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ficha-quick-nav__list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--ficha-border);
}

.ficha-quick-nav__list li:last-child {
    border-bottom: none;
}

.ficha-quick-nav__list a {
    color: var(--ficha-text);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color var(--transition-fast);
}

.ficha-quick-nav__list a:hover {
    color: var(--ficha-brown-dark);
}

.ficha-quick-nav__list span {
    color: var(--ficha-brown-light);
}

.ficha-quick-nav__map {
    display: block;
    margin-top: var(--space-md);
    color: var(--ficha-gold);
    text-decoration: none;
    font-size: 0.85rem;
}

.ficha-quick-nav__btn {
    display: block;
    margin-top: var(--space-md);
    background: var(--ficha-brown-dark);
    color: #fff;
    text-align: center;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.ficha-quick-nav__btn:hover {
    background: var(--ficha-brown-medium);
}

.ficha-quick-nav__map:hover {
    color: var(--ficha-brown-dark);
}

/* Sección amplia */
.ficha-section--wide {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--ficha-border);
}

/* Grid de rasgos 2x2 */
.ficha-traits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs) var(--space-sm);
    margin-bottom: var(--space-md);
    justify-items: start;
}

.ficha-trait-new {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
}

.ficha-trait-new__icon {
    font-size: 1.25rem;
}

.ficha-trait-new__text {
    color: var(--ficha-text);
    font-size: 0.95rem;
}

/* Etiquetas tipo pill */
.ficha-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: 0;
}

.ficha-tag {
    display: inline-block;
    background: rgba(90, 75, 65, 0.12);
    border: 1px solid var(--ficha-border);
    color: var(--ficha-brown-dark);
    padding: var(--space-xs) var(--space-md);
    border-radius: 8px;
    font-size: 0.85rem;
    transition: all var(--transition-fast);
}

.ficha-tag:hover {
    background: var(--ficha-border);
    color: var(--ficha-brown-dark);
}

/* Enlace de más */
.ficha-more-link {
    text-align: center;
    padding: var(--space-md) 0;
}

.ficha-more-link a {
    color: var(--ficha-brown-light);
    text-decoration: none;
    font-size: 0.9rem;
}

.ficha-more-link a:hover {
    color: var(--ficha-brown-dark);
}

/* =====================================================
   SECCIÓN LEYENDAS + INFO EXTRA (50/50)
   ===================================================== */
.ficha-extra-content {
    background: var(--ficha-paper);
    padding: var(--space-xl) 0;
}

.ficha-extra-content .ficha-section__title {
    border-top: 1px solid var(--ficha-border);
    padding-top: var(--space-xl);
}

.ficha-extra-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: stretch;
}

.ficha-extra-box {
    background: #fff;
    border: 1px solid var(--ficha-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

/* Caja de lugares sin frame */
.ficha-extra-box--lugares {
    background: transparent;
    border: none;
    padding: 0;
    padding-top: 25px;
}

.ficha-lugares-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

/* En fichas de criaturas (sin page-leyenda), lugares en 1 columna */
.page-ficha:not(.page-leyenda) .ficha-lugares-grid {
    grid-template-columns: 1fr;
}

/* Tarjetas mini para lugares */
.tradition-card--mini {
    height: 150px;
    display: flex;
    flex-direction: row;
}

.tradition-card--mini .tradition-card__image {
    flex: 0 0 35%;
    min-height: 150px;
    height: 100%;
}

.tradition-card--mini .tradition-card__content {
    flex: 1;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tradition-card--mini .tradition-card__title {
    font-size: 1rem;
    margin-bottom: var(--space-xs);
}

.tradition-card--mini .tradition-card__description {
    font-size: 0.85rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Separador de ancho completo */
.ficha-separator--full {
    width: 100%;
    margin: 0 0 var(--space-lg) 0;
}

.ficha-extra-box__title {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ficha-brown-dark);
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--ficha-border);
}

/* Secciones de información extra */
.ficha-info-section {
    margin-bottom: var(--space-lg);
}

.ficha-info-section:last-child {
    margin-bottom: 0;
}

.ficha-info-section__title {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ficha-brown-dark);
    margin: 0 0 var(--space-sm);
    display: inline-block;
    position: relative;
    padding-left: var(--space-md);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--ficha-border);
}

.ficha-info-section__title::before {
    content: '●';
    position: absolute;
    left: 0;
    color: var(--ficha-gold);
    font-size: 0.7rem;
    top: 50%;
    transform: translateY(-60%);
}

.ficha-info-section__text {
    color: var(--ficha-text);
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0;
}

.ficha-info-section__text strong {
    color: var(--ficha-brown-dark);
}

.ficha-info-section__text em {
    font-style: italic;
    color: var(--ficha-brown-medium);
}

/* Grid 2x2 para listas de información */
.ficha-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs) var(--space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.ficha-info-grid li {
    font-size: 0.85rem;
    color: var(--ficha-text);
    padding: var(--space-xs) 0;
    position: relative;
    padding-left: var(--space-md);
}

.ficha-info-grid li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--ficha-gold);
    font-weight: bold;
}

.ficha-info-grid a {
    color: var(--ficha-brown-dark);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.ficha-info-grid a:hover {
    color: var(--ficha-gold);
    text-decoration: underline;
}

.ficha-leyendas-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ficha-leyendas-list li {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--ficha-border);
}

.ficha-leyendas-list li:last-child {
    border-bottom: none;
}

.ficha-leyendas-list a {
    color: var(--ficha-brown-dark);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color var(--transition-fast);
}

.ficha-leyendas-list a:hover {
    color: var(--ficha-gold);
    text-decoration: underline;
}

/* Sección de leyendas relacionadas con tarjetas */
.ficha-leyendas-section {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
}

.ficha-leyendas-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

/* Modificador para tarjetas en 1 columna */
.ficha-leyendas-cards--single {
    grid-template-columns: 1fr;
}

/* Responsive para nuevo layout */
@media (max-width: 900px) {
    .ficha-layout-new {
        grid-template-columns: 1fr;
    }

    .ficha-sidebar-new {
        position: static;
    }

    .ficha-image-new img {
        width: 100%;
        height: 400px;
    }

    .ficha-boxes {
        grid-template-columns: 1fr;
    }

    .ficha-traits-grid {
        grid-template-columns: 1fr;
    }

    .ficha-extra-grid {
        grid-template-columns: 1fr;
    }

    .ficha-leyendas-cards {
        grid-template-columns: 1fr;
    }

    /* Mantener tarjetas mini horizontales en mobile */
    .tradition-card--mini {
        flex-direction: row;
        height: auto;
        min-height: 120px;
    }

    .tradition-card--mini .tradition-card__image {
        flex: 0 0 35%;
        min-height: 120px;
        max-height: none;
    }

    .tradition-card--mini .tradition-card__content {
        flex: 1;
        display: flex;
        padding: var(--space-md);
    }
}

/* =====================================================
   PLANTILLA FICHAS DE LEYENDAS
   ===================================================== */

/* Header decorativo LEYENDAS */
.leyenda-header-bg {
    position: relative;
    min-height: 180px;
    background: linear-gradient(135deg, #2c1810 0%, #4a3728 50%, #5c4433 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.leyenda-header-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../assets/img/leyendas-hero-bg.webp') center/cover no-repeat;
    opacity: 0.4;
    z-index: 0;
}

.leyenda-header-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    z-index: 1;
}

.leyenda-header-title {
    position: relative;
    z-index: 2;
    font-family: 'Cinzel', serif;
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 400;
    color: #d4c4a8;
    letter-spacing: 0.3em;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    margin: 0;
}

/* El breadcrumb de leyendas usa el mismo estilo que las fichas de criaturas */

/* Header título leyenda */
.ficha-header--leyenda {
    text-align: left;
    padding: var(--space-xl) 0 var(--space-lg);
}

.ficha-header--leyenda .ficha-header__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    text-transform: none;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-xs);
}

.ficha-header--leyenda .ficha-header__subtitle {
    font-style: normal;
    font-size: 1.1rem;
    color: var(--ficha-brown-medium);
}

/* Layout principal: Imagen + Ficha Rápida */
.leyenda-layout-top {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: var(--space-xl);
    align-items: stretch;
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--ficha-border);
}

.leyenda-image-main {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    display: flex;
    max-height: 450px;
}

.leyenda-image-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ficha Rápida */
.leyenda-ficha-rapida {
    background: var(--ficha-paper);
    border: 1px solid var(--ficha-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    max-height: 450px;
    overflow-y: auto;
}

.leyenda-ficha-rapida__title {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ficha-brown-dark);
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--ficha-border);
}

.leyenda-ficha-rapida__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.leyenda-ficha-rapida__list li {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid rgba(212, 196, 168, 0.5);
    font-size: 0.9rem;
    line-height: 1.5;
}

.leyenda-ficha-rapida__list li:last-child {
    border-bottom: none;
}

.leyenda-ficha-rapida__icon {
    font-size: 1rem;
}

.leyenda-ficha-rapida__bullet {
    font-size: 1rem;
    color: var(--ficha-brown-medium);
    margin-right: var(--space-xs);
}

.leyenda-ficha-rapida__label {
    font-weight: 600;
    color: var(--ficha-brown-dark);
    font-size: 0.85rem;
    margin: 0;
    display: inline;
}

.leyenda-ficha-rapida__value {
    color: var(--ficha-text);
}

.leyenda-ficha-rapida__btn {
    display: block;
    margin-top: var(--space-md);
    background: var(--ficha-brown-dark);
    color: #fff;
    text-align: center;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.leyenda-ficha-rapida__btn:hover {
    background: var(--ficha-brown-medium);
}

/* Grid contenido: La Leyenda + Sidebar */
.leyenda-content-section {
    background: var(--ficha-paper);
    padding: var(--space-xl) 0;
}

.leyenda-content-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-xl);
    align-items: start;
}

/* Título de sección */
.leyenda-section-title {
    font-family: 'Cinzel', serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ficha-brown-dark);
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--ficha-brown-dark);
}

/* Texto principal de la leyenda */
.leyenda-texto-principal {
    padding-right: var(--space-lg);
}

.leyenda-texto p {
    color: var(--ficha-text);
    font-size: 1rem;
    line-height: 1.9;
    margin: 0 0 var(--space-md);
    text-align: justify;
}

.leyenda-texto p:last-child {
    margin-bottom: 0;
}

/* Sidebar */
.leyenda-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.leyenda-sidebar-box {
    background: #faf7f2;
    border: 1px solid var(--ficha-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.leyenda-sidebar-title {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ficha-brown-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--ficha-border);
}

.leyenda-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.leyenda-sidebar-list li {
    margin-bottom: var(--space-md);
    font-size: 0.85rem;
    color: var(--ficha-text);
    line-height: 1.6;
}

.leyenda-sidebar-list li:last-child {
    margin-bottom: 0;
}

.leyenda-sidebar-bullet {
    color: var(--ficha-brown-medium);
    margin-right: var(--space-xs);
}

.leyenda-sidebar-list strong,
.leyenda-sidebar-label {
    display: inline;
    color: var(--ficha-brown-dark);
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
}

.leyenda-sidebar-list p {
    margin: 0;
    color: var(--ficha-text-muted);
    font-size: 0.8rem;
}

.leyenda-sidebar-list--dots li {
    position: relative;
    padding-left: var(--space-md);
}

.leyenda-sidebar-list--dots li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--ficha-brown-medium);
}

/* Sección Lugares Asociados */
.leyenda-lugares-section {
    background: var(--ficha-bg);
    padding: var(--space-xl) 0;
    border-top: 1px solid var(--ficha-border);
}

.leyenda-lugares-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.leyenda-lugar-card {
    background: var(--ficha-paper);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.leyenda-lugar-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.leyenda-lugar-card__image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.leyenda-lugar-card__content {
    padding: var(--space-md);
}

.leyenda-lugar-card__title {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ficha-brown-dark);
    margin: 0 0 var(--space-sm);
}

.leyenda-lugar-card__description {
    color: var(--ficha-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 var(--space-md);
}

.leyenda-lugar-card__actions {
    display: flex;
    gap: var(--space-sm);
}

/* Botones de leyenda */
.leyenda-btn {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.leyenda-btn--primary {
    background: var(--ficha-brown-dark);
    color: #fff;
    border: 1px solid var(--ficha-brown-dark);
}

.leyenda-btn--primary:hover {
    background: var(--ficha-brown-medium);
    border-color: var(--ficha-brown-medium);
}

.leyenda-btn--secondary {
    background: transparent;
    color: var(--ficha-brown-dark);
    border: 1px solid var(--ficha-border);
}

.leyenda-btn--secondary:hover {
    background: var(--ficha-bg);
}

/* Sección inferior: Criaturas + Fuentes */
.leyenda-bottom-section {
    background: var(--ficha-paper);
    padding: var(--space-xl) 0;
    border-top: 1px solid var(--ficha-border);
}

.leyenda-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: start;
}

/* Criaturas relacionadas */
.leyenda-criaturas-grid {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.leyenda-criatura-card {
    text-align: center;
    width: 120px;
}

.leyenda-criatura-card__image {
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.leyenda-criatura-card__image img {
    width: 120px;
    height: 150px;
    object-fit: cover;
    display: block;
}

.leyenda-criatura-card__title {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ficha-brown-dark);
    margin: 0;
}

/* Fuentes y documentación */
.leyenda-fuentes-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.leyenda-fuentes-list li {
    position: relative;
    padding-left: var(--space-md);
    margin-bottom: var(--space-sm);
    font-size: 0.9rem;
    color: var(--ficha-text);
    line-height: 1.6;
}

.leyenda-fuentes-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--ficha-brown-medium);
    font-weight: bold;
}

.leyenda-fuentes-list em {
    font-style: italic;
}

/* Responsive para leyendas */
@media (max-width: 900px) {
    .leyenda-layout-top {
        grid-template-columns: 1fr;
    }

    .leyenda-image-main {
        max-height: none;
    }

    .leyenda-ficha-rapida {
        max-height: none;
        overflow-y: visible;
    }

    .leyenda-content-grid {
        grid-template-columns: 1fr;
    }

    .leyenda-texto-principal {
        padding-right: 0;
    }

    .leyenda-sidebar {
        order: -1;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .leyenda-sidebar-box {
        flex: 1 1 280px;
    }

    .leyenda-lugares-grid {
        grid-template-columns: 1fr;
    }

    .ficha-lugares-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 600px) {
    .leyenda-header-title {
        letter-spacing: 0.15em;
    }

    .leyenda-criaturas-grid {
        flex-wrap: wrap;
    }

    .ficha-header--leyenda .ficha-header__title {
        font-size: 1.5rem;
    }
}

/* =====================================================
   TARJETAS EN FILA DE 1 (Leyendas y Criaturas asociadas)
   ===================================================== */
.leyenda-asociadas-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Tarjeta en modo fila (horizontal) */
.tradition-card--row {
    display: flex;
    flex-direction: row;
    height: 150px;
}

.tradition-card--row .tradition-card__image {
    flex: 0 0 200px;
    min-height: 150px;
    max-height: 150px;
}

.tradition-card--row .tradition-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tradition-card--row .tradition-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-md);
}

.tradition-card--row .tradition-card__title {
    font-size: 1rem;
    margin-bottom: var(--space-xs);
}

.tradition-card--row .tradition-card__description {
    font-size: 0.85rem;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Link wrapper para tarjetas */
.tradition-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.tradition-card-link:hover .tradition-card {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Responsive para tarjetas en fila */
@media (max-width: 600px) {
    .tradition-card--row {
        flex-direction: column;
        height: auto;
    }

    .tradition-card--row .tradition-card__image {
        flex: 0 0 150px;
        max-height: 150px;
    }
}