/* ============================================================
   cuentos.css - Estilos específicos para la página del cuento
   SOLO se carga en páginas de cuento (no en index.php)
   ============================================================ */

/* ---- CONTENEDOR PRINCIPAL DEL CUENTO ---- */
article.cuento {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-lg) 0;
}

/* ============================================================
   PORTADA DEL CUENTO (cover con overlay)
   ============================================================ */
.cover {
    position: relative;
    width: 100%;
    height: 500px;
    max-height: 500px;
    overflow: hidden;
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    box-shadow: 0 4px 20px var(--shadow-color);
    background: var(--bg-content);
}

.cover img.cover-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}

.cover:hover img.cover-portrait {
    transform: scale(1.03);
}

/* Overlay oscuro para mejorar legibilidad */
.cover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: linear-gradient(
        to bottom,
        transparent 30%,
        var(--bg-overlay) 100%
    );
    pointer-events: none;
}

/* Título sobreimpreso en la portada */
.cover h1 {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-light);
    font-size: 3.5rem;
    font-weight: 700;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    z-index: 2;
    text-align: center;
    width: 90%;
    margin: 0;
    letter-spacing: 2px;
    line-height: 1.2;
}

.cover .cover-subtitle {
    position: absolute;
    bottom: 45px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-light);
    font-size: 1.4rem;
    font-weight: 300;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    z-index: 2;
    text-align: center;
    width: 90%;
    letter-spacing: 4px;
    opacity: 0.9;
}

.cover .cover-scroll {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-light);
    font-size: 0.9rem;
    font-weight: 300;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    z-index: 2;
    opacity: 0.7;
    animation: bounceScroll 2s ease-in-out infinite;
    letter-spacing: 2px;
}

@keyframes bounceScroll {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(6px); }
}

/* Responsive de la portada */
@media (max-width: 768px) {
    .cover {
        height: 350px;
        max-height: 350px;
    }
    .cover h1 {
        font-size: 2.2rem;
        bottom: 60px;
    }
    .cover .cover-subtitle {
        font-size: 1rem;
        bottom: 35px;
        letter-spacing: 2px;
    }
    .cover .cover-scroll {
        font-size: 0.8rem;
        bottom: 10px;
    }
}

@media (max-width: 480px) {
    .cover {
        height: 280px;
        max-height: 280px;
    }
    .cover h1 {
        font-size: 1.6rem;
        bottom: 50px;
    }
    .cover .cover-subtitle {
        font-size: 0.85rem;
        bottom: 30px;
        letter-spacing: 1px;
    }
}

/* ============================================================
   IMÁGENES DENTRO DEL CUENTO
   ============================================================ */

/* Imagen intro (encabezado del cuento sin overlay) */
article.cuento img.intro {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    box-shadow: 0 4px 12px var(--shadow-color);
}

/* Imagen alineada a la izquierda con texto rodeándola */
article.cuento img.cuadl {
    float: left;
    margin: 0 var(--spacing-md) var(--spacing-sm) 0;
    max-width: 250px;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 8px var(--shadow-color);
}

/* ============================================================
   CAPÍTULOS DEL CUENTO
   ============================================================ */

.capitulo  {
    margin: var(--spacing-lg) 0 var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--spacing-sm);
}

.capitulo  h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0;
    padding-left: 1rem;
    border-left: 2px solid  var(--border-color);
}

.capitulo  h3 small {
    display: block;
    font-size: 1rem;
    font-weight: 300;
    padding-left: 1rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.capitulo-contenido {
    line-height: 1.8;
    font-size: 1.05rem;
}

.capitulo-contenido p:last-child {
    margin-bottom: 0;
}

/* Limpiar floats de las imágenes */
.capitulo-contenido::after {
    content: "";
    display: table;
    clear: both;
}

/* ============================================================
   FOOTER DEL CUENTO
   ============================================================ */
.cuento-footer {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 2px solid var(--border-color);
    color: var(--text-muted);
    font-style: italic;
}

.cuento-footer p {
    margin-bottom: var(--spacing-xs);
}

/* ============================================================
   IMPRESIÓN (sobrescritura)
   ============================================================ */
@media print {
    .cover .cover-scroll {
        display: none !important;
    }
    .cover {
        height: auto !important;
        max-height: none !important;
    }
    .cover::after {
        display: none !important;
    }
}