<!-- 
    TAREAS PENDIENTES
    =================

    - Cambiar las entradas de tablas del css para que en lugar de apuntar al tag apunten a la clase.
    - Cambiar las entradas de películas a POO.
    - Reestructurar los ficheros PHP en carpetas.
    - Introducir más lemas.
    - Probar los input groups en los formularios de inserción.
    - Crear el cierre de conexiones de BBDD a través de las clases.
    - Considerar si meter más info tanto de las películas como de las leyendas.
    - Crear constantes para las rutas de los carteles y las fotos.
    - Echar un vistazo a las fotos de las cabeceras y cambiarlas si es necesario.
    - Consultar w3schools para adaptar la web a como las cosas se explican ahí.
    - Probar responsividad textos.
    - Limpiar las variables de cadenas de caracteres cuando sea necesario.
    - Ver necesidad de hacer trim en los resultados de cadenas de caracteres.
    - Ver si fuese necesario sustituir paddings por margins y viceversa.
    - Rematar asunto headers y footers. Hay dos y es necesario simplificar.
    - Depurar y comentar mejor la página de estilos css.
    - Usar los if ternarios cuando sea necesario.
    - Estudiar uso class="visible/invisible" para reemplazar código css relacionado.
    - Si todos los section tienen la clase secciones, ver si podemos quitar esa clase y modificar el css en consecuencia.
    - Ver si a los h les quitamos margin y padding desde bootstrap o css.
    - Poner rutas como /img/fotos y /img/banderas como constantes.
    - Usar operadores ternarios para resumir líneas.
    - Sustituir función obtener_numero_x por obtener_x y un rowcount.
    - Poner en los alt y title de las cabeceras a sus respectivos autores.
    - Ver si podemos poner en las inserciones de fecha una automática cuando se pierde el foco o no se rellena el campo.
    - Asociar país de otras tablas con la de la tabla "paises".
    - Añadir las líneas completas del guion de las fichas de Filmaffinity.
    - Desahogar el css principal dejando sólo los estilos que atañan a más de una página. Los otros ponerlos en sus respectivas páginas.
    - Pasar los lemas a POO.
    - Poner los mismos nombres de las carátulas de las pelis que tiene FilmAffinity.
    - Decidir el color de las sombras de las cabeceras y títulos.
    - Ver si podemos obtener los lemas aleatorios sin necesidad de usar arrays intermedios.
    - Reparar función obtener_lemas($numero) para ver si se puede coger el parámetro de otra manera.
    - Dar estilo a las cabeceras de los modales.
    - Reparar comportamiento de los span.
    - Quitar el font-weight:bold de las cabeceras, ya que lo llevan incorporado de serie.
    - Resumir el css de las secciones del index mediante clases para que cada vez que entre una nueva se toque el css lo menos posible.
    - Si al final no van a servir, quitar los id de los carruseles.
    - En el header pasar el apartado "Películas" a POO.
    - Añadir el campo de la bandera de los países en vistaLeyendas.
    - Ver si en las clases se pueden sustituir las consultas a las tablas por consultas a las vistas.
    - Ver si con el uso de clases en lugar de tablas se puede prescindir del uso de algunos require.
    - Gestionar mejor estilos cabeceras (H1, H2...) de las páginas.
    - Dejar claro método para controlar el vh de los modal-body (css con height en el propio modal-body o en los elementos que este contiene).
    - Dejar claro en las clases si las consultas se hacen sobre las tablas o sobre las vistas (e.g.: tabla y vista de leyendas).
    - Eliminar la bandera de 'vistaLeyendas' y rehacer búsqueda de la bandera en la ficha de las leyendas.
    - Limpiar vistaCombates de campos.
	- Ver si hay que realizar cambios en el header_combates.php
	- Si vamos a tener varias cabeceras, crear menu.php para modificar el menú una vez para todas.
	- Todas las funciones de las clases deben tener sus respectivos 'try' y 'catch'.
    - Hacer los footer recursivos tal y como están los textos de las páginas web.
    - Evaluar si quitar el min-vh-100 de las secciones.
-->


















<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Bienvenidos a Dieciséis Cuerdas, la página web donde aprenderéis todo lo necesario sobre el deporte del boxeo, conoceréis a sus leyendas y disfrutaréis de los mejores combates de la historia de este deporte.">
	<meta name="keywords" content="Boxeo, Historia, Reglas, Categorías, Organismos, Equipamiento, Técnica, Estilos, Golpes, Defensa, Leyendas, Combates">


    <title>DIECISÉIS CUERDAS</title>

    <!-- BOOTSTRAP CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <!-- FONT AWESOME -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <!-- CSS PRINCIPAL -->
    <link rel="stylesheet" href="css/principal.css">
    <!-- GOOGLE FONTS -->
    <link href="https://fonts.googleapis.com/css2?family=Bungee&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@700&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap" rel="stylesheet">
    <!-- FAVICON -->
    <link rel="shortcut icon" href="https://www.dieciseiscuerdas.com/img/favicon/favicon.ico">
</head>
<body>

    <!-- RRSS Y MENÚ PRINCIPAL -->
	<!-- MENÚ PRINCIPAL -->
