con la clase "contenedorImagenACT" que contiene la imagen */
.contenedorImagenACT {
/* position: Especifica el tipo de método de posicionamiento utilizado para un elemento (static, relative, fixed, absolute or sticky)
Esta propiedad convierte un elemento en un "elemento posicionado".
cualquier elemento que tiene una position establecida a algo distinto de "static" (es decir, relative, absolute, fixed, o sticky)
se convierte en un "contenedor de posicionamiento" (o "contexto de posicionamiento") para sus descendientes absolute.
relative: El elemento se posiciona según el flujo normal del documento y se desplaza respecto a sí mismo según los valores de top, right, bottom y left.
El desplazamiento no afecta la posición de ningún otro elemento; por lo tanto, el espacio asignado al elemento en el diseño de página es el mismo que si la posición fuera static.
Se convierte en un "contenedor de posicionamiento" (o "contexto de posicionamiento") para sus descendientes absolute. */
position: relative; /* Al convertirse en "contenedor de posicionamiento", su posición sirve como "referencia" para cualquier "elemento posicionado" como absolute */
/* color: Establece el color del texto */
/* height: Establece la altura de un elemento */
height: 100%;
/* width: Establece la altura de un elemento */
width: 100%;
/* overflow: Establece el comportamiento deseado cuando el contenido no cabe en el cuadro de relleno del elemento (se desborda) en dirección horizontal y/o vertical
La propiedad puede tomar uno de los siguientes valores:
visible: Es el valor predeterminado. El desbordamiento no se recorta. El contenido se muestra fuera del cuadro del elemento.
hidden: El desbordamiento se recorta y el resto del contenido será invisible.
scroll: Se recorta el desbordamiento y se agrega una barra de desplazamiento para ver el resto del contenido.
auto: Similar a scroll, pero agrega barras de desplazamiento solo cuando es necesario*/
overflow: hidden; /* En resumen, el contenido que se desborde del elemento no se mostrará */
/* display: Especifica el tipo de caja de un elemento. Es decir, el tipo de visualización (block, inline, inline-block, flex, grid, etcétera).
block: El elemento se muestra como un bloque, ocupando todo el ancho disponible y comenzando en una nueva línea.
inline: El elemento se muestra en línea con otros elementos, sin iniciar una nueva línea.
inline-block: Combina características de los elementos inline y block, permitiendo establecer dimensiones y márgenes, pero sin iniciar una nueva línea.
flex: Especifica que el elemento es un contenedor flexible, lo que significa que sus hijos se organizarán en una fila o columna flexible.
Etcétera. */
display: flex;
/* align-items: Especifica la alineación predeterminada para los elementos dentro de un contenedor de cuadrícula o flexbox.
La propiedad puede tomar uno de los siguientes valores:
normal: Los elementos se alinean según su alineación normal.
stretch: Los elementos se estiran para llenar el espacio disponible en el eje transversal del contenedor. */
align-items: stretch;
}
/* Estilo para el elemento
con la clase "imagenACT" dentro del elemento
con la clase "contenedorImagenACT" */
.contenedorImagenACT .imagenACT {
height: 100%;
width: 100%;
object-fit: cover; /* llena, centra y recorta la imagen */
display: block;
}
/* Estilo para el elemento con el id="botonFlotante_AAQ_II" que ejecuta un modal */
#botonFlotante_AAQ_II {
/* position: Especifica el tipo de método de posicionamiento utilizado para un elemento (static, relative, fixed, absolute or sticky)
Esta propiedad convierte un elemento en un "elemento posicionado".
fixed: posiciona con respecto a la ventana gráfica, lo que significa que permanece en la misma posición incluso al desplazarse por la página. */
position: fixed; /* En resumen, hace que el elemento esté siempre visible */
/* bottom: Afecta la posición vertical de un "elemento posicionado". La posición parte desde la parte inferior del contenedor. No afecta a los elementos no posicionados.*/
bottom: 5%; /* En resumen, desde la parte inferior de la pantalla, posiciona el elemento un 5% de alto */
/* right: Afecta la posición horizontal de un "elemento posicionado". La posición parte desde la derecha del contenedor. No afecta a los elementos no posicionados.*/
right: 5%; /* En resumen, desde la parte derecha de la pantalla, posiciona el elemento un 5% hacia la izquierda */
/* z-index: Especifica el orden de pila de un elemento. Indica el orden de un "elemento posicionado" y sus descendientes. */
z-index: 1000; /* En resumen, este elemento cubrirá a los elementos con un valor z-index menor a 1000 */
}
/* Estilo para el elemento con el id="botonFlotante_AAQ_II" que ejecuta un modal con la pseudoclase hover */
/* hover: Implica la interacción del usuario con un elemento mediante un dispositivo señalador, pero no lo activa necesariamente.
Generalmente se activa cuando el usuario pasa el cursor del ratón sobre un elemento con esta pseudoclase. */
#botonFlotante_AAQ_II:hover {
/* background-color: Establece el color de fondo de un elemento*/
background-color: #0d6efd !important; /* Color azul para el elemento cuando se pasa el cursor por encima */
/* color: Establece el color del texto */
color: white !important; /* Color blanco del texto del elemento cuando se pasa el cursor por encima */
/* border-color: Establece el color del borde de un elemento */
border-color: red !important; /* Establece el color del borde del elemento en rojo cuando se pasa el cursor por encima */
}
p {
left: 5%;
right: 5%;
text-align: justify;
}
/* EXPERIMENTOS A REALIZAR CUANDO NO TENGA NADA QUE HACER */
/* EXPERIMENTO */
.imagen_ilustrativa_de_Flickr {
/* Altura fija para la sección, que dictará la altura visible de la imagen */
height: 1000px; /* ¡Esta es tu altura deseada para la imagen y el contenedor! */
width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
/* Configuración de la imagen de fondo */
background-image: url('/../images/Izta_y_Popo_Lucy_Nieto.jpg'); /* Reemplaza con la ruta real de tu imagen */
background-size: cover; /* ¡CLAVE! Escala la imagen para cubrir todo el contenedor */
background-position: center center; /* ¡CLAVE! Mantiene el centro de la imagen visible */
background-repeat: no-repeat; /* Evita que la imagen se repita si es más pequeña que el contenedor */
/* Para centrar y estilizar el contenido superpuesto (el título) */
display: flex; /* Usamos Flexbox para centrar el contenido */
flex-direction: column; /* Coloca los ítems en columna (título arriba del subtítulo) */
justify-content: center; /* Centra el contenido verticalmente */
align-items: center; /* Centra el contenido horizontalmente */
/* Estilos para el texto y asegurar visibilidad */
color: white; /* Color del texto para contrastar con el fondo */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para que el texto resalte */
overflow: hidden; /* IMPORTANTE: Oculta cualquier parte de la imagen que se desborde */
/* Opcional: ajustar el tamaño del título */
/* Asegura que el h1 tenga un tamaño fijo o responsivo controlado, no afectado por el "recorte" de la imagen */
font-size: 4em; /* Un tamaño grande para el título */
text-align: center;
}
.titulo_de_pagina {
/* Puedes darle un tamaño de fuente fijo si quieres que SIEMPRE sea igual,
pero para responsividad se usa un tamaño adaptable (ej. con vw) o con media queries */
font-size: 4em; /* O un tamaño fijo como 60px si lo prefieres para que no se mueva */
margin: 0; /* Elimina márgenes por defecto */
padding: 0;
}
.subtitulo_de_imagen {
font-size: 1.5em;
margin-top: 10px;
}
/* Opcional: Media Query para ajustar el tamaño del título en pantallas muy pequeñas */
@media (max-width: 768px) {
.imagen_ilustrativa_de_Flickr {
height: 600px; /* Quizás reducir la altura de la sección en pantallas pequeñas */
}
.titulo_de_pagina {
font-size: 2.5em; /* Reducir el tamaño del título en móviles para que quepa */
}
.subtitulo_de_image {
font-size: 1em;
}
}