.imagen-sepia-test {
	filter: sepia(100%);
/* Aplica un efecto sepia del 100% */
	transition: filter .5s ease-in-out;
/* Hace que el efecto sea suave */
}

.imagen-sepia-test:hover {
	filter: none;
/* Cuando pases el ratón por encima, el efecto desaparece */
}

.zoom-sutil {
	transition: transform .3s ease-in-out;
/* Transición suave para el zoom */
	overflow: hidden;
/* Importante para que el zoom no desborde el contenedor si la imagen es el contenedor */
	display: block;
/* Asegura que se comporte como un bloque */
}

.zoom-sutil:hover {
	transform: scale(1.05);
/* Escala la imagen un 5% más grande */
}

.marco-creativo {
	border: 4px solid transparent;
/* Borde transparente por defecto */
	transition: border-color .3s ease-in-out;
/* Transición suave para el color del borde */
}

.marco-creativo:hover {
	border-color: #FF5733;
/* Color llamativo para el borde al pasar el ratón */
}

.sombra-sutil {
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
/* Sombra sutil */
	transition: box-shadow .3s ease-in-out;
/* Transición suave */
}

.sombra-sutil:hover {
	box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
/* Sombra más pronunciada al pasar el ratón */
}

.reflejo-imagen {
/* Para otros navegadores */
}

/* Contenedor principal - define la perspectiva 3D */
.flip-card-container {
	background-color: transparent;
	width: 600px;
/* Ancho de tu tarjeta */
	height: 450px;
/* Alto de tu tarjeta */
	perspective: 1000px;
/* Necesario para el efecto 3D */
	margin: 20px;
/* Para separar las tarjetas si pones varias */
	display: inline-block;
/* Para que se pongan una al lado de la otra */
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
/* Sombra sutil para el efecto de "carta" */
	border-radius: 8px;
/* Bordes ligeramente redondeados */
	overflow: hidden;
/* Asegura que nada se salga del contenedor */
}

/* El "flipper" es el que realmente gira */
.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform .8s;
/* Velocidad de la animación del giro */
	transform-style: preserve-3d;
/* Hace que los elementos hijos se mantengan en el espacio 3D */
}

/* El giro horizontal al pasar el ratón */
.flip-card-container:hover .flip-card-inner {
	transform: rotateY(180deg);
}

/* Posiciona el frente y la espalda */
.flip-card-front, .flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
/* Esconde la cara trasera por defecto */
	backface-visibility: hidden;
/* Esconde la cara trasera por defecto */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 15px;
	box-sizing: border-box;
/* Para que el padding no afecte el tamaño total */
}

/* Estilo de la parte frontal */
.flip-card-front {
	background-color: #bbb;
/* Color de fondo si la imagen no cubre todo */
	color: black;
}

/* Estilo de la parte trasera */
.flip-card-back {
	background-color: #333;
/* Fondo de la parte trasera */
	color: white;
/* Color del texto en la parte trasera */
	transform: rotateY(180deg);
/* La parte trasera empieza girada */
	font-family: Arial, sans-serif;
/* Fuente para el texto */
	font-size: 18px;
	line-height: 1.5;
}

.flip-card-back h3 {
	margin-top: 0;
	font-size: 1.5em;
	color: #FFD700;
/* Color llamativo para el título */
}

.flip-card-back p {
	margin-bottom: 10px;
}

/* Estilo opcional para el botón */
.button-ver-mas {
	background-color: #dde6f0;
/* Color del botón */
	color: white;
	padding: 8px 15px;
	border-radius: 5px;
	text-decoration: none;
	margin-top: 10px;
	transition: background-color .3s;
}

.button-ver-mas:hover {
	background-color: #dde6f0;
}

