@font-face {

    font-family: 'MilkyVintage-Regular';

    src: url('../fonts/MilkyVintage-Regular.ttf') format('truetype');

}

@font-face {

    font-family: 'Vintage Round';

    src: url('../fonts/Vintage Round PersonalUseOnly.ttf') format('truetype');

}

/* style.css */

body {

    font-family: 'Vintage Round';

    background-color: #F5EEDC; /* Beige suave */

    color: #5A3729; /* Marrón oscuro para el texto */

    margin: 0;

    padding: 0;

}



header {

    background-color: #D2B48C; /* Marrón claro */

    padding: 20px;

    text-align: center;

    border-bottom: 2px solid #ffea98; /* Borde dorado */

    border-radius: 15px;

}



header h1 {

    margin: 0;

    font-size: 3em;

    color: #fcd1c6; /* Rosa pastel */

    text-shadow:

        -4px -4px #5A3729,

         4px -4px #5A3729,

        -4px  4px #5A3729,

         4px  4px #5A3729,

        2px -4px #5A3729,

        2px  4px #5A3729,

        -4px  2px #5A3729,

         4px  2px #5A3729; /* Contorno marrón oscuro */

}



nav {

    background-color: #FFF5EE; /* Blanco rosado */

    padding: 15px;

    text-align: center;

    border-radius: 10px;

}



nav a {

    margin: 0 15px;

    text-decoration: none;

    color: #5A3729; /* Marrón oscuro */

    font-weight: bold;

    font-size: 1.5em;

}



nav a:hover {

    color: #fcd1c6; /* Rosa pastel al pasar el mouse */

}



.contenedor {

    padding: 20px;

    max-width: 800px;

    margin: auto;

    background-color: #FFF8DC; /* Amarillo pastel suave */

    border-radius: 15px;

    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */

}



.contenedor img.destacada {

    width: 100%;

    height: auto;

    border-radius: 15px;

    margin-bottom: 20px;

}



.contenedor h2 {

    color: #FFC19E; /* Rosa pastel */

    border-bottom: 2px solid #ffea98; /* Borde dorado */

    padding-bottom: 10px;

    font-size: 2em;

}



p {

    font-family: 'MilkyVintage-Regular';

    font-size: 30px;

    line-height: 1.6;

    margin-bottom: 20px;

    color: #5A3729; /* Marrón oscuro */

}



.video-container {

    position: relative;

    padding-bottom: 56.25%;

    height: 0;

    overflow: hidden;

    max-width: 100%;

    background: #fff;

    border-radius: 15px;

    margin-bottom: 20px;

    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Sombra suave */

}



.video-container iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border: 0;

}



table {

    width: 100%;

    border-collapse: collapse;

    margin-bottom: 20px;

}



table, th, td {

    border: 1px solid #FFD700; /* Borde dorado */

}



th, td {

    padding: 10px;

    text-align: left;

    color: #5A3729; /* Marrón oscuro */

}



th {

    background-color: #D2B48C; /* Marrón claro */

    color: #FFC19E; /* Rosa pastel */

}



tr:nth-child(even) {

    background-color: #FFF8DC; /* Amarillo pastel suave */

}



/* Estilo para el botón submit */

input[type="submit"] {

    background-color: #D2B48C; /* Marrón claro */

    color: #5A3729; /* Marrón oscuro para el texto */

    border: 2px solid #ffea98; /* Borde dorado */

    border-radius: 10px;

    padding: 10px 20px;

    font-family: 'Vintage Round';

    font-size: 1.2em;

    cursor: pointer;

    transition: background-color 0.3s, color 0.3s;

    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Sombra suave */

}



input[type="submit"]:hover {

    background-color: #FFC19E; /* Rosa pastel */

    color: #FFF8DC; /* Amarillo pastel suave */

}



/* Estilo para select */

select {

    background-color: #FFF8DC; /* Amarillo pastel suave */

    color: #5A3729; /* Marrón oscuro para el texto */

    border: 2px solid #ffea98; /* Borde dorado */

    border-radius: 10px;

    padding: 10px;

    font-family: 'Vintage Round';

    font-size: 1.2em;

    appearance: none; /* Elimina el estilo predeterminado del navegador */

    -webkit-appearance: none; /* Para navegadores basados en WebKit */

    -moz-appearance: none; /* Para Firefox */

    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144"><path fill="%235A3729" d="M43.7 59.7c-2.9-2.9-2.9-7.7 0-10.6L89.4 4.3c2.9-2.9 7.7-2.9 10.6 0s2.9 7.7 0 10.6L59.7 59.7c-2.9 2.9-7.7 2.9-10.6 0z"/></svg>'); /* Flecha personalizada */

    background-repeat: no-repeat;

    background-position: right 10px center;

    background-size: 12px;

}



select:focus {

    outline: none; /* Elimina el contorno predeterminado al enfocar */

    border-color: #FFC19E; /* Rosa pastel al enfocar */

}



/* Estilo para option */

option {

    background-color: #FFF8DC; /* Amarillo pastel suave */

    color: #5A3729; /* Marrón oscuro para el texto */

    font-family: 'Vintage Round';

    font-size: 1.2em;

}



/* Estilo para input */

input[type="text"],

input[type="email"],

input[type="password"],

input[type="number"],

input[type="date"],

textarea {

    background-color: #FFF8DC; /* Amarillo pastel suave */

    color: #5A3729; /* Marrón oscuro para el texto */

    border: 2px solid #ffea98; /* Borde dorado */

    border-radius: 10px;

    padding: 10px;

    font-family: 'Vintage Round';

    font-size: 1.2em;

    width: 100%; /* Asegura que los inputs ocupen todo el ancho disponible */

    box-sizing: border-box; /* Incluye el padding y el borde en el ancho total */

}



input[type="text"]:focus,

input[type="email"]:focus,

input[type="password"]:focus,

input[type="number"]:focus,

input[type="date"]:focus,

textarea:focus {

    outline: none; /* Elimina el contorno predeterminado al enfocar */

    border-color: #FFC19E; /* Rosa pastel al enfocar */

}



/* Estilo para textarea */

textarea {

    resize: vertical; /* Permite redimensionar verticalmente */

    min-height: 100px; /* Altura mínima */

}



/* Estilo para button */

button {

    background-color: #FFF8DC; /* Color salmón */

    color: #5A3729; /* Marrón oscuro para el texto */

    border: 2px solid #ffea98; /* Borde dorado */

    border-radius: 10px;

    padding: 10px 20px;

    font-family: 'Vintage Round';

    font-size: 1.2em;

    cursor: pointer;

    transition: background-color 0.3s, color 0.3s;

    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Sombra suave */

}