<!-- <nav class="navbar navbar-expand-lg d-none d-lg-block py-0"> -->
<nav class="navbar navbar-expand-lg py-1">
	<div class="container">
		<!-- Brand -->
		<!-- <a href="index.php" class="navbar-brand"><img src="img/logo_web_24px.png" alt=""></a> -->
		<a href="index.php" class="navbar-brand mr-0"><img src="img/logo_web_60px.png" alt=""></a>

		<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
			<i class="fas fa-bars"></i>
		</button>

		<div class="collapse navbar-collapse" id="navbarCollapse">
			<!-- Links -->
			<ul class="navbar-nav mx-auto">
				<!--<li class="nav-item active">
						<a href="index.php" class="nav-link">INICIO</a>
					</li>-->

				<!-- Dropdown -->
				<li class="nav-item active dropdown">
					<a href="#" class="nav-link dropdown-toggle" id="navbardrop" data-toggle="dropdown">BOXEO</a>

					<div class="dropdown-menu">
						<a href="historia.php" class="dropdown-item">HISTORIA</a>

						<a href="reglas.php" class="dropdown-item">REGLAS</a>

						<a href="categorias.php" class="dropdown-item">CATEGORÍAS</a>

						<a href="organismos.php" class="dropdown-item">ORGANISMOS</a>
					</div>
				</li>
				<!-- ******** -->

				<li class="nav-item">
					<a href="equipo.php" class="nav-link">EQUIPAMIENTO</a>
				</li>

				<!-- Dropdown -->
				<li class="nav-item dropdown">
					<a href="#" class="nav-link dropdown-toggle" id="navbardrop" data-toggle="dropdown">TÉCNICA</a>

					<div class="dropdown-menu">
						<a href="estilos.php" class="dropdown-item">ESTILOS</a>

						<!-- <a href="posiciones.php" class="dropdown-item">POSICIONES</a> -->

						<a href="golpes.php" class="dropdown-item">GOLPES</a>

						<a href="defensa.php" class="dropdown-item">DEFENSA</a>
					</div>
				</li>
				<!-- ******** -->

				
				<li class="nav-item">
					<a href="leyendas.php" class="nav-link">LEYENDAS</a>
				</li>

				
				
				<li class="nav-item">
					<a href="combates.php" class="nav-link">COMBATES</a>
				</li>

				
				<li class="nav-item">
					<a href="#" class="nav-link" data-toggle="modal" data-target="#modalContacto" title="Envíanos tu consulta o sugerencia a: info@dieciseiscuerdas.com"><!-- <i class="fas fa-envelope"></i> -->CONTACTO</a>

				</li>			


				<!-- LINKS RRSS -->
				<li class="enlaces d-sm-block d-md-block d-lg-none nav-item">
					<div class="nav-link">
						<a href="https://www.facebook.com/dieciseiscuerdas" target="_blank" title="Facebook"><i class="fab fa-facebook-f mr-1 text-primary"></i></a>

						<a href="https://twitter.com/diec16cuerdas" target="_blank" title="Twitter"><i class="fab fa-twitter mr-1 text-info"></i></a>

						<a href="https://www.youtube.com/channel/UCybjxS5lUGrbAa_Y4YiSINA" target="_blank" title="Youtube"><i class="fab fa-youtube mr-1 text-danger"></i></a>

						<a href="https://www.instagram.com/diec16cuerdas/" target="_blank" title="Instagram"><i class="fab fa-instagram mr-1 text-warning"></i></a>

						<a href="https://open.spotify.com/embed/playlist/1N1gpM4miZSgQ32xlphVXg" target="_blank" title="Spotify"><i class="fab fa-spotify text-success"></i></a>

						<!-- <a href="#" data-toggle="modal" data-target="#modalContacto" title="Envíanos tu consulta o sugerencia a: info@dieciseiscuerdas.com"><i class="fas fa-envelope"></i></a> -->
					</div>
				</li>
				<!-- ********** -->

			</ul>				
		</div>	<!-- fin collapse -->
		
		<div class="enlaces d-none d-lg-block">
			<a href="https://www.facebook.com/dieciseiscuerdas" target="_blank" title="Facebook"><i class="fab fa-facebook-f mr-1 text-primary"></i></a>

			<a href="https://twitter.com/diec16cuerdas" target="_blank" title="Twitter"><i class="fab fa-twitter mr-1 text-info"></i></a>

			<a href="https://www.youtube.com/channel/UCybjxS5lUGrbAa_Y4YiSINA" target="_blank" title="Youtube"><i class="fab fa-youtube mr-1 text-danger"></i></a>

			<a href="https://www.instagram.com/diec16cuerdas/" target="_blank" title="Instagram"><i class="fab fa-instagram mr-1 text-warning"></i></a>

			<a href="https://open.spotify.com/embed/playlist/1N1gpM4miZSgQ32xlphVXg" target="_blank" title="Spotify"><i class="fab fa-spotify text-success"></i></a>

			<!-- <a href="#" data-toggle="modal" data-target="#modalContacto" title="Envíanos tu consulta o sugerencia a: info@dieciseiscuerdas.com"><i class="fas fa-envelope"></i></a> -->
		</div>
		
	</div>
</nav>
<!-- ************** -->    <!-- ************** --><!-- MODAL DEL TRAILER
<div class="modal fade" id="modalTrailer" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">TRAILERS</h5>

                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <div class="modal-body">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe id="trailer" class="embed-responsive-item" width="560" height="315" src="" allowfullscreen></iframe>
                </div>
            </div>
            
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
***************** -->

<!-- MODAL DEL CARTEL
<div class="modal fade" id="modalCartel" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">CARTELES</h5>

                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <div class="modal-body">
                <img id="cartel" class="img-fluid d-block mx-auto" src="" alt="Error al mostrar el cartel.">
            </div>
            
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
***************** -->

<!-- MODAL DEL COMBATE -->
<div class="modal fade" id="modalCombate" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">COMBATES</h5>

                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <div class="modal-body">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe id="combate" class="embed-responsive-item" width="560" height="315" src="" allowfullscreen></iframe>
                </div>            
            </div>
            
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<!-- ***************** -->

<!-- MODAL PRÓXIMAMENTE
<div class="modal fade" id="modalProximamente" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">PRÓXIMAMENTE</h5>

                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <div class="modal-body">
                <h1><i class="fas fa-toolbox"></i> EN CONSTRUCCIÓN</h1>
            </div>
            
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
***************** -->