.imagen-contenedor {
	width: 100%;
/* O el ancho que desees para tu imagen */
	height: 600px;
/* O la altura que desees para el área visible de la imagen */
	overflow: hidden;
/* Esto es CRUCIAL: oculta todo lo que esté fuera de este div */
	position: relative;
/* Necesario para posicionar la imagen hija */
	cursor: pointer;
/* Indica que es interactivo */
}

/* La imagen dentro del contenedor */
.imagen-contenedor img {
	width: 100%;
/* Asegura que la imagen ocupe todo el ancho del contenedor */
	height: auto;
/* Mantiene la proporción de la imagen */
	display: block;
/* Elimina espacio extra debajo de la imagen */
	position: absolute;
/* Permite moverla libremente dentro de su contenedor padre (.imagen-contenedor) */
	bottom: -100%;
/* Posición inicial: 100% por debajo del final del contenedor (totalmente fuera de la vista) */
	transition: bottom .5s ease-out;
/* Animación: la imagen se mueve en 0.5 segundos con un efecto suave */
/* Puedes ajustar el 'bottom: -100%' para que la imagen se vea un poco al principio. Por ejemplo, -50% */
}

/* Estado al pasar el cursor sobre el contenedor */
.imagen-contenedor:hover img {
	bottom: 0;
/* Posición final: la imagen se mueve hasta la parte inferior del contenedor (totalmente visible) */
}

/* Estilo para el contenedor de cada artista */
.artista-container {
	position: relative;
	margin-bottom: 20px;
}

/* Oculta la imagen por defecto */
.foto-artista {
	display: none;
	position: absolute;
	left: 100%;
	margin-left: 20px;
	z-index: 10;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	transition: opacity .3s ease-in-out;
}

/* Muestra la imagen cuando el cursor está sobre el contenedor */
.artista-container:hover .foto-artista {
	display: block;
	opacity: 1;
}

/* Opcional: Estilo para el nombre del artista */
.nombre-artista {
	display: block;
	font-weight: bold;
}

/* Contenedor del enlace */
.artitic-tooltip {
	position: relative;
	display: inline-block;
	cursor: help;
	border-bottom: 1px dotted #333;
/* Estilo para la palabra con enlace */
	color: #b01c2e;
/* Color corporativo de tu revista */
}

/* El Pop-up (oculto por defecto) */
.artitic-tooltip .tooltip-content {
	visibility: hidden;
	width: 250px;
	background-color: #ffffff;
	color: #333;
	text-align: center;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 10px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
/* Posicionamiento */
	position: absolute;
	z-index: 99;
	bottom: 125%;
/* Aparece arriba de la palabra */
	left: 50%;
	margin-left: -125px;
	opacity: 0;
	transition: opacity .3s;
}

/* Imagen dentro del pop-up */
.artitic-tooltip .tooltip-content img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	margin-bottom: 8px;
}

/* Mostrar al pasar el ratón */
.artitic-tooltip:hover .tooltip-content {
	visibility: visible;
	opacity: 1;
}

/* Ahora el código solo afectará a las columnas que tengan esa clase */
.revistas img {
	width: 100%;
	height: 350px;
/* Ajusta la altura a tu gusto */
	object-fit: cover;
	object-position: center;
}

html {
	scroll-behavior: smooth;
}

