/* 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; 
    /* Los colores de hoja A y B ahora se usarán como overlay si lo deseas, 
       pero las imágenes de fondo las superpondrán si no son transparentes.
       Para esta prueba, podemos dejarlos o comentarlos.
    */
    --color-fondo-a: rgba(135, 206, 235, 0.3); /* Puedes dejarlo para un efecto de capa */
    --color-fondo-b: rgba(255, 165, 0, 0.3);  /* Puedes dejarlo para un efecto de capa */
    --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;
    /* background-color: var(--color-fondo-b);  <-- Si quieres un velo de color sobre la imagen */
}

.hoja-b {
    background-image: url('recursos/fondoB.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* background-color: var(--color-fondo-b);  <-- Si quieres un velo de color sobre la imagen */
}


/* Estilos de contenido... */
h2 {
    margin-top: 0; 
    font-size: 100px;
    color: rgb(224, 212, 35); 
    text-shadow: 5px 5px 0 black;
    margin-left: 20px; 
}
p { font-size: 0.9em; }

.espacio {
    height: 5%;
}

/* 5. Estilo de la Ilustración (CORREGIDO PARA CONTENER) */
.tipo-ilustracion {
    /* La imagen nunca será más ancha que su contenedor padre */
    max-width: 100%; 
    max-height: 90%; 
    /* Mantiene la proporción de la imagen */
    object-fit: contain; 
    /* Ajustamos el tamaño real (si es más pequeño que el max) */
    width: auto; 
    height: auto;

    margin: auto;
    display: block;
}