body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

#CABECERA {
    text-align: center;
    padding: 10px;
    font-size: 30px;

}

#PANIMAG img {
    width: 300px;
    height: 200px;
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: calc(20.33% - 20px);

}

/* Estilos para el Índice */
#INDICE
ol {
    list-style-type: square;
    padding: 0;
    margin: 0;
}
#INDICE
li {
    margin-bottom: 10px;
}
#INDICE
a {
    text-decoration: none;
    color: #333;
}

/* Estilos para las listas */


/*LISTAS BOLLERIA DE HORNO */
.jf {
    font-size: 24px;
    margin-bottom: 5px;
    list-style-type: square;
}

.jt {
    font-size: 12px;
    margin-bottom: 5px;
    list-style-type: circle;
}

.js {
    font-size: 18px;
    margin-bottom: 5px;
    list-style-type: circle;
}

/*LISTAS BOLLERIA ENVASADA */
.jo {
    font-size: 24px;
    margin-bottom: 5px;
    list-style-type: cjk-ideographic;
}

.ju {
    font-size: 12px;
    margin-bottom: 5px;
    list-style-type: circle;
}

.ja {
    font-size: 18px;
    margin-bottom: 5px;
    list-style-type: circle;
}

/*LISTA BOLLERIA INDUSTRIAL */
.jz {
    font-size: 18px;
    margin-bottom: 5px;
    list-style-type: armenian;
}


/*LISTAS ORDENADAS */
#LISTASO ol {
    font-size: large;
    list-style-type: circle;
    padding: 0;
    margin-top: 10px;
}

#LISTASO ol li {
    list-style-type: circle;
    font-size: 24px;
    margin-bottom: 5px;
}

strong {
    font-weight: bold;
}


/* Estilos para clase de texto 'resaltado' */
.textent  {
    text-decoration: underline;
    color: #d99424;
}

/* Estilos para la tabla de panes */
#TABLAPAN
table {
    margin-left: 50%;
    margin-right: 50%;
    border-collapse: separate;
    border-spacing: 10px;
    width: 100%;
    margin-top: 20px;
    border: 3px salmon;
    background-color:aquamarine;

}
#TABLAPAN
th, td {
    border: 1px solid #f9b754;
    padding: 8px;
    text-align: left;
}
#TABLAPAN
th {
    background-color: #a88888;
}



/* TITULOS*/

/* ÍNDICE*/
.titulos1 {
    font-size: 30px;
    text-align: center;
    color: rgb(59, 96, 190);
    margin-top: 20px;
    border-bottom: 3px solid rgb(136, 15, 180);
}

.titulos2 {

    font-size: 40px;
    text-align: center;
    color: rgb(255, 5, 67);
    margin-top: 20px;
    border-bottom: 3px solid rgb(53, 156, 62);
    border-top: 3px solid rgb(53, 156, 62);

}

.titulos3 {

    font-size: 30px;
    text-align: center;
    color: rgb(227, 174, 0);
    margin-top: 20px;
    border-bottom: 3px solid rgb(4, 64, 133);

}

#ENLACES li > a {

    font-size: 20px;
    text-align: right;
    color: rgb(25, 0, 212);
    margin-top: 20px;

}


/* SORTEO NAVIDAD*/
#TITULOS3 h1 {

    font-size: 60px;
    text-align: center;
    color: rgb(120, 59, 23);
    margin-top: 20px;
    border-top: 3px solid rgb(212, 231, 11);
    border-bottom: 3px solid rgb(212, 231, 11);
}

/*INDICE TIT*/
.indicetit {

    font-size: 60px;
    text-align: center;
    color: rgb(1, 94, 96);
    margin-top: 20px;
    border-bottom: 3px solid rgb(2, 88, 27);
    border-top: 3px solid  rgb(2, 88, 27);
}
/* SECCION*/
.seccion {

    font-size: 60px;
    text-align: center;
    color: rgb(178, 73, 12);
    margin-top: 20px;
    border-bottom: 3px solid rgb(88, 96, 5);
    border-top: 3px solid rgb(88, 96, 5);
}

/* Estilos para la sección de Tartas */

#TARTAS p
{
    font-size: 30px; 
    border-bottom: 4px solid rgb(9, 9, 158); 
}

/* Estilos para los elementos de Tartas */
#ELEMTARTAS
a {
    display: block;
    font-size: 24px;
    text-decoration: none;
    color: inherit;
    text-align: center;
}
#ELEMTARTAS
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#ELEMTARTAS
li {
    font-size: 18px;
}

/* Estilos para la tabla del Menú de Pastelería */
#TABLAPAST 
table {
    margin: auto;
    border-collapse: separate;
    width: 80%;
}

#TABLAPAST 
caption {
    font-size: 24px;
    margin-bottom: 10px;
}

#TABLAPAST 
th, td {
    border: 4px solid rgb(117, 117, 117);
    padding: 10px;
    text-align: center;
}

