/* Archivo: style.css */
/* Reset básico para incluir bordes y padding en el tamaño del elemento */
*,
*:before,
*:after{
box-sizing: border-box;
}
/* Clase de ejemplo para posicionamiento fijo (puedes eliminarla si no la usas) */
.wrapper{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*
* Estilos para el efecto Flip 3D del botón
* Aplica estos estilos a los elementos con la clase .flip-css-link
*/
.flip-css-link {
display: block; /* Se comporta como un bloque, ocupando su propio espacio */
width: 200px; /* Ancho fijo del botón. Ajusta según necesites. */
height: 40px; /* Altura fija del botón. Ajusta según necesites. */
text-indent: -9999px; /* Oculta el texto real dentro del */
line-height: 40px; /* Ayuda a centrar verticalmente el texto de los pseudo-elementos */
font-size: 18px; /* Tamaño de fuente para el texto del botón */
font-family: sans-serif; /* Fuente del texto del botón */
text-decoration: none; /* Elimina el subrayado por defecto de los enlaces */
letter-spacing: 2px; /* Espacio entre letras */
text-align: center; /* Centra el texto horizontalmente */
position: relative; /* Necesario para posicionar los pseudo-elementos ::before y ::after */
transform-style: preserve-3d; /* Permite que los elementos hijos (pseudo-elementos) se posicionen en 3D */
transition: all .35s; /* Animación suave para todas las propiedades transformables */
cursor: pointer; /* Cambia el cursor al pasar por encima para indicar que es interactivo */
/* Estilos básicos para que se parezca a un botón */
border-radius: 0.5rem; /* Bordes redondeados */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}
/* Pseudo-elementos para las caras frontal y trasera del botón flip */
.flip-css-link:before,
.flip-css-link:after{
position: absolute; /* Posicionamiento absoluto dentro del enlace .flip-css-link */
width: 100%; /* Ocupa todo el ancho del enlace */
height: 100%; /* Ocupa toda la altura del enlace */
top: 0; /* Alineado en la parte superior */
left: 0; /* Alineado a la izquierda */
border: 2px solid #333; /* Borde */
text-indent: 0; /* Muestra el texto dentro de los pseudo-elementos (anula text-indent del padre) */
transition: all .35s; /* Animación suave para la transformación y otras propiedades */
/* Usamos flexbox para centrar el contenido (el texto) dentro de las caras */
display: flex;
justify-content: center; /* Centrado horizontal */
align-items: center; /* Centrado vertical */
backface-visibility: hidden; /* Oculta la cara trasera cuando está girada */
}
/* Estilos específicos para la cara frontal (::before) */
.flip-css-link:before{
color: #fff; /* Color de texto de la cara frontal */
background: #333; /* Fondo de la cara frontal */
transform-origin: left; /* El punto de pivote para la rotación es el borde izquierdo */
transform: translateX(0) rotateY(0deg); /* Posición inicial: visible, sin rotación */
content: attr(data-front-text); /* El contenido es el valor del atributo data-front-text del enlace */
}
/* Estilos específicos para la cara trasera (::after) */
.flip-css-link:after{
color: #333; /* Color de texto de la cara trasera */
background: #fff; /* Fondo de la cara trasera */
transform: translateX(-100%) rotateY(90deg); /* Posición inicial: fuera de vista a la izquierda, girada 90 grados */
transform-origin: right; /* El punto de pivote para la rotación es el borde derecho */
content: attr(data-back-text); /* El contenido es el valor del atributo data-back-text del enlace */
}
/* Estado al pasar el ratón por encima del enlace */
.flip-css-link:hover:before{
transform: translateX(100%) rotateY(90deg); /* La cara frontal se mueve fuera de vista a la derecha y gira 90 grados */
}
.flip-css-link:hover:after{
transform: translateX(0) rotateY(0deg); /* La cara trasera se mueve a su posición original y gira a 0 grados (visible) */
}
/* Estilos para el texto dentro de las caras si necesitas más control */
/* Nota: Tu HTML y JS actual no usan span dentro de los pseudo-elementos,
pero si lo hicieras, podrías usar estas reglas. */
/*
.flip-css-link:before span,
.flip-css-link:after span {
...
}
*/
/* --- Estilos para Modales --- */
/* Clase para ocultar elementos */
.ventana-hidden {
display: none !important; /* Usa !important para asegurar que se aplique */
}
/* Estilo general del modal (el contenedor principal que cubre toda la pantalla) */
.ventana-modal {
position: fixed; /* Fijo en la ventana de visualización */
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex; /* Usa flexbox para centrar el contenido */
justify-content: center; /* Centrado horizontal */
align-items: center; /* Centrado vertical */
z-index: 1000; /* Asegura que esté por encima de otros contenidos */
/* Añadimos un fondo por defecto si el overlay no está presente o por si acaso */
background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semi-transparente por defecto */
}
/* Capa de superposición semi-transparente (overlay) */
.ventana-modal-overlay {
position: absolute; /* Posicionado absolutamente dentro del modal */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro semi-transparente */
z-index: 1; /* Por debajo del contenido del modal */
}
/* Contenedor del contenido del modal (la caja visible del modal) */
.ventana-modal-container {
background-color: #fff; /* Fondo blanco del modal */
padding: 20px; /* Espaciado interior */
border-radius: 8px; /* Bordes redondeados */
max-width: 80%; /* Ancho máximo del modal */
max-height: 90%; /* Altura máxima del modal */
overflow-y: auto; /* Agrega scroll vertical si el contenido es muy largo */
position: relative; /* Necesario para posicionar el botón de cerrar si está absoluto */
z-index: 1001; /* Por encima del overlay */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
}
/* Estilo para el encabezado del modal */
.ventana-modal-header {
display: flex; /* Usa flexbox para alinear título y botón de cerrar */
justify-content: space-between; /* Espacio entre título y botón */
align-items: center; /* Alineación vertical centrada */
border-bottom: 1px solid #eee; /* Línea separadora */
padding-bottom: 10px; /* Espacio debajo de la línea */
margin-bottom: 15px; /* Espacio entre el encabezado y el cuerpo */
}
/* Estilo para el botón de cerrar */
.ventana-close-modal {
background: none; /* Sin fondo */
border: none; /* Sin borde */
font-size: 1.5em; /* Tamaño del icono/texto de cerrar */
cursor: pointer; /* Cambia el cursor al pasar por encima */
padding: 0; /* Sin padding */
margin-left: 20px; /* Espacio a la izquierda del botón */
color: #aaa; /* Color gris claro */
flex-shrink: 0; /* Evita que el botón se encoja */
}
.ventana-close-modal:hover {
color: #777; /* Color gris más oscuro al pasar el ratón */
}
/* Estilo para el cuerpo del modal (donde va el contenido principal) */
.ventana-modal-body {
/* Puedes añadir padding, max-height, etc. si es necesario */
}
/* Estilo para el pie de página del modal (opcional) */
.ventana-modal-footer {
border-top: 1px solid #eee; /* Línea separadora */
padding-top: 10px; /* Espacio encima de la línea */
margin-top: 15px; /* Espacio entre el cuerpo y el pie */
text-align: right; /* Alinea el contenido a la derecha */
}
/* Estilo para el contenido dentro del modal de texto */
#textModalContent {
/* Puedes añadir estilos específicos aquí si es necesario */
}
/* Estilo para las imágenes dentro del carrusel modal */
/* Asegúrate de que estas reglas apliquen a tus imágenes dentro del swiper-wrapper */
.ventana-modal-body img {
max-width: 100%; /* La imagen no excede el ancho de su contenedor */
max-height: 100%; /* La imagen no excede la altura de su contenedor */
display: block; /* Elimina el espacio extra debajo de las imágenes inline */
margin: auto; /* Centra la imagen horizontalmente */
}
/* Estilo para el texto (caption) dentro de los slides del carrusel */
.swiper-caption {
position: absolute; /* Posicionamiento absoluto dentro del slide (que es relative) */
bottom: 0; /* Posiciona el texto en la parte inferior del slide */
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semi-transparente */
color: white; /* Color del texto */
padding: 0.5rem; /* Espaciado interior */
text-align: center; /* Centra el texto */
font-size: 0.875rem; /* Tamaño de fuente (equivalente a text-sm en Tailwind) */
z-index: 10; /* Asegura que esté por encima de la imagen */
/* Asegura que el texto no se desborde */
overflow: hidden;
text-overflow: ellipsis; /* Añade puntos suspensivos si el texto es cortado */
white-space: nowrap; /* Evita saltos de línea */
}
/* Si usas Swiper, es posible que necesites estilos adicionales para sus elementos (paginación, navegación) */
/* Por ejemplo: */
/* .swiper-pagination { ... } */
/* .swiper-button-next, .swiper-button-prev { ... } */