.contenedor{
			text-align: center;
		}

		.logo{
			width: 450px;
		}

		body{
    		margin: 0;
    		font-family: Arial, sans-serif;
    		background-color: black;
		}

		.contenedor nav{
    		margin-top: 20px;
		}

		.contenedor nav a{
    		display: inline-block;
    		margin: 0 10px;
    		padding: 10px 18px;
    		color: lightgray;
    		text-decoration: none;
    		font-weight: bold;
    		letter-spacing: 1px;
    		background: black;
    		border: 1px solid gray;
    		border-radius: 4px;
    		transition: all 0.3s ease;
		}

		.contenedor nav a:hover{
    		background: darkred;
    		color: white;
    		border-color: red;

    		transform: scale(1.05);
    		box-shadow: 0 0 10px red;
		}

		.titulo{
			color: white;
			margin-top: 80px;
			font-family: Zombie;
    		color: darkred;
    		text-align: center;

		}

		@font-face{
    		font-family: Zombie;
    		src: url("fotosExamen/ZOMBIE.TTF");
		}

		.p1{
			width: 800px;
    		margin: 20px auto;
    		color: white;
    		font-size: 20px;
    		line-height: 1.6;
    		padding: 20px;
    		text-align: left;
		}

		.main1{
			width: 800px;
    		display: block;
    		margin: 40px auto;
    		position: relative;
    		top: 0;
    		right: 5px;
    		border-radius: 10px;
		}

		.card{
			width: 200px;
			height: 450px;
			position: relative;
			border-radius: 10px;
			overflow: hidden;
			margin-left: 20px;
		}

		.img-box{
			position: absolute;
			width: 100%;
			height: 100%;
			transition: 0.5s ease;
			z-index: 2;
		}

		.rick{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.info{
			position: absolute;
			width: 90%;
			height: 100%;
			color: white;
			text-align: center;
			padding: 20px;
			display: flex;
			flex-direction: column;
			z-index: 1;
			font-size: 16px;

		}

		.card:hover .img-box{
			transform: translateY(-100%);
		}

		.contenedortarjetas{
			display: flex;
			justify-content: center;
			align-items: flex-start;
			gap: 30px;
			flex-wrap: wrap;
			width: 100%;
			max-width: 1400px;
			margin: 50px auto;
			padding: 20px;
		}

		footer{
    		background-color: black;
    		color: white;
    		text-align: center;
    		padding: 20px 0;
    		margin-top: 50px;
    		border-top: 3px solid white;
		}

		.footer-contenido{
    		width: 100%;
		}

		.redes{
    		margin-top: 10px;
		}

		.icono-red{
   		 	width: 50px;
    		height: 50px;
    		margin: 0 10px;
    		transition: 0.3s;
		}

		.icono-red:hover{
    		transform: scale(1.2);
		}

		.contenedor-mapa{
    		display: flex;
    		justify-content: center;
    		margin-top: 50px;
		}

		.mapa{
    		position: relative;
		}

		.mapa-img{
    		width: 1000px;
    		border: 3px solid white;
		}

		.zona{
    		position: absolute;
    		width: 40px;
    		height: 40px;
    		cursor: pointer;
		}


		.alexandria{
    		top: 310px;
    		left: 620px;
		}

		.hilltop{
    		top: 400px;
    		left: 90px;
		}

		.santuario{
    		top: 590px;
    		left: 110px;
		}

		.oceanside{
    		top: 340px;
    		left: 820px;
		}

		.kingdom{
    		top: 720px;
    		left: 10px;
		}

		.junkyard{
			top: 590px;
			left: 250px;
		}



		.preview{
    		width: 250px;
    		position: absolute;
    		top: -260px;
    		left: 20px;
    		opacity: 0;
    		transition: 0.3s;
    		border: 3px solid white;
		}


		.zona:hover .preview{
    		opacity: 1;
		}

		/*///////////*/


		.tarjetacontacto {
  			width: 90%;
  			max-width: 500px;
  			margin: 40px auto;
  			padding: 25px;
  			background: rgba(20, 20, 20, 0.95);
  			border: 2px solid #2e2e2e;
  			border-radius: 12px;
  			box-shadow: 0 0 20px rgba(0, 255, 0, 0.08);
  			color: #e6e6e6;
  			font-family: Arial, sans-serif;
		}

		.tarjetacontacto h2 {
  			text-align: center;
  			color: #b30000;
  			margin-bottom: 20px;
  			text-shadow: 0 0 8px rgba(179, 0, 0, 0.6);
		}

		.tarjetacontacto label {
  			display: block;
  			margin-top: 15px;
  			margin-bottom: 5px;
  			color: #cfcfcf;
  			font-weight: bold;
		}

		.tarjetacontacto input,
		.tarjetacontacto select,
		.tarjetacontacto textarea {
  			width: 100%;
  			padding: 10px;
  			border: 1px solid #444;
  			border-radius: 6px;
  			background: #0f0f0f;
  			color: #fff;
  			outline: none;
  			transition: 0.2s ease;
		}

		.tarjetacontacto input:focus,
		.tarjetacontacto select:focus,
		.tarjetacontacto textarea:focus {
  			border-color: #b30000;
  			box-shadow: 0 0 8px rgba(179, 0, 0, 0.5);
		}

		.tarjetacontacto textarea {
  			resize: none;
		}

		.tarjetacontacto button {
  			width: 100%;
  			margin-top: 20px;
  			padding: 12px;
  			background: #b30000;
  			border: none;
  			border-radius: 6px;
  			color: white;
  			font-size: 16px;
  			font-weight: bold;
  			cursor: pointer;
  			transition: 0.3s;
		}

		.tarjetacontacto button:hover {
  			background: #ff1a1a;
  			box-shadow: 0 0 12px rgba(255, 0, 0, 0.6);
		}

		.body-transmision{

    		margin: 0;
    		padding: 0;

    		background:
    		linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.92)),
    		url("fotosExamen/fondo-zombies.jpg");

    		background-size: cover;
    		background-position: center;
    		font-family: Arial, Helvetica, sans-serif;
    		height: 100vh;
    		display: flex;
    		justify-content: center;
    		align-items: center;
    		color: white;
		}

		.caja-transmision{

    		width: 90%;
    		max-width: 650px;
    		background-color: rgba(10,10,10,0.95);
    		border: 3px solid #a30000;
    		border-radius: 15px;
    		padding: 40px;
    		text-align: center;
    		box-shadow: 0 0 25px red;
		}

		.icono-transmision{

    		font-size: 80px;
    		margin-bottom: 20px;
		}

		.titulo-transmision{

    		color: #ff1a1a;
    		font-size: 45px;
    		text-shadow: 0 0 10px red;
    		margin-bottom: 20px;
		}

		.linea-transmision{

    		width: 100%;
    		height: 2px;
    		background: red;
    		margin: 25px 0;
    		box-shadow: 0 0 10px red;
		}

		.texto-transmision{

    		font-size: 20px;
    		line-height: 1.6;
    		color: #ddd;
		}

		.boton-transmision{

    		display: inline-block;
    		margin-top: 30px;
    		padding: 15px 35px;
    		background-color: #a30000;
    		color: white;
    		text-decoration: none;
    		font-weight: bold;
    		border-radius: 8px;
    		border: 2px solid red;
    		transition: 0.3s;
		}

		.boton-transmision:hover{

    		background-color: black;
    		color: #ff2b2b;
    		box-shadow: 0 0 15px red;
    		transform: scale(1.05);
		}

		/* ========================= */
		/* TABLETS */
		/* ========================= */

		@media screen and (max-width: 1024px){	

    	.logo{
        	width: 300px;
    	}

    	.main1{
        	width: 90%;
    	}

    	.p1{
        	width: 90%;
        	font-size: 18px;
    	}

    	.mapa-img{
        	width: 90%;
    	}

    	.preview{
        	width: 180px;
    	}

    	.titulo{
        	font-size: 40px;
        	padding: 0 20px;
    	}

    	.contenedortarjetas{
        	gap: 20px;
    	}
	}


		/* ========================= */
		/* MOVILES */
		/* ========================= */

		@media screen and (max-width: 768px){

    	nav{
        	display: flex;
        	flex-direction: column;
        	align-items: center;
        	gap: 10px;
    	}

    	.contenedor nav a{
        	width: 80%;
        	text-align: center;
    	}

    	.logo{
        	width: 220px;
    	}

    	.titulo{
        	font-size: 28px;
        	margin-top: 40px;
        	padding: 0 15px;
    	}

    	.p1{
        	width: 90%;
        	font-size: 16px;
        	line-height: 1.5;
        	padding: 10px;
    	}

    	.main1{
        	width: 95%;
        	margin: 20px auto;
    	}

    	.contenedortarjetas{
        	flex-direction: column;
        	align-items: center;
    	}

    	.card{
        	width: 280px;
        	height: 420px;
        	margin-left: 0;
    	}

    	.info{
        	font-size: 14px;
        	padding: 15px;
    	}

    	.mapa-img{
        	width: 100%;
    	}

    	.contenedor-mapa{
        	overflow-x: auto;
        	padding: 10px;
    	}

    	.preview{
        	width: 140px;
        	top: -150px;
        	left: 10px;
    	}

    	.tarjetacontacto{
        	width: 90%;
        	padding: 20px;
    	}

    	.icono-red{
        	width: 40px;
        	height: 40px;
        	margin: 5px;
    	}

    	footer p{
        	font-size: 14px;
       	 padding: 0 10px;
    	}
	}


		/* ========================= */
		/* MOVILES PEQUEÑOS */
		/* ========================= */

		@media screen and (max-width: 480px){

    	.titulo{
        	font-size: 22px;
    	}

    	.p1{
        	font-size: 15px;
    	}

    	.card{
        	width: 240px;
        	height: 380px;
    	}

    	.preview{
        	display: none;
    	}

    	.tarjetacontacto h2{
        	font-size: 22px;
    	}

    	.tarjetacontacto button{
        	font-size: 14px;
    	}
	}