/* /atlas/style.css */

/*
====================================
1. ESTILOS GLOBALES DE MAQUETACIÓN
====================================
*/
/* RUTA CRÍTICA: Subimos un nivel (../) para encontrar recursos-global */
@import url("../recursos-global/css-global/maquetacion.css"); 

/*
====================================
2. VARIABLES Y ESTILOS ESPECÍFICOS DE ATLAS
====================================
*/
: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 específicos para el Atlas */
h2 {
    color: rgb(224, 212, 35); 
    text-align: center;
    text-shadow: 5px 5px 0 black;
    margin-top: 70px; 
    font-size: 60px;
}


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