<!-- MODAL LEYENDAS -->
<div class="modal fade" id="modalLeyendas" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">LEYENDAS</h5>

                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <div class="modal-body"></div>
            
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<!-- ***************** -->

<!-- MODAL PELÍCULAS
<div class="modal fade" id="modalPeliculas" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">PELÍCULAS</h5>

                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <div class="modal-body">
                <div class="pruebaFicha"></div>
            </div>
            
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
*************** -->

<!-- MODAL VELADAS
<div class="modal fade bd-example-modal-sm" id="modalVeladas" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
            </div>

            <div class="modal-body">
                <img src="img/veladas/cbmalaga_30072022.jpg" class="img-fluid mx-auto d-block" alt="Velada benéfica de boxeo - CB Málaga" title="Velada benéfica de boxeo - CB Málaga">
            </div>
            
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
***************** -->

<!-- MODAL CONTACTO -->
<!-- https://programacion.net/articulo/formulario_modal_en_bootstrap_con_ajax_y_php_1786/ -->
<div class="modal fade" id="modalContacto" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">FORMULARIO DE CONTACTO</h5>

                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <div class="modal-body">
                <p class="msjEstado"></p>

                <form role="form">
                    <div class="form-group">
                        <label for="introducirNombre">Nombre</label>

                        <input type="text" class="form-control" id="introducirNombre" placeholder="Introduzca su nombre"/>
                    </div>

                    <div class="form-group">
                        <label for="introducirEmail">Email</label>

                        <input type="email" class="form-control" id="introducirEmail" placeholder="Introduzca su email"/>
                    </div>

                    <div class="form-group">
                        <label for="introducirMensaje">Mensaje</label>

                        <textarea class="form-control" id="introducirMensaje" placeholder="Introduzca su mensaje" required></textarea>
                    </div>
                </form>
            </div>
            
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary btnEnviar" onclick="enviarFormularioContacto()">Enviar</button>
            </div>
        </div>
    </div>
</div>

<script>
    function enviarFormularioContacto() {
        var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+.)+[A-Z]{2,4}$/i;
        var name = $('#introducirNombre').val();
        var email = $('#introducirEmail').val();
        var message = $('#introducirMensaje').val();

        /* if(name.trim() == '' ) {
            alert('Por favor, introduzca su nombre.');
        
            $('#introducirNombre').focus();
        
            return false;
        } else if(email.trim() == '' ) {
        
            alert('Por favor, introduzca su email.');
        
            $('#introducirEmail').focus();
        
            return false;
        } else if(email.trim() != '' && !reg.test(email)) {
        
            alert('Por favor, introduzca un email válido.');
        
            $('#introducirEmail').focus();
        
            return false;
        } else if(message.trim() == '' ) { */
        if(message.trim() == '' ) {
            alert('Por favor, introduzca su mensaje.');
        
            $('#introducirMensaje').focus();
        
            return false;
        } else {
            $.ajax({
                type: 'POST',
                url: 'includes/enviar_formulario.php',
                data: 'enviarFrmContacto=1&name=' + name + ' &email=' + email + ' &message=' + message,
                beforeSend: function() {
                    $('.btnEnviar').attr("disabled", "disabled");
                    $('.modal-body').css('opacity', '.5');
                },
                success: function(msg) {
                    if(msg == 'ok') {
                        $('#introducirNombre').val('');
                        $('#introducirEmail').val('');
                        $('#introducirMensaje').val('');

                        $('.msjEstado').html('<span style="color: green;">Gracias por contactar con nosotros, le contestaremos lo antes posible.</span>');
                    } else {
                        $('.msjEstado').html('<span style="color: red;">Ha ocurrido un problema, por favor inténtelo de nuevo.</span>');
                    }

                    $('.btnEnviar').removeAttr("disabled");
                    $('.modal-body').css('opacity', '');
                }
            });
        }
    }
</script>
<!-- ************** -->

<!-- MODAL BIOGRAFÍAS -->
<div class="modal fade" id="modalBiografia" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">BIOGRAFÍA</h5>

                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <div class="modal-body" style="height:75vh; overflow:auto;">
                <p id="bio" style="text-align:justify;"></p>
            </div>
            
            <!-- <div class="modal-footer">
                <button type="button" class="btn btn-primary">Save changes</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div> -->
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){
        $('.abrirModalBiografias').on('click', function() {
            var biografia = $(".abrirModalBiografias").attr('value');

            $("#modalBiografia").on('hide.bs.modal', function() {
                document.getElementById("bio").innerHTML = "";
            });

            $("#modalBiografia").on('show.bs.modal', function() {
                document.getElementById("bio").innerHTML = biografia;
            });
        });
    });
