/* 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: none;
}

.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 {
    color: rgb(224, 212, 35); 
    text-shadow: 5px 5px 0 black;
    margin-top: 70px; 
    margin-left: 20px; 
    font-size: 100px;
}

p { font-size: 0.9em; }