/* CSS específico para la página del libro - Integrado con el sistema de diseño TACTIIKA VERITAS */

/* Variables CSS basadas en el sistema de colores del sitio web */
:root {
    /* Colores del sistema wsw-* del sitio principal */
    --wsw-17: #000;             /* Títulos principales - blanco */
    --wsw-33: #f4d03f;             /* Marca y destacados - dorado */
    --wsw-43: #e8c547;             /* Texto especial - dorado claro */
    --wsw-27: #d4af37;             /* Títulos especiales - dorado oscuro */
    --wsw-47: #c9a96e;             /* Texto de énfasis - dorado apagado */
    --wsw-23: #ffd700;             /* Color de acento adicional */
    
    /* Colores base del sitio */
    --color-text: #333333;
    --color-text-light: #666666;
    --color-background: #000;
    --color-overlay-dark: rgba(0, 0, 0, 0.6);
    --color-overlay-swampy-strong: rgba(0, 0, 0, 0.7);
    
    /* Espaciado consistente con el sitio */
    --section-padding: 60px 0;
    --container-max-width: 1200px;
    --container-padding: 0 20px;
    
    /* Tipografía del sitio */
    --font-family: 'Raleway', sans-serif;
    --font-size-hero: 2.5rem;
    --font-size-subtitle: 1.4rem;
    --font-size-section: 1.8rem;
    --font-size-text: 1rem;
    --line-height-base: 1.6;
}

/* Reset y base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-background);
}

/* Hero section con el estilo del sitio */
.Libro-Hero-1 {
    background: linear-gradient(135deg, var(--color-overlay-swampy-strong), var(--color-overlay-dark));
    color: var(--wsw-17);
    text-align: center;
    padding: var(--section-padding);
    padding-top: 100px;
    padding-bottom: 80px;
}

.Libro-Titulo-1 {
    font-size: var(--font-size-hero);
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    color: var(--wsw-17);
}

.Libro-Subtitulo-1 {
    font-size: var(--font-size-subtitle);
    opacity: 0.9;
    max-width: 800px;
    margin: 0 auto;
    line-height: var(--line-height-base);
    color: var(--wsw-17);
}

.Libro-Seccion-1 {
    background-color: var(--color-background);
    padding: var(--section-padding);
}

.Libro-Seccion-2 {
    background-color: #000;
    padding: var(--section-padding);
}

.Libro-Container-1 {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--container-padding);
}

.Libro-Showcase-1 {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 60px;
}

.Libro-ImageContainer-1 {
    text-align: center;
}