</script>
    


    <!-- CABECERA -->
    <header class="d-flex flex-column justify-content-center align-items-center" id="cInicio">
        <h1 class="sombraCabeceras my-0">Bienvenidos a DIECISÉIS CUERDAS</h1>
		
		<!-- <figure class="figure">
  			<img src="img/logo_web_oficial.png" class="figure-img img-fluid rounded mb-3" alt="Dieciséis Cuerdas" title="Dieciséis Cuerdas">
  			<figcaption class="figure-caption sombraCabeceras">AQUÍ SE RESPIRA BOXEO</figcaption>
		</figure> -->
        <!-- <img src="img/logo_web_oficial.png" class="figure-img img-fluid rounded mb-3" style="background-color: rgba(184,134,11,0.9);" alt="Dieciséis Cuerdas" title="Dieciséis Cuerdas">-->

        <h2 class="sombraCabeceras my-0">AQUÍ SE RESPIRA BOXEO</h2>
		
		<p class="sombraCabeceras my-0 pt-5">La web perfecta para introducirte en el mundo del boxeo, conocer a sus leyendas y disfrutar de los mejores combates de la historia.</p>
    </header>
    <!-- *************************************************************************************************************************************************************** -->

    <!-- SECCIÓN LEMA 1 -->
	<section class="lemas">
		<div class="container">
            <div class="cita">
                <p>"I made a lot of mistakes out of the ring, but I never made any in it."</p>
    
                <p class="autor">- Jack Johnson.</p>
            </div>
		</div>
	</section>
	<!-- *************************************************************************************************************************************************************** -->

    <!-- SECCIÓN BOXEO -->
	<section class="carruseles" id="sCaBoxeo">
        <div id="carouselBoxeo" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carouselBoxeo" data-slide-to="0" class="active"></li>
                <li data-target="#carouselBoxeo" data-slide-to="1"></li>
				<li data-target="#carouselBoxeo" data-slide-to="2"></li>
				<li data-target="#carouselBoxeo" data-slide-to="3"></li>
            </ol>

            <!-- Slideshow -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="img/cabeceras/pexels-mikhail-nilov-6739946.jpg" alt="Foto de Mikhail Nilov en Pexels" title="Foto de Mikhail Nilov en Pexels">

                    <div class="carousel-caption">                          
                        <h2 class="sombraCabeceras">HISTORIA</h2> 
                        
						<a href="historia.php" class="btn btn-primary btn-sm mb-5">Ver más...</a>
                    </div>
                </div>

                <div class="carousel-item">
                    <img src="img/cabeceras/pexels-joshua-miranda-4027658.jpg" alt="Foto de Joshua Miranda en Pexels" title="Foto de Joshua Miranda en Pexels">

					<div class="carousel-caption">                          
                        <h2 class="sombraCabeceras">REGLAS</h2> 
                        
						<a href="reglas.php" class="btn btn-primary btn-sm mb-5">Ver más...</a>
                    </div>
                </div>
				
                <div class="carousel-item">
                    <img src="img/cabeceras/pexels-pixabay-70567.jpg" alt="Foto de Pixabay en Pexels" title="Foto de Pixabay en Pexels">

					<div class="carousel-caption">                          
                        <h2 class="sombraCabeceras">CATEGORÍAS</h2> 
                        
						<a href="categorias.php" class="btn btn-primary btn-sm mb-5">Ver más...</a>
                    </div>
                </div>

                <div class="carousel-item">
                    <img src="img/cabeceras/pexels-cottonbro-4761797.jpg" alt="Foto de cottonbro en Pexels" title="Foto de cottonbro en Pexels">

					<div class="carousel-caption">                          
                        <h2 class="sombraCabeceras">ORGANISMOS</h2> 
                        
						<a href="organismos.php" class="btn btn-primary btn-sm mb-5">Ver más...</a>
                    </div>
                </div>	
            </div>

            <!-- Left and right controls -->
            <a class="carousel-control-prev" href="#carouselBoxeo" data-slide="prev"><span class="carousel-control-prev-icon"></span></a>
            <a class="carousel-control-next" href="#carouselBoxeo" data-slide="next"><span class="carousel-control-next-icon"></span></a>
        </div>
	</section>

	<section class="secciones sIndex" id="sBoxeo">
        <div class="container-fluid">
            <div class="row text-center justify-content-around align-items-center">
                <div class="col-lg-4">
                    <h2 class="sombraCabeceras">HISTORIA</h2>

                    <img src="img/cabeceras/pexels-mikhail-nilov-6739946.jpg" class="img-fluid" alt="Foto de Mikhail Nilov en Pexels" title="Foto de Mikhail Nilov en Pexels">
                    
                    <div class="botonera mt-4"> <!-- pongo este div porque img es inline y los botones se ponen a la derecha -->
                        <a href="historia.php" class="btn btn-primary">Ver más...</a>
                    </div>
                </div>

                <div class="col-lg-4">
                    <h2 class="sombraCabeceras">REGLAS</h2>

                    <img src="img/cabeceras/pexels-joshua-miranda-4027658.jpg" class="img-fluid" alt="Foto de Joshua Miranda en Pexels" title="Foto de Joshua Miranda en Pexels">
                    
                    <div class="botonera mt-4">
                        <a href="reglas.php" class="btn btn-primary">Ver más...</a>
                    </div>
                </div>

                <div class="col-lg-4">
                    <h2 class="sombraCabeceras">CATEGORÍAS</h2>

                    <img src="img/cabeceras/pexels-pixabay-70567.jpg" class="img-fluid" alt="Foto de Pixabay en Pexels" title="Foto de Pixabay en Pexels">
                    
                    <div class="botonera mt-4">
                        <a href="categorias.php" class="btn btn-primary">Ver más...</a>
                    </div>
                </div>

                <!-- <div class="col-lg-3">
                    <h2 class="sombraCabeceras">ORGANISMOS</h2>

                    <img src="img/cabeceras/pexels-cottonbro-4761797.jpg" class="img-fluid" alt="Foto de cottonbro en Pexels" title="Foto de cottonbro en Pexels">
                    
                    <div class="botonera mt-4">
                        <a href="organismos.php" class="btn btn-primary">Ver más...</a>
                    </div>
                </div> -->
            </div>
        </div>
	</section>
	<!-- *************************************************************************************************************************************************************** -->

    <!-- SECCIÓN LEMA 2 -->
	<section class="lemas">
		<div class="container">
            <div class="cita">
                <p>"I'm not God, but I am something similar."</p>
    
                <p class="autor">- Roberto Duran.</p>
            </div>            
		</div>
	</section>
	<!-- *************************************************************************************************************************************************************** -->

    <!-- SECCIÓN PREPARACION -->
	<section class="carruseles" id="sCaPreparacion">
        <div id="carouselPreparacion" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <!-- <ol class="carousel-indicators">
                <li data-target="#carouselPreparacion" data-slide-to="0" class="active"></li>
                <li data-target="#carouselPreparacion" data-slide-to="1"></li>
                <li data-target="#carouselPreparacion" data-slide-to="2"></li>
            </ol> -->

            <!-- Slideshow -->
            <div class="carousel-inner">
                <!-- <div class="carousel-item active">
                    <img src="img/cabeceras/pexels-thisisengineering-3912956.jpg" alt="Foto de ThisIsEngineering en Pexels" title="Foto de ThisIsEngineering en Pexels">

                    <div class="carousel-caption">                          
                        <h2 class="sombraCabeceras">ENTRENAMIENTO</h2> 
                        
						<a href="entrenamiento.php" class="btn btn-primary btn-sm mb-5">Ver más...</a>
                    </div>
                </div> -->

                <div class="carousel-item active">
                    <img src="img/cabeceras/pexels-mikhail-nilov-6739958.jpg" alt="Foto de Mikhail Nilov en Pexels" title="Foto de Mikhail Nilov en Pexels">

					<div class="carousel-caption">                          
                        <h2 class="sombraCabeceras">EQUIPAMIENTO</h2> 
                        
						<a href="equipo.php" class="btn btn-primary btn-sm mb-5">Ver más...</a>
					</div>
                </div>

                <!-- <div class="carousel-item">
                    <img src="img/cabeceras/pexels-cottonbro-4761663.jpg" alt="Foto de cottonbro en Pexels" title="Foto de cottonbro en Pexels">

					<div class="carousel-caption">                          
                        <h2 class="sombraCabeceras">ESTRATEGIA</h2> 
                        
						<a href="estrategia.php" class="btn btn-primary btn-sm mb-5">Ver más...</a>
                    </div>
                </div> -->
            </div>

            <!-- Left and right controls -->
            <!-- <a class="carousel-control-prev" href="#carouselPreparacion" data-slide="prev"><span class="carousel-control-prev-icon"></span></a>
            <a class="carousel-control-next" href="#carouselPreparacion" data-slide="next"><span class="carousel-control-next-icon"></span></a> -->
        </div>
	</section>
	<!-- *************************************************************************************************************************************************************** -->

    <!-- SECCIÓN LEMA 3 -->
	<section class="lemas">
		<div class="container">
            <div class="cita">
                <p>"To become a champion, fight one more round."</p>
    
                <p class="autor">- James Corbett.</p>
            </div>                        
		</div>
	</section>
	<!-- *************************************************************************************************************************************************************** -->
    
    <!-- SECCIÓN PELÍCULAS, LIBROS, LEYENDAS, COMBATES Y LEMA 4-->
    
        <!-- PELÍCULAS, LIBROS, LEYENDAS Y COMBATES -->
        <section class="carruseles" id="sCaPLC">
            <div id="carouselPLC" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carouselPLC" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselPLC" data-slide-to="1"></li>
                    <!-- <li data-target="#carouselPLC" data-slide-to="2"></li>
                    <li data-target="#carouselPLC" data-slide-to="3"></li> -->
                </ol>

                <!-- Slideshow -->
                <div class="carousel-inner">
                    <!-- <div class="carousel-item active">
                        <img src="img/cabeceras/pexels-cottonbro-3945317.jpg" alt="Foto de cottonbro en Pexels" title="Foto de cottonbro en Pexels">

                        <div class="carousel-caption">                          
                            <h2 class="sombraCabeceras">PELÍCULAS</h2> 
                            
                            <a href="peliculas.php" class="btn btn-primary btn-sm mb-5">Ver más...</a>
                        </div>
                    </div>

                    <div class="carousel-item">
                        <img src="img/cabeceras/pexels-pixabay-159866.jpg" alt="Foto de Pixabay en Pexels" title="Foto de Pixabay en Pexels">

                        <div class="carousel-caption">                          
                            <h2 class="sombraCabeceras">LIBROS</h2> 
                            
                            <a href="libros.php" class="btn btn-primary btn-sm mb-5">Ver más...</a>
                        </div>
                    </div> -->
                    
                    <div class="carousel-item active">
                        <img src="img/cabeceras/pexels-cottonbro-4761595.jpg" alt="Foto de cottonbro en Pexels" title="Foto de cottonbro en Pexels">

                        <div class="carousel-caption">                          
                            <h2 class="sombraCabeceras">LEYENDAS</h2>

                                                        
                            <div class="botonera mb-5">
                                <a href="ficha_leyenda.php?id=57" class="btn btn-primary btn-sm">Ver última</a>
                                <a href="leyendas.php" class="btn btn-secondary btn-sm">Ver más...</a>
                            </div>
                        </div>
                    </div>

                    <div class="carousel-item">
                        <img src="img/cabeceras/pexels-sides-imagery-3531081.jpg" alt="Foto de cottonbro en Pexels" title="Foto de cottonbro en Pexels">

                        <div class="carousel-caption">                          
                            <h2 class="sombraCabeceras">COMBATES</h2> 
                            
                            <a href="combates.php" class="btn btn-primary btn-sm mb-5">Ver más...</a>
                        </div>
                    </div>			
                </div>

                <!-- Left and right controls -->
                <a class="carousel-control-prev" href="#carouselPLC" data-slide="prev"><span class="carousel-control-prev-icon"></span></a>
                <a class="carousel-control-next" href="#carouselPLC" data-slide="next"><span class="carousel-control-next-icon"></span></a>
            </div>
        </section>

        <section class="secciones sIndex" id="sPLC">
            <div class="container-fluid">
                <div class="row text-center justify-content-around align-items-center">
                    <!-- PELÍCULAS -->
                    <!-- 
                        <div class="col-lg-3">
                            <h2 class="sombraCabeceras">PELÍCULAS</h2>

                            <img src="img/cabeceras/pexels-cottonbro-3945317.jpg" class="img-fluid" alt="Foto de cottonbro en Pexels" title="Foto de cottonbro en Pexels">

                            <div class="botonera mt-4">
                                <a href="peliculas.php" class="btn btn-primary">Ver más...</a>
                            </div>
                        </div>

                     -->
                    <!-- ********* -->

                    <!-- LIBROS -->
                    <!-- 
                        <div class="col-lg-3">
                            <h2 class="sombraCabeceras">LIBROS</h2>

                            <img src="img/cabeceras/pexels-pixabay-159866.jpg" class="img-fluid" alt="Foto de Pixabay en Pexels" title="Foto de Pixabay en Pexels">

                            <div class="botonera mt-4">
                                <a href="libros.php" class="btn btn-primary">Ver más...</a>
                            </div>
                        </div>

                     -->
                    <!-- ****** -->

                    <!-- LEYENDAS -->
                    
                        <div class="col-lg-6">
                            <h2 class="sombraCabeceras">LEYENDAS</h2>

                            
                            <!--<img src="img/fotos/eder_jofre.jpg" class="img-fluid rounded-circle" alt="Éder Jofre" title="Éder Jofre">

                            <h2 class="sombraCabeceras" class="mt-2">Éder Jofre</h2>-->

                            <img src="img/cabeceras/pexels-cottonbro-4761595.jpg" class="img-fluid" alt="Foto de cottonbro en Pexels" title="Foto de cottonbro en Pexels">

                            <div class="botonera mt-4">
                                <!--<a href="ficha_leyenda.php?id=48" class="btn btn-primary">Ver ficha</a>-->
                                <a href="ficha_leyenda.php?id=57" class="btn btn-primary">Ver última</a>
                                <a href="leyendas.php" class="btn btn-secondary">Ver más...</a>
                            </div>                        
                        </div>

                                        <!-- ******** -->

                    <!-- COMBATES -->
                    
                        <div class="col-lg-6">
                            <h2 class="sombraCabeceras">COMBATES</h2>

                            
                            <img src="img/cabeceras/pexels-sides-imagery-3531081.jpg" class="img-fluid" alt="Foto de cottonbro en Pexels" title="Foto de cottonbro en Pexels">

                            <div class="botonera mt-4">
                                <!-- <a href="#" onclick="mostrarUltimoCombate()" data-toggle="modal" data-target="#modalCombate" class="btn btn-primary lnkCombates" id="ultimoCombate" value="g8emXxXWics">Ver último</a> -->

                                <script>
                                    /* https://www.tutorialrepublic.com/faq/how-to-embed-youtube-video-inside-bootstrap-modal.php */
                                    function mostrarUltimoCombate() {
                                        var video = $("#ultimoCombate").attr('value');
                                        var url = "//www.youtube.com/embed/" + video;

                                        /* Assign empty url value to the iframe src attribute when
                                        modal hide, which stop the video playing */
                                        $("#modalCombate").on('hide.bs.modal', function() {
                                            $("#combate").attr('src', '');
                                        });

                                        /* Assign the initially stored url back to the iframe src
                                        attribute when modal is displayed again */
                                        $("#modalCombate").on('show.bs.modal', function() {
                                            $("#combate").attr('src', url);
                                        });
                                    };
                                </script>

                                <a href="combates.php" class="btn btn-primary">Ver más...</a>
                            </div>                        
                        </div>

                                        <!-- ******** -->
                </div>
            </div>
        </section>

        <!-- SECCIÓN LEMA 4 -->
        <section class="lemas">
            <div class="container">
                <div class="cita">
                    <p>"The question isn't at what age I want to retire, it's at what income."</p>
        
                    <p class="autor">- George Foreman.</p>
                </div>                        
            </div>
        </section>
    
        <!-- *************************************************************************************************************************************************************** -->

    <!-- SECCIÓN TÉCNICA -->
	<section class="carruseles" id="sCaTecnica">
        <div id="carouselTecnica" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carouselTecnica" data-slide-to="0" class="active"></li>
                <li data-target="#carouselTecnica" data-slide-to="1"></li>
                <li data-target="#carouselTecnica" data-slide-to="2"></li>
                <!-- <li data-target="#carouselTecnica" data-slide-to="3"></li> -->
            </ol>

            <!-- Slideshow -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="img/cabeceras/pexels-sabel-blanco-1544774.jpg" alt="Foto de Sabel Blanco en Pexels" title="Foto de Sabel Blanco en Pexels">

                    <div class="carousel-caption">                          
                        <h2 class="sombraCabeceras">ESTILOS</h2> 
                        
						<a href="estilos.php" class="btn btn-primary btn-sm mb-5">Ver más...</a>
                    </div>
                </div>

                <!-- <div class="carousel-item">
                    <img src="img/cabeceras/pexels-mikhail-nilov-6740347.jpg" alt="Foto de Mikhail Nilov en Pexels" title="Foto de Mikhail Nilov en Pexels">

					<div class="carousel-caption">                          
                        <h2 class="sombraCabeceras">POSICIONES</h2> 
                        
						<a href="posiciones.php" class="btn btn-primary btn-sm mb-5">Ver más...</a>
                    </div>
                </div> -->

                <div class="carousel-item">
                    <img src="img/cabeceras/pexels-julia-larson-6456272.jpg" alt="Foto de Julia Larson en Pexels" title="Foto de Julia Larson en Pexels">

					<div class="carousel-caption">                          
                        <h2 class="sombraCabeceras">GOLPES</h2> 
                        
						<a href="golpes.php" class="btn btn-primary btn-sm mb-5">Ver más...</a>
                    </div>
                </div>

                <div class="carousel-item">
                    <img src="img/cabeceras/pexels-cottonbro-4761598.jpg" alt="Foto de cottonbro en Pexels" title="Foto de cottonbro en Pexels">

					<div class="carousel-caption">                          
                        <h2 class="sombraCabeceras">DEFENSA</h2> 
                        
						<a href="defensa.php" class="btn btn-primary btn-sm mb-5">Ver más...</a>
                    </div>
                </div>                
            </div>

            <!-- Left and right controls -->
            <a class="carousel-control-prev" href="#carouselTecnica" data-slide="prev"><span class="carousel-control-prev-icon"></span></a>
            <a class="carousel-control-next" href="#carouselTecnica" data-slide="next"><span class="carousel-control-next-icon"></span></a>
        </div>
	</section>

	<section class="secciones sIndex" id="sTecnica">
        <div class="container-fluid">
            <div class="row text-center justify-content-around align-items-center">							
                <div class="col-lg-4">
                    <h2 class="sombraCabeceras">ESTILOS</h2>    
                    
                    <img src="img/cabeceras/pexels-sabel-blanco-1544774.jpg" class="img-fluid" alt="Foto de Sabel Blanco en Pexels" title="Foto de Sabel Blanco en Pexels">

                    <div class="botonera mt-4">
                        <a href="estilos.php" class="btn btn-primary">Ver más...</a>
                    </div>
                </div>
                
                <!-- <div class="col-lg-3">
                    <h2 class="sombraCabeceras">POSICIONES</h2>

                    <img src="img/cabeceras/pexels-mikhail-nilov-6740347.jpg" class="img-fluid" alt="Foto de Mikhail Nilov en Pexels" title="Foto de Mikhail Nilov en Pexels">

                    <div class="botonera mt-4">
                        <a href="posiciones.php" class="btn btn-primary">Ver más...</a>
                    </div>
                </div> -->
                
                <div class="col-lg-4">
                    <h2 class="sombraCabeceras">GOLPES</h2>

                    <img src="img/cabeceras/pexels-julia-larson-6456272.jpg" class="img-fluid" alt="Foto de Julia Larson en Pexels" title="Foto de Julia Larson en Pexels">

                    <div class="botonera mt-4">
                        <a href="golpes.php" class="btn btn-primary">Ver más...</a>
                    </div>
                </div>
                
                <div class="col-lg-4">
                    <h2 class="sombraCabeceras">DEFENSA</h2>

                    <img src="img/cabeceras/pexels-cottonbro-4761598.jpg" class="img-fluid" alt="Foto de cottonbro en Pexels" title="Foto de cottonbro en Pexels">

                    <div class="botonera mt-4">
                        <a href="defensa.php" class="btn btn-primary">Ver más...</a>
                    </div>
                </div>                
            </div>
        </div>
	</section>
	<!-- *************************************************************************************************************************************************************** -->

    <!-- SECCIÓN ESTILOS
	<section class="secciones" id="sEstilos">
        <div class="container">
            <div class="row py-3">
                <div class="col-lg-4 my-auto">
                    <img src="img/cabeceras/pexels-sabel-blanco-1544774.jpg" class="img-fluid" alt="Photo by Sabel Blanco from Pexels" title="Photo by Sabel Blanco from Pexels">
                </div>
                
                <div class="col-lg-8 my-auto">
                    <h2 class="sombraCabeceras">ESTILOS</h2>
                    
                    <p>A lo largo de la historia de los estilos de boxeo, las técnicas y estrategias han cambiado en mayor o menor grado. Las condiciones del ring, exigencias de los promotores... <a href="estilos.php">Saber más <i class="fas fa-angle-double-right"></i></a></p>
                </div>
            </div>
        </div>
	</section> -->

    <!-- SECCIÓN POSICIONES -->
    <!-- <section class="secciones" id="sPosiciones">
        <div class="container">
            <div class="row py-3">
                <div class="col-lg-4 my-auto">
                    <img src="img/cabeceras/pexels-mikhail-nilov-6740347.jpg" class="img-fluid" alt="Photo by Mikhail Nilov from Pexels" title="Photo by Mikhail Nilov from Pexels">
                </div>
                
                <div class="col-lg-8 my-auto">
                    <h2 class="sombraCabeceras">POSICIONES</h2>
                    
                    <p><a href="estilos.php">Saber más <i class="fas fa-angle-double-right"></i></a></p>
                </div>
            </div>
        </div>
	</section> -->
	<!-- *************************************************************************************************************************************************************** -->

    <!-- SECCIÓN LEMA 5
	<section class="lemas">
		<div class="container">
            <div class="cita">
                <p>""</p>
    
                <p class="autor">- .</p>
            </div>            
		</div>
	</section>
	************** -->

    <!-- SECCIÓN REDES SOCIALES
    <section class="rrss">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="enlaces my-2 py-0">
                        <a href="#" data-toggle="modal" data-target="#modalContacto" title="Envíanos tu consulta o sugerencia a: info@dieciseiscuerdas.com"><i class="fas fa-envelope"></i></a>

                        <a href="https://www.facebook.com/dieciseiscuerdas" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a>

                        <a href="https://twitter.com/diec16cuerdas" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a>

                        <a href="https://www.youtube.com/channel/UCybjxS5lUGrbAa_Y4YiSINA" target="_blank" title="Youtube"><i class="fab fa-youtube"></i></a>

                        <a href="https://www.instagram.com/diec16cuerdas/" target="_blank" title="Instagram"><i class="fab fa-instagram"></i></a>

                        <a href="https://open.spotify.com/embed/playlist/1N1gpM4miZSgQ32xlphVXg" target="_blank" title="Spotify"><i class="fab fa-spotify"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
	********************** -->

