<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🇪🇨 Conoce la Bandera del Ecuador</title>

<style>
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #e8f1ff, #fff8d9);
    color: #222;
}

header {
    background: linear-gradient(90deg, #ffd100 33%, #003893 33%, #003893 66%, #ce1126 66%);
    color: white;
    text-align: center;
    padding: 25px;
    text-shadow: 2px 2px 4px #333;
}

header h1 {
    font-size: 30px;
}

nav {
    background: #003893;
    text-align: center;
    padding: 12px;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
}

.contenedor {
    max-width: 1000px;
    margin: auto;
    padding: 25px;
}

.tarjeta {
    background: white;
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.tarjeta h2 {
    color: #003893;
    margin-bottom: 15px;
}

.bandera {
    width: 100%;
    max-width: 600px;
    height: 250px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
}

.amarillo {
    background: #ffd100;
    height: 50%;
}

.azul {
    background: #003893;
    height: 25%;
}

.rojo {
    background: #ce1126;
    height: 25%;
}

.significados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
}

.caja {
    padding: 20px;
    border-radius: 15px;
    color: white;
}

.caja-amarillo {
    background: #e6b800;
}

.caja-azul {
    background: #003893;
}

.caja-rojo {
    background: #ce1126;
}

.audio {
    text-align: center;
    background: linear-gradient(135deg, #003893, #4267b2);
    color: white;
    padding: 25px;
    border-radius: 20px;
}

audio {
    width: 90%;
    margin-top: 15px;
}

footer {
    text-align: center;
    background: #003893;
    color: white;
    padding: 20px;
    margin-top: 20px;
}
</style>
</head>

<body>

<header>
    <h1>🇪🇨 CONOCE LA BANDERA DEL ECUADOR 🇪🇨</h1>
    <p>Historia, colores y símbolos de nuestro país</p>
</header>

<nav>
    <a href="#bandera">Bandera</a>
    <a href="#colores">Colores</a>
    <a href="#himno">Himno</a>
</nav>

<div class="contenedor">

<section class="tarjeta" id="bandera">
    <h2>🇪🇨 La Bandera del Ecuador</h2>

    <p>
        La bandera del Ecuador es uno de los principales símbolos patrios.
        Está formada por tres colores: amarillo, azul y rojo.
    </p>

    <div class="bandera">
        <div class="amarillo"></div>
        <div class="azul"></div>
        <div class="rojo"></div>
    </div>
</section>

<section class="tarjeta" id="colores">
    <h2>🎨 Significado de sus colores</h2>

    <div class="significados">

        <div class="caja caja-amarillo">
            <h3>💛 Amarillo</h3>
            <p>
                Representa el oro, la riqueza y los recursos naturales
                de nuestro país.
            </p>
        </div>

        <div class="caja caja-azul">
            <h3>💙 Azul</h3>
            <p>
                Representa el cielo, el mar y los ríos que forman
                parte de Ecuador.
            </p>
        </div>

        <div class="caja caja-rojo">
            <h3>❤️ Rojo</h3>
            <p>
                Representa la sangre derramada por nuestros héroes
                durante la lucha por la independencia.
            </p>
        </div>

    </div>
</section>

<section class="tarjeta">
    <h2>🦅 Escudo del Ecuador</h2>

    <p>
        El escudo nacional se encuentra en el centro de la bandera.
        Contiene elementos que representan la historia, la naturaleza
        y la identidad del Ecuador.
    </p>

    <p style="font-size:50px;text-align:center;margin-top:15px;">
        🇪🇨
    </p>
</section>

<section class="audio" id="himno">
    <h2>🎵 Himno a la Bandera del Ecuador</h2>

    <p style="margin-top:10px;">
        Escucha nuestro Himno a la Bandera.
    </p>

    <audio controls>
        <source src="Grabación.m4a" type="audio/mpeg">
        Tu navegador no puede reproducir este audio.
    </audio>
</section>

</div>

<footer>
    🇪🇨 Ecuador · Símbolos Patrios 🇪🇨
</footer>

</body>
</html>