.Libro-Image-1 {
    width: 100%;
    max-width: 350px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.Libro-Image-1:hover {
    transform: scale(1.05);
}

.Libro-Info-1 {
    text-align: left;
}

.Libro-TituloLibro-1 {
    font-size: var(--font-size-section);
    color: var(--color-text);
    font-weight: bold;
    margin-bottom: 15px;
    line-height: 1.2;
}

.Libro-Autor-1 {
    font-size: 1.3rem;
    color: var(--wsw-33);
    font-weight: 600;
    margin-bottom: 30px;
}

.Libro-Descripcion-1 {
    font-size: 1.2rem;
    color: var(--color-text);
    line-height: 1.7;
    margin-bottom: 30px;
}

.Libro-Precio-1 {
    font-size: 2rem;
    color: var(--wsw-27);
    font-weight: bold;
    margin-bottom: 30px;
}

.Libro-BotonCompra-1 {
    display: inline-block;
    background-color: #d32f2f;
    color: #000;
    padding: 18px 45px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.2rem;
    font-weight: bold;
    transition: all 0.3s ease;
    margin-right: 20px;
    margin-bottom: 10px;
}

.Libro-BotonCompra-1:hover {
    background-color: #b71c1c;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.Libro-BotonSecundario-1 {
    display: inline-block;
    background-color: transparent;
    color: #d32f2f;
    padding: 18px 45px;
    text-decoration: none;
    border: 2px solid #d32f2f;
    border-radius: 5px;
    font-size: 1.2rem;
    font-weight: bold;
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.Libro-BotonSecundario-1:hover {
    background-color: #d32f2f;
    color: #000;
}

.Libro-TituloSeccion-1 {
    font-size: var(--font-size-section);
    color: var(--color-text);
    text-align: center;
    margin-bottom: 50px;
    font-weight: bold;
}

.Libro-Grid-1 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

.Libro-Card-1 {
    background-color: var(--color-background);
    padding: 40px 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    border: 1px solid #f0f0f0;
}

.Libro-Card-1:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.Libro-CardIcono-1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    display: block;
    color: var(--wsw-33);
}

.Libro-CardTitulo-1 {
    font-size: 1.5rem;
    color: var(--color-text);
    font-weight: bold;
    margin-bottom: 15px;
}

.Libro-CardTexto-1 {
    font-size: 1.1rem;
    color: var(--color-text-light);
    line-height: var(--line-height-base);
}

.Libro-Testimonios-1 {
    background: linear-gradient(135deg, #686868 0%, #000000 100%);
    padding: var(--section-padding);
}

.Libro-Testimonio-1 {
    background-color: var(--color-background);
    padding: 40px;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    border: 1px solid #f0f0f0;
}

.Libro-TestimonioTexto-1 {
    font-size: 1.2rem;
    color: var(--color-text);
    font-style: italic;
    line-height: var(--line-height-base);
    margin-bottom: 20px;
}

.Libro-TestimonioAutor-1 {
    font-size: 1.1rem;
    color: var(--wsw-33);
    font-weight: bold;
}

/* Responsive design */
@media (max-width: 768px) {
    :root {
        --font-size-hero: 2rem;
        --font-size-subtitle: 1.2rem;
        --font-size-section: 1.5rem;
        --section-padding: 40px 0;
    }
    
    .Libro-Hero-1 {
        padding-top: 80px;
        padding-bottom: 60px;
    }
    
    .Libro-Container-1 {
        padding: 0 15px;
    }
    
    .Libro-Showcase-1 {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .Libro-Info-1 {
        text-align: center;
    }
    
    .Libro-Grid-1 {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .Libro-BotonCompra-1,
    .Libro-BotonSecundario-1 {
        display: block;
        margin: 10px auto;
        text-align: center;
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-hero: 1.8rem;
        --font-size-subtitle: 1.1rem;
        --font-size-section: 1.3rem;
        --section-padding: 30px 0;
    }
    
    .Libro-Hero-1 {
        padding-top: 60px;
        padding-bottom: 40px;
    }
    
    .Libro-Container-1 {
        padding: 0 10px;
    }
    
    .Libro-Card-1 {
        padding: 30px 20px;
    }
    
    .Libro-Testimonio-1 {
        padding: 30px 20px;
    }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .Libro-BotonCompra-1,
    .Libro-BotonSecundario-1,
    .Libro-Image-1,
    .Libro-Card-1 {
        transition: none;
    }
    
    .Libro-BotonCompra-1:hover,
    .Libro-BotonSecundario-1:hover,
    .Libro-Image-1:hover,
    .Libro-Card-1:hover {
        transform: none;
    }
}

/* Focus states para accesibilidad */
.Libro-BotonCompra-1:focus,
.Libro-BotonSecundario-1:focus {
    outline: 2px solid var(--wsw-33);
    outline-offset: 2px;
}

/* Compatibilidad con header y footer existentes */
main {
    margin-top: 0;
}

.Libro-Hero-1 {
    margin-top: 0;
}

/* Print styles */
@media print {
    .Libro-Hero-1 {
        background: none;
        color: black;
    }
    
    .Libro-Titulo-1,
    .Libro-Subtitulo-1 {
        color: black !important;
        text-shadow: none;
    }
    
    .Libro-BotonCompra-1,
    .Libro-BotonSecundario-1 {
        border: 2px solid black;
        background: none;
        color: black;
    }
    
    /* Asegurar que todos los colores wsw-* se impriman en negro */
    .wsw-17, .wsw-33, .wsw-43, .wsw-27, .wsw-47, .wsw-23 {
        color: black !important;
    }
}