<!-- PIE -->
<footer class="pieInicio">
    <p class="my-3">-- By Migue Cabeza --</p>
</footer>
<!-- *************************************************************************************************************************************************************** -->


<!-- BOTÓN VOLVER ARRIBA -->
<button onclick="topFunction()" id="BtnVolverArriba" title="Volver arriba" class="btn btn-success"><i class="fas fa-angle-up"></i></button>
<!-- *************************************************************************************************************************************************************** -->


<!-- WIDGET SPOTIFY -->
<!-- <iframe id="ifrSpotify" src="https://open.spotify.com/embed/playlist/1N1gpM4miZSgQ32xlphVXg" width="300" height="80" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> -->
<!-- ************** -->

<!-- JQUERY LIBRARY -->
<!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<!-- BOOTSTRAP SCRIPT CDN -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>


<!-- SCROLL REVEAL JS LIBRARY CDN -->
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>

<!-- SCRIPT SCROLLING SUAVE -->
<script>
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();

            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });                
</script>


<!-- SCRIPT BOTÓN VOLVER ARRIBA -->
<script>
    // Get the button
    mybutton = document.getElementById("BtnVolverArriba");

    // When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            mybutton.style.display = "block";
        } else {
            mybutton.style.display = "none";
        }
    }

    // When the user clicks on the button, scroll to the top of the document
    function topFunction() {
        document.body.scrollTop = 0; // For Safari
        document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
    } 