#TABLAPAST 
th {
    background-color: rgb(134, 153, 231);
    color: rgb(189, 243, 75);
}

#TABLAPAST 
td {
    padding: 8px;
    background-color: #d99424;
}

/* Estilos para la sección "CONÓCENOS" */
#CONOCENOSTIT
p {
    font-size: 40px;
    text-align: center;
    border-bottom: 3px solid rgb(2, 87, 37);
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Estilos para el contenido de "CONÓCENOS" */
#CONOCENOS
p em {
    font-style: italic;
    text-align: justify;
}

/* Estilos para la sección "COMO REALIZAMOS LA FABRICACIÓN DE NUESTROS PANES" */
#FABRIPANES
p {
    font-size: 40px;
    text-align: center;
    border-bottom: 3px solid rgb(2, 87, 37);
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Estilos para el contenido del proceso de fabricación de panes */
#FABRIPANES2
h1 {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

#FABRIPANES3
dl {
    margin-bottom: 20px;
}
#FABRIPANES3
dt {
    font-weight: bold;
    margin-top: 10px;
}
#FABRIPANES3
dd {
    margin-left: 20px;
    margin-bottom: 10px;
}

/* Estilos para el formulario */
#FORMULARIO
form {
    width: 50%;
    margin: 0 auto;
}
#FORMULARIO
ul {
    list-style-type: none;
    padding: 0;
}
#FORMULARIO
li {
    margin-bottom: 15px;
}
#FORMULARIO
label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
#FORMULARIO
input[type="text"],
textarea {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    margin-bottom: 10px;
    background-color: #dcdc65;
}
#FORMULARIO
input[type="submit"] {
    color: rgba(22, 31, 203, 0.642);
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    background-color: #dcdc65;
}
#FORMULARIO
input[type="submit"]:hover {
    background-color: rgb(0, 115, 17);
}

#MENUNAV
nav {
    background-color: #dcdc65;
    padding: 10px;
}
#MENUNAV
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#MENUNAV
nav li {
    display: inline;
    margin-right: 20px;
}
#MENUNAV
nav a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}
#MENUNAV
nav a:hover {
    background-color: #dcdc65;
}


/* Estilos para el formulario */
#FORMULARIO2
form {
    width: 50%;
    margin: 0 auto;
}
#FORMULARIO
ul {
    list-style-type: none;
    padding: 0;
}
#FORMULARIO
li {
    margin-bottom: 15px;
}
#FORMULARIO
label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
#FORMULARIO
input[type="text"],
textarea {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    margin-bottom: 10px;
    background-color: #dcdc65;
}
#FORMULARIO
input[type="submit"] {
    color: rgba(22, 31, 203, 0.642);
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    background-color: #dcdc65;
}
#FORMULARIO
input[type="submit"]:hover {
    background-color: rgb(0, 115, 17);
}

#MENUNAV
nav {
    background-color: #dcdc65;
    padding: 10px;
}
#MENUNAV
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#MENUNAV
nav li {
    display: inline;
    margin-right: 20px;
}
#MENUNAV
nav a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}
#MENUNAV
nav a:hover {
    background-color: #dcdc65;
}

/* Estilo predeterminado para el enlace */
.enlace {
    color: rgb(188, 175, 0); /* Color de texto normal */
    text-decoration: none; /* Quitamos la decoración por defecto (subrayado) */
    transition: color 2s; /* Agregamos una transición para suavizar el cambio de color */
}

/* Cambiamos el color al pasar el mouse sobre el enlace */
.enlace:hover {
    color: rgb(5, 40, 5); /* Nuevo color de texto cuando se pasa el mouse */
}

.enlace2 {
    color: rgb(186, 10, 89); /* Color de texto normal */
    text-decoration: none; /* Quitamos la decoración por defecto (subrayado) */
    transition: color 2s; /* Agregamos una transición para suavizar el cambio de color */
}

/* Cambiamos el color al pasar el mouse sobre el enlace */
.enlace2:hover {
    color: rgb(7, 68, 71); /* Nuevo color de texto cuando se pasa el mouse */
}

/*contenido indice*/
.enlace3 {
    color: rgb(0, 0, 0); /* Color de texto normal */
    text-decoration: none; /* Quitamos la decoración por defecto (subrayado) */
    transition: color 2s; /* Agregamos una transición para suavizar el cambio de color */
}

/* Cambiamos el color al pasar el mouse sobre el enlace */
.enlace3:hover {
    color: rgb(228, 188, 13); /* Nuevo color de texto cuando se pasa el mouse */
}

.enlace4 {
    color: rgb(131, 4, 76); /* Color de texto normal */
    text-decoration: none; /* Quitamos la decoración por defecto (subrayado) */
    transition: color 2s; /* Agregamos una transición para suavizar el cambio de color */
}

.enlace4:hover {
    color: rgb(142, 210, 23); /* Nuevo color de texto cuando se pasa el mouse */
}
