/* style.css (en la raíz del proyecto) */

/*
====================================
1. ESTILOS GLOBALES DE MAQUETACIÓN
====================================
*/
@import url("../recursos-global/css-global/maquetacion.css"); 

/*
====================================
2. VARIABLES Y ESTILOS ESPECÍFICOS DE LA PÁGINA DE INICIO
====================================
*/
:root {
    /* Variables de color y margen... */
    --color-fondo-web: #b0e0e6; 
    --color-fondo-a: rgba(135, 206, 235, 0.3); 
    --color-fondo-b: rgba(255, 165, 0, 0.3);  
    --margen-borde: 50px;
}

/* ¡NUEVO! Imágenes de fondo para las hojas A y B */
.hoja-a {
    background-image: url('recursos/fondoA.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    justify-content: flex-start; 
    align-items: center;
}

.hoja-b {
    background-image: url('recursos/fondoB.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* Estilos de contenido... */
h2 { 
    margin-top: 0; 
    /* El font-size general de h2 es muy grande, quizás quieras reducirlo: */
    /* font-size: 2em; */ 
}

/* Regla general de Párrafo (Define el look de los párrafos normales) */
p { 
    font-size: 0.9em; 
    line-height: 1.4;
    max-width: 85%; 
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

/*
====================================
BLOQUE DE ORDENACIÓN 30/70 (HOJA A)
====================================
*/

.ordenA {
    display: flex; 
    width: 100%;
    height: 100%; 
    align-items: center; 
}

.rotuloA {
    flex-basis: 30%; 
    flex-shrink: 0;
    box-sizing: border-box; 

    padding: 10px;
    
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
}

/* Estilos para el H1 "Cuentos" */
#h1a { 
    font-family: 'GermaniaOne', serif;
    font-size: 3.5em; 
    color: black; 
    margin: 0; 
    padding: 0;
    line-height: 0.8; 
    text-transform: uppercase; 
}

/* Estilos para el H2 "DE" */
.rotuloA h2 {
    font-family: 'Brant', serif; 
    font-size: 9em; 
    color: #da1e1e; 
    margin: 0; 
    margin-top: 18px;
    margin-bottom: -25px;
    padding: 0;
    line-height: 0.8; 
    text-transform: uppercase; 
}

/* Estilos para el H1 "arcillA" */
#h1b { 
    font-family: 'GermaniaOne', serif; 
    font-size: 3.5em; 
    color: black; 
    margin: 0; 
    padding: 0;
    line-height: 0.8; 
    text-transform: uppercase; 
}

.textoA {
    flex-basis: 70%;
    flex-shrink: 0;
    box-sizing: border-box; 
    text-align: center;
    
    /* Ajuste de padding: top 10px | right 50px | bottom 10px | left 0px */
    padding: 10px 50px 10px 0px;
}


/*
====================================
ESTILO DE TEXTO Y OTROS
====================================
*/

#cuento01 {
    font-family: "ZT-OtezItalic", serif !important; 
    font-style: italic;
    font-size: 1.1em; 
    color: #991111;
}

.espacio {
    height: 5%;
}

/* 5. Estilo de la Ilustración (CORREGIDO PARA CONTENER) */
.tipo-ilustracion {
    max-width: 100%; 
    max-height: 90%; 
    object-fit: contain; 
    width: auto; 
    height: auto;

    margin: auto;
    display: block;
}

#tituloCuentos {
    font-family: ZT-OtezNormal;
    color:#700e0e;
    font-size: 89px;
    margin: 0;
    padding: 0;
}


/*
====================================
ESTILOS ESPECÍFICOS PARA HOJA B
====================================
*/

/* 1. Contenedor principal de la hoja B (Apilado y Centrado) */
.contenido-b {
    display: flex; 
    flex-direction: column; /* APILADO: Apila los elementos verticalmente */
    justify-content: flex-start; /* ALINEACIÓN: Alinea el contenido hacia arriba */
    align-items: center; /* CENTRADO HORIZONTAL: Centra los elementos apilados */
    width: 100%; 
    height: 100%; 
    padding-top: 20px; 
    box-sizing: border-box;
}

/* 2. Centrado y margen de los hijos (usando la propiedad 'auto') */
.contenido-b > * {
    margin-left: auto;
    margin-right: auto;
    width: 80%; 
    max-width: 400px; 
}

/* 3. Ajuste de Espaciado Vertical */

/* Título */
#tituloCuentos {
    color: rgb(224, 212, 35); 
    text-shadow: 5px 5px 0 black;
    margin: 0;
    padding: 0;
    margin-bottom: -10px; /* Controla el espacio con la imagen */
    width: auto; 
}

/* Imagen */
#dibujitoB {
    max-height: 150px; /* Tamaño que quieres para la imagen */
    padding: 0;
    margin: 0;
    margin-top: 0; /* Aseguramos que no hay margen superior extra */
    margin-bottom: 1.5em; /* Espacio entre la imagen y el párrafo */
}

/* Párrafo */
.hoja-b p {
    font-family: ZT-OtezItalic;
    font-size: 15px;
    color: rgb(228, 228, 24);
    text-align: center; 
    margin-top: 0; 
    margin-bottom: 1em; /* Espacio entre el párrafo y los botones */
    max-width: 80%; 
}

/* Contenedor de Botones */
.contenedor-botones {
    display: flex;
    flex-direction: column;
    gap: 15px; 
    margin-top: 0; 
    margin-bottom: 1em; 
    width: 80%; 
    max-width: 300px;
    align-items: center; 
}

/*
====================================
ESTILOS ESPECÍFICOS PARA BOTONES DE NAVEGACIÓN
====================================
*/

.boton-navegacion {
    /* 1. AUMENTAR EL TAMAÑO DE LA FUENTE (hace el botón más grande) */
    font-size: 1.5em; 
    
    /* 2. QUITAR EL FONDO Y BORDE (usamos !important para anular maquetacion.css) */
    background-color: transparent !important; 
    border: none !important; 
    
    /* 3. QUITAR LA SOMBRA */
    box-shadow: none !important; 
    
    /* 4. AÑADIR ESPACIADO INTERNO (PADDING) PARA DAR FORMA */
    padding: 15px 10px; 
    
    /* 5. COLOR DE TEXTO */
    color: #700e0e;
    font-weight: bold;
}

/* 6. Ajuste para el HOVER (Anulamos el efecto agresivo y ponemos un subrayado) */
.boton-navegacion:hover {
    transform: scale(1.0); /* Anulamos el efecto de escala si viene de tipo-navegacion:hover */
    background-color: transparent !important;
    box-shadow: none !important;
    text-decoration: underline; /* Efecto hover sutil */
    cursor: pointer;
}