</script>


<!-- SCRIPT MOSTRAR/OCULTAR ÍNDICES -->
<script>
    $(document).ready(function(){
        $(".lstIndice").on("hide.bs.collapse", function(){
            $(".btnIndice").html('<i class="far fa-caret-square-down"></i> Mostrar');
        });
        
        $(".lstIndice").on("show.bs.collapse", function(){
            $(".btnIndice").html('<i class="far fa-caret-square-up"></i> Ocultar');
        });
    });    
</script>
<!-- ****************************** -->


<!-- SCRIPT PARA DEJAR DE MOSTRAR LOS NOMBRES DE LA LEYENDA EN UN H1 CUANDO EL CURSOR NO ESTE ENCIMA DE SU CARD CORRESPONDIENTE -->
<script>
    $(document).ready(function() {
        var texto = $("#pLnombre").text();

        $("#pLeyendas .card").mouseleave(function() {

            $("#pLnombre").text(texto);
        });        
    });
</script>
<!-- ************************************************************************************************************************** -->


<!-- SCRIPT PARA MOSTRAR EL MODAL DE LA FICHA DE LA PELÍCULA -->
<script>
    $(document).ready(function(){
        $('.abrirModalPeliculas').on('click', function() {
            // alert("Prueba");
            var id = $(".abrirModalPeliculas").attr('value');
            $('.pruebaFicha').load('ficha_pelicula_2.php?id=2', function() {
                $('#modalPeliculas').modal({show:true});
            });
        });
    });