/* Centrar títulos de página y ampliar ancho */
.entry-title, .page-title {
	text-align: center !important;
	width: 100% !important;
	max-width: 1200px;
/* Aquí puedes ajustar el ancho a tu gusto */
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Contenedor principal */
.efecto-artitic {
	overflow: hidden;
	position: relative;
	transition: all .5s ease-in-out;
}

/* La imagen de fondo */
.efecto-artitic img {
	transition: all .6s ease-in-out !important;
	filter: sepia(0) brightness(1);
}

/* Efecto Sepia al pasar el cursor */
.efecto-artitic:hover img {
	filter: sepia(0.8) brightness(0.7);
	transform: scale(1.1);
/* Zoom elegante */
}

/* El texto que está dentro */
.efecto-artitic .wp-block-cover__inner-container,
.efecto-artitic p, 
.efecto-artitic h3 {
	transform: translateY(30px);
/* Empieza un poco abajo */
	opacity: 0;
/* Invisible al inicio */
	transition: all .4s ease-in-out;
}

/* El texto sube y aparece al hacer hover */
.efecto-artitic:hover .wp-block-cover__inner-container,
.efecto-artitic:hover p,
.efecto-artitic:hover h3 {
	transform: translateY(0);
/* Sube a su sitio */
	opacity: 1;
/* Se hace visible */
}
/* Estilo del botón de registro */
.boton-registro a {
    background-color: #87CEEB !important; /* Fondo negro */
    color: #ffffff !important; /* Texto blanco */
    border-radius: 10px; /* Bordes ligeramente redondeados */
    padding: 5px 18px !important; /* Espacio alrededor del texto */
    margin-top: 5px; /* Para que no pegue con el borde superior */
    transition: all 0.3s ease; /* Para que el cambio de color sea suave */
}

/* Efecto al pasar el ratón (Hover) */
.boton-registro a:hover {
    background-color: #0B0340 !important; /* Cambia a gris oscuro */
    color: #ffffff !important;
    text-decoration: none !important;
}
/* Este código busca CUALQUIER enlace dentro de la zona del Header */
header a, .header a, [class*="header"] a {
    transition: all 0.3s ease-in-out !important;
}
/* Estilo base para los enlaces de tu Header personalizado */
header a, .header a, [class*="header"] a {
    padding: 8px 15px !important; /* Espacio para que el fondo respire */
    border-radius: 6px; /* Bordes suaves, muy modernos */
    transition: all 0.4s ease-in-out !important;
    display: inline-block; /* Para que el fondo rodee bien al texto */
    text-decoration: none !important;
    color: #333333; /* Color de texto normal */
}
/* Estilo base para los enlaces de tu Header personalizado */
header a, .header a, [class*="header"] a {
    padding: 8px 15px !important; 
    border-radius: 6px; 
    transition: all 0.4s ease-in-out !important;
    display: inline-block; 
    text-decoration: none !important;
    color: #333333; /* Gris muy oscuro casi negro de base */
}

/* El efecto con contraste mejorado al pasar el cursor (Hover) */
header a:hover, .header a:hover, [class*="header"] a:hover {
    background-color: rgba(93, 173, 226, 0.15) !important; /* El fondo azul clarito que te gustó */
    color: #21618C !important; /* AZUL OSCURO: Contraste perfecto para que la letra destaque */
    transform: translateY(-2px); 
    font-weight: 600; /* Un toque de grosor extra para que la letra tenga más cuerpo */
}
/* 1. EL CONTENEDOR PRINCIPAL (LA CAJA ROJA) */
/* Reemplaza '.um-your-form-id' con '.um-login' o '.um-register' según el formulario, o deja '.um' para todos. */
.um {
    background-color: #E8513E !important; /* Rojo AVC del logo */
    border-radius: 40px !important; /* Bordes muy redondeados */
    padding: 60px 50px 40px 50px !important; /* Espaciado interno generoso */
    box-shadow: 0 15px 35px rgba(0,0,0,0.3), inset 0 2px 5px rgba(255,255,255,0.4) !important; /* Efecto 3D y brillo interno */
    border: none !important;
    position: relative;
    max-width: 1150px !important; /* Ancho máximo para que no se estire demasiado */
    margin: 40px auto !important; /* Centrado */
}

/* 2. EL ENCABEZADO (DENTRO DE LA CAJA ROJA, COMO EL LOGO) */
/* Asumimos que has puesto el logo o un shortcode en la descripción del formulario en UM */
.um-header {
    text-align: center;
    margin-bottom: 40px !important;
}

.um-header .um-desk {
    color: white !important; /* El texto en la descripción del form debe ser blanco */
    font-size: 12px !important;
    font-weight: 300 !important;
}

/* Puedes añadir tu logo en la descripción del formulario en UM y usar este estilo */
.um-header img {
    max-width: 250px;
    height: auto;
}

/* 3. LOS CAMPOS DE ENTRADA (ESTILO CAJA NEGRA REDONDEADA) */
.um-form input[type=text], 
.um-form input[type=password], 
.um-form input[type=email], 
.um-form textarea, 
.um-form .um-field-area .select2-selection {
    background-color: #0F0F13 !important; /* Fondo casi negro */
    border-radius: 30px !important; /* Bordes redondeados */
    border: 1px solid #333 !important; /* Borde sutil para separarlo del fondo */
    padding: 15px 25px !important; /* Espaciado interno para el texto */
    color: #4D76FF !important; /* Color azul AVC para el texto que escribe el usuario */
    font-size: 10px !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5) !important; /* Efecto de profundidad interna */
}

/* Estilo para el texto de sugerencia (placeholder) */
.um-form input::placeholder {
    color: rgba(255,255,255,0.7) !important; /* Blanco semi-transparente para el placeholder */
    font-weight: 300;
}

/* Estilo cuando el usuario hace clic en el campo */
.um-form input:focus {
    border-color: #4D76FF !important; /* El borde se vuelve azul AVC */
    box-shadow: 0 0 10px rgba(77,118,255,0.5), inset 0 2px 5px rgba(0,0,0,0.5) !important; /* Brillo azul */
}

/* 4. EL BOTÓN "REGISTRARSE" (ESTILO 3D ROJO/AZUL) */
.um-button {
    background-color: #E8513E !important; /* Rojo AVC */
    background-image: linear-gradient(to bottom, #E8513E, #CC3D2B) !important; /* Degradado 3D rojo */
    border-radius: 30px !important; /* Bordes redondeados */
    color: #112871 !important; /* Azul oscuro AVC para el texto del botón */
    text-transform: uppercase;
    font-weight: bold !important;
    font-size: 14px !important;
    letter-spacing: 1px;
    padding: 15px 30px !important;
    border: none !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3), inset 0 2px 2px rgba(255,255,255,0.3) !important; /* Efecto 3D y sombra */
    transition: all 0.3s ease !important;
    width: 100% !important; /* Botón a ancho completo */
    margin-top: 10px !important;
}

/* Estilo cuando pasas el ratón sobre el botón */
.um-button:hover {
    background-color: #4D76FF !important; /* Se vuelve azul AVC */
    background-image: linear-gradient(to bottom, #4D76FF, #3A63EC) !important; /* Degradado 3D azul */
    color: white !important; /* El texto se vuelve blanco */
    box-shadow: 0 8px 20px rgba(0,0,0,0.4), inset 0 2px 2px rgba(255,255,255,0.3) !important; /* Sombra más pronunciada */
    transform: translateY(-2px); /* Pequeño levantamiento */
}

/* 5. EL PIE DE PÁGINA (ESTILO DE LA REVISTA, FUERA DE LA CAJA) */
/* Esto requiere añadir un bloque de texto debajo del shortcode del formulario en tu página */
.artitic-form-footer {
    text-align: center;
    margin-top: 40px;
    color: #4D76FF; /* Azul AVC */
}
.artitic-form-footer h4 {
    font-family: 'Playfair Display', serif; /* O la fuente que uses en tu revista */
    font-size: 32px;
    font-weight: 600;
}
.artitic-form-footer p {
    font-size: 10px;
    opacity: 1.0;
}
}
.um-field {
    margin-bottom: 35px !important; /* Más espacio entre campos */
}
.um-col-alt {
    color: white !important; /* Texto de 'olvidé contraseña' o 'registrarse' en blanco */
}
/* --- AJUSTES PARA EL PERFIL DE ARTISTA --- */

/* 1. HACER LOS BOTONES "CAMBIAR FOTO" MÁS PEQUEÑOS Y ELEGANTES */
.um .um-btn, .um .um-btn-alt, .um .um-btn-default {
    padding: 10px 20px !important; /* Reduce el tamaño interno */
    font-size: 14px !important; /* Letra más pequeña y fina */
    border-radius: 4px !important; /* Esquinas menos redondeadas */
    max-width: 180px; /* Ancho máximo para que no se desparramen */
    margin: 10px auto !important; /* Centrados y con un poco de espacio */
    font-family: 'Times New Roman', Times, serif; /* Mantenemos tu tipografía */
    letter-spacing: 0.5px; /* Un poco de aire entre letras */
}

/* EFECTO AL PASAR EL RATÓN POR ENCIMA (Hover) */
.um .um-btn:hover, .um .um-btn-alt:hover {
    opacity: 0.8;
}

/* 2. HACER LAS IMÁGENES DE LAS OBRAS MÁS GRANDES */
/* Esto afecta a la imagen de portada y a las imágenes que suben */
.um-profile-photo img, .um-cover-img img, .um-field-image img {
    width: 100% !important; /* Que ocupen todo el ancho de su contenedor */
    max-width: 100% !important; 
    height: auto !important; /* Que la altura sea proporcional */
    border-radius: 4px; /* Un borde fino para que se vean bien */
    border: 1px solid #ddd; /* Un marco muy suave */
}

/* 3. PEQUEÑO AJUSTE PARA EL CAMPO DE INSTAGRAM (La píldora negra) */
.um-field-text input {
    max-width: 250px; /* Hacemos la píldora negra más pequeña */
    margin-right: 15px;
}
/* Cambiar el color del enlace "¿Has olvidado tu contraseña?" en Ultimate Member */
.um-login .um-link-alt a, 
.um-login .um-link-alt {
    color: #ffffff !important; /* Cambia #ffffff por #ffcc00 si lo prefieres en amarillo */
    text-decoration: underline; /* Opcional: añade una línea abajo para que se note claramente que es un enlace */
    opacity: 1 !important;
}

/* Cambiar el color cuando el usuario pasa el ratón por encima (Hover) */
.um-login .um-link-alt a:hover {
    color: #ffcc00 !important; /* Se vuelve amarillo al pasar el ratón */
}
/* ELIMINAR ESTILOS ANTERIORES Y APLICAR FUERZA BRUTA PARA EL BOTÓN */

/* 1. Resetear el botón: quitamos fondos, bordes y sombras que lo estiran */
.um .um-form input[type="submit"].um-button, 
.um .um-form input[type="submit"].um-button:focus {
    all: unset !important; /* Resetea *todas* las propiedades */
    box-sizing: border-box !important; /* Importante para el padding */

    /* 2. Definir el nuevo tamaño: forzamos el centrado */
    display: block !important;
    width: 70% !important; /* Más pequeño */
    max-width: 250px !important;
    margin: 30px auto !important; /* Centrado automático y espacio arriba/abajo */
    float: none !important;

    /* 3. Definir el nuevo diseño: redondo y azul */
    background-color: #1e3a8a !important; /* Color azul oscuro profesional */
    color: #ffffff !important; /* Texto blanco puro */
    padding: 12px 24px !important;
    border-radius: 50px !important; /* Súper redondo */
    text-align: center !important;
    cursor: pointer !important;
    font-weight: bold !important;
    font-size: 16px !important;
    font-family: inherit !important;
    
    /* 4. Limpiar sombras y desbordamientos antiguos */
    box-shadow: none !important;
    overflow: hidden !important;
}

/* Forzar que el contenedor no tenga desbordamiento */
.um-col-alt, .um-footer {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
    overflow: visible !important;
}
/* Centrar y cambiar fuente de títulos en Gutenberg */
.wp-block-post-title,
h1.entry-title {
    text-align: center !important;
    font-family: 'Rufina', serif !important; /* Cambia 'Georgia' por tu fuente */
}