@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');

body {
	font-family: 'Indie Flower', cursive !important;
  background: #FDE3A7;
	margin: 0px;
	padding: 0px;
}

::selection {
	background: transparent;
}

h4 {
	font-size: 26px;
	line-height: 1px;
	font-family: 'Amatic SC', cursive !important;
}

.color1{color:#1BBC9B}
.color2{color:#C0392B}


.card {
	color: #013243;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 500px;
	background: #e0e1dc;
	transform-style: preserve-3d;
	transform: translate(-50%,-50%) perspective(2000px);
	box-shadow: inset 300px 0 50px rgba(0,0,0,.5), 20px 0 60px rgba(0,0,0,.5);
	transition: 1s;
}

.card:hover {
	transform: translate(-50%,-50%) perspective(2000px) rotate(15deg) scale(1.2);
	box-shadow: inset 20px 0 50px rgba(0,0,0,.5), 0 10px 100px rgba(0,0,0,.5);
}

.card:before {
	content:'';
	position: absolute;
	top: -5px;
	left: 0;
	width: 100%;
	height: 5px;
	background: #BAC1BA;
	transform-origin: bottom;
	transform: skewX(-45deg);
}

.card:after {
	content: '';
	position: absolute;
	top: 0;
	right: -5px;
	width: 5px;
	height: 100%;
	background: #92A29C;
	transform-origin: left;
	transform: skewY(-45deg);
}

.card .imgBox {
	width: 100%;
	height: 100%;
	position: relative;
	transform-origin: left;
	transition: .7s;
}

.card .bark {
	position: absolute;
	background: #e0e1dc;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: .7s;
}

.card .imgBox img {
	min-width: 300px;
	max-height: 600px;
}

.card:hover .imgBox {
	transform: rotateY(-135deg);
}

.card:hover .bark {
	opacity: 1;
	transition: .6s;
  box-shadow: 300px 200px 100px rgba(0, 0, 0, .4) inset;
}

.card .details {
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	padding: 0 0 0 10px;
	z-index: -1;
	margin-top: 0px;
}

.card .details p {
	font-size: 15px;
	line-height: 5px;
	transform: rotate(-10deg);
	padding: 0 0 0 20px;
}

.card .details h4 {
	text-align: center;
}

.text-right {
	text-align: right;
}






.boton-enlace {
    display: inline-block;        /* Permite aplicar padding y márgenes correctamente */
    text-decoration: none;        /* Quita la línea de subrayado del enlace */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    font-weight: 600;
    
    /* Colores y bordes */
    color: #ffffff;               /* Texto blanco */
    background-color: #2563eb;    /* Color de fondo azul */
    padding: 12px 24px;           /* Espaciado interno (alto y ancho) */
    border-radius: 8px;           /* Esquinas redondeadas */
    
    /* Sombra y transiciones */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease-in-out; /* Animación suave para todos los cambios */
    cursor: pointer;
}

/* Estado Hover: Cuando el usuario pasa el mouse por encima */
.boton-enlace:hover {
    background-color: #1d4ed8;    /* El color azul se oscurece un poco */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);  /* El botón sube ligeramente dando efecto de flotar */
}

/* Estado Active: Cuando el usuario hace clic en el botón */
.boton-enlace:active {
    background-color: #1e3a8a;    /* Color azul aún más oscuro */
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    transform: translateY(0);     /* El botón regresa a su posición original (efecto de hundirse) */
}

/* Estado Focus: Para accesibilidad (cuando se navega con el teclado) */
.boton-enlace:focus {
    outline: none;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 4px #93c5fd; /* Crea un anillo de luz alrededor del botón */
}