</script>
<!-- ******************************************************* -->


<!-- SCRIPT PARA HACER SCROLL REVEAL A LAS SECCIONES DEL INDEX -->
<script>
    window.sr = ScrollReveal();

    sr.reveal('.lemas', {
        duration: 2000,
        origin: 'left',
        distance: '300px',
        viewFactor: 0.2
    });
</script>
<!-- ********************************************************* -->


<!-- SCRIPT PARA ABRIR UNA PÁGINA WEB -->
<!-- https://www.jose-aguilar.com/blog/abrir-popup-con-javascript/ -->
<script type="text/javascript">
    function popUp(URL) {
        /* window.open(URL, 'Nombre de la ventana', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=300,height=200,left = 390,top = 50'); */
        window.open(URL, "", 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=300,height=600,left = 390,top = 50');
    }
</script>
<!-- ******************************** -->


<!-- SCRIPT MOSTRAR/OCULTAR ELEMENTOS EN PÁGINA EQUIPO -->
<script>
    $(document).ready(function(){
        $("#collapseOne").on("hide.bs.collapse", function(){
            $("#aEquipoOne").html('<i class="fas fa-angle-down mr-2"></i>Ropa');
        });
        
        $("#collapseOne").on("show.bs.collapse", function(){
            $("#aEquipoOne").html('<i class="fas fa-angle-up mr-2"></i>Ropa');
        });
		

        $("#collapseTwo").on("hide.bs.collapse", function(){
            $("#aEquipoTwo").html('<i class="fas fa-angle-down mr-2"></i>Equipo de combate');
        });
        
        $("#collapseTwo").on("show.bs.collapse", function(){
            $("#aEquipoTwo").html('<i class="fas fa-angle-up mr-2"></i>Equipo de combate');
        });		

		
        $("#collapseThree").on("hide.bs.collapse", function(){
            $("#aEquipoThree").html('<i class="fas fa-angle-down mr-2"></i>Equipo de entrenamiento');
        });
        
        $("#collapseThree").on("show.bs.collapse", function(){
            $("#aEquipoThree").html('<i class="fas fa-angle-up mr-2"></i>Equipo de entrenamiento');
        });		
		
		
        $("#collapseFour").on("hide.bs.collapse", function(){
            $("#aEquipoFour").html('<i class="fas fa-angle-down mr-2"></i>Equipo de <em>sparring</em>');
        });
        
        $("#collapseFour").on("show.bs.collapse", function(){
            $("#aEquipoFour").html('<i class="fas fa-angle-up mr-2"></i>Equipo de <em>sparring</em>');
        });		
		
		
        $("#collapseFive").on("hide.bs.collapse", function(){
            $("#aEquipoFive").html('<i class="fas fa-angle-down mr-2"></i>Accesorios');
        });
        
        $("#collapseFive").on("show.bs.collapse", function(){
            $("#aEquipoFive").html('<i class="fas fa-angle-up mr-2"></i>Accesorios');
        });				
    });    
</script>
<!-- ************************************************* -->
    <!-- script para cargar los carteles de las veladas
    <script>   
       $(document).ready(function() {
          $("#modalVeladas").modal("show");
       });
    </script> -->

</body>
</html>