/*
Theme Name: Zodiac Theme
Theme URI: 
Author: Valeria Santana Megia
Author URI: https://vsantanamegia.ieti.site/
Description: Elige la ropa que mas te guste.
Tags: 
Version: 1.0
Requires at least: 5.0 
Tested up to: 5.4 Requires 
PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: titoxavio is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others.
*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,body,div,span,applet,
object,iframe,h1,h2,h3,h4,h5,
h6,p,blockquote,pre,a,abbr,acronym,
address,big,cite,code,del,dfn,em,img,
ins,kbd,q,s,samp,small,strike,strong,sub,
sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,
form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,figure,figcaption,footer,
header,hgroup,menu,nav,output,ruby,section,summary,time,mark,
audio,video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,
section {
        display: block;
}

body {
        line-height: 1;
}

ol,ul {
        list-style: none;
}

blockquote,
q {
        quotes: none;
}

blockquote:before,blockquote:after,q:before,
q:after {
        content: '';
        content: none;
}

table {
        border-collapse: collapse;
        border-spacing: 0;
}



/*************************************************************/
/*                      CSS GENERAL                          */
/*************************************************************/
* {
    box-sizing: border-box;
  }
  

/* Importar fuentes de Google */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Lato:wght@400;700&display=swap');

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    color: #d4af37; /* Color dorado para los títulos */
}

html,
body {
    background: #f5e6ab;
}

body {
    color: #5e3a10; /* Color de texto marrón oscuro */
    line-height: 1.6;
    font-family: 'Lato', sans-serif;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

/*************************************************************/
/*                  ESTILOS DE ENLACES                       */
/*************************************************************/

/* Estilos generales para enlaces en el resto del sitio */
a {
    color: #d4af37;
    text-decoration: none;
    margin: 0 10px;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    color: #473908;
}

/*************************************************************/
/*                  ESTILOS DE CONTENEDORES                  */
/*************************************************************/
main, div>header, footer, aside, nav#navigation, body.home section {
    padding: 20px;
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid #d4af37;
    border-radius: 12px;
}

div.container {
    display: flex;
    flex-direction: row;
    padding: 20px 0;
}

div.container main {
    width: 70%;
    padding-right: 20px;
}

div.container aside {
    width: 30%;
    margin-left: 15px;
    padding: 20px;
    box-sizing: border-box;
}

.page-sidebarless {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto;
}


/*************************************************************/
/*                     ESTILO DE HEADER                      */
/*************************************************************/
header {
    padding: -4px 20px;
    text-align: center;
    position: relative;
    /* border-bottom: 3px solid #fff; */
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); */
    color: rgb(0, 0, 0);
}

header h1 {
    font-size: 4rem; /* Aumento del tamaño para mayor impacto */
    letter-spacing: 4px; /* Espaciado de letras más amplio */
    text-transform: uppercase;
    color: #ffcc00; /* Color dorado */
    font-family: 'Georgia', serif;
    text-shadow: 2px 2px 8px rgba(255, 255, 255, 0.2); /* Sombra más suave */
    margin-bottom: 10px; /* Espaciado inferior */
}

header h2 {
    font-size: 1.8rem;
    color: #bbb;
    margin-top: 5px;
    font-style: italic;
}

header .description {
    color: #000;
}


/*************************************************************/
/*                     CABECERA Y LOGO                       */
/*************************************************************/
.site-logo img {
    width: 170px;
    height: auto;
    max-width: 100%;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.site-logo img:hover {
    transform: scale(1.1);
}

.site-branding {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.site-logo {
    margin-right: 20px;
}

.site-title h1 {
    font-size: 2.5rem;
    color: #ffcc00;
    margin: 0;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
}

.site-description {
    font-size: 1.2rem;
    color: #aaa;
    font-style: italic;
}


/*************************************************************/
/*                     ESTILO DE TEXTOS                      */
/*************************************************************/
h1 {
    font-size: 36px;
    font-weight: bold;
    margin: 0;
    background: linear-gradient(45deg, #d4af37, #b77f1b);
    background-clip: text;
    color: transparent;
    padding: 10px 0;
}

h2 {
    font-size: 39px;
    font-weight: bold;
    color: #b77f1b;
    padding: 10px 0;
}

h3 {
    font-size: 28px;
    font-weight: bold;
    color: #9f7a32;
    padding: 10px 0;
}

h4, h5, h6 {
    font-size: 20px;
    font-weight: bold;
    color: #9f7a32;
    padding: 10px 0;
}

code {
    background-color: #f9d5a7;
    border: 1px solid #d1a26d;
    padding: 10px;
}


/*************************************************************/
/*                  NAVEGACIÓN Y MENÚS                       */
/*************************************************************/
/* Barra de navegación general */
nav#navigation {
    background-color: #f8edc0; /* Fondo suave */
    padding: 10px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    border-bottom: 2px solid #d4af37;
}

nav#navigation ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

nav#navigation ul li {
    position: relative;
    margin: 0 5px;  /* Ajusté el margen para evitar espacios innecesarios */
    text-align: center;
}

/* Estilo para los enlaces */
nav#navigation ul li a {
    padding: 12px 18px;
    border: 2px solid #d4af37;
    border-radius: 10px;
    color: #6b4f1d;
    background-color: #f1e1a6;
    font-weight: normal; /* Corregí el font-weight */
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    display: block;  /* Asegura que el enlace sea un bloque y ocupe todo el espacio */
}

/* Estilos cuando se pasa el ratón sobre los enlaces */
nav#navigation ul li a:hover {
    background-color: #d4af37;
    color: moccasin;
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

nav#navigation ul li a:active {
    background-color: #b77f1b;
}


/*************************************************************/
/*                     SECCIÓN PRINCIPAL                     */
/*************************************************************/
article {
    padding: 20px;
    background-color: #fff7e6;
    margin-bottom: 15px;
    border-radius: 30px;
    text-align: center;

}

article h1 {
    font-size: 36px;
    font-weight: bold;
    margin: 0;
    /*background: linear-gradient(45deg, #8b721e, #e99d19);*/
    color: transparent;
    padding: 10px 0;
}

/* Estilos para los párrafos dentro del artículo */
article p {
    font-size: 16px;
    line-height: 1.8;
    color: #5e3a10; /* Texto marrón oscuro */
    margin-bottom: 15px;
}

/* Estilos para listas dentro del artículo */
article ul, article ol {
    margin-left: 20px;
    margin-bottom: 15px;
}

article ul li, article ol li {
    font-size: 16px;
    color: #5e3a10; /* Texto marrón oscuro */
    margin-bottom: 10px;
}

article ul {
    display: grid; /* Usar grid también para las listas dentro del artículo */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Hacer las listas flexibles */
    gap: 20px; /* Espacio entre los elementos de la lista */
    padding: 0;
    margin: 0;
}

/* Estilo para los items dentro de las listas de los artículos */
article ul li {
    background-color: #f9d5a7;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


article img.wp-post-image {
    width: 100%;
    height: auto;
    padding: 10px 0;
}

body.home section ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    padding: 20px;
}

body.home section ul li {
    background-color: #f9d5a7;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    transition: transform 0.3s ease; /* Para el hover */
    border: 1px solid #d4af37;
    background-color: #fff7e6;


}

body.home section ul li:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

body.home section ul li img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    max-height: 280px;
    transition: opacity 0.3s ease;
}

body.home section ul li:hover img {
    opacity: 0.8;
}


/*************************************************************/
/*                ESTILOS ESPECÍFICOS PARA TIENDA            */
/*************************************************************/
/* Estilos generales para la página de la tienda */
.woocommerce-page .entry-content {
    font-family: 'Arial', sans-serif;
    color: #333;
    line-height: 1.6;
}

.woocommerce-page h2.entry-title {
    font-size: 2.5rem;
    color: #d4af37;
    text-align: center;
    margin-bottom: 20px;
}

/* Estilos para la lista de productos usando Flexbox */
.woocommerce-page ul.products {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
}

/* Estilos para los productos */
.woocommerce-page ul.products li.product {
    list-style: none;
    background-color: #ffe0b1;
    border: 2px solid #d4af37;
    border-radius: 10px;
    padding: 10px;
    min-height: 350px;
    flex: 1 1 calc(25% - 20px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.woocommerce-page ul.products li.product:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Estilos para las imágenes */
.woocommerce-page ul.products li.product img {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    max-height: 200px;
}

/* Estilos de botones y precios */
.woocommerce-page ul.products li.product .price {
    font-size: 1.1rem;
    color: #d4af37;
    font-weight: bold;
    margin: 10px 0;
}

.woocommerce-page ul.products li.product .button {
    background-color: #d4af37;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.woocommerce-page ul.products li.product .button:hover {
    background-color: #b77f1b;
}

/*************************************************************/
/*                    FORMULARIOS Y COMENTARIOS              */
/*************************************************************/
/* Estilos para el formulario de búsqueda */
form.searchform {
    width: 100%;
    margin: 0 auto;
    padding: 10px 0;
}

form.searchform div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

form.searchform label {
    display: none;
}

form.searchform input[type="text"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 15px;
    border-radius: 5px;
    border: 2px solid #7e6410;
    font-size: 16px;
    font-family: Arial, sans-serif;
    background-color: #f5e6ab;
    color: #856c3c;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

form.searchform input[type="text"]:focus {
    border-color: #b77f1b;
    box-shadow: 0 0 5px rgba(183, 127, 27, 0.5);
    outline: none;
}

form.searchform input[type="text"]::placeholder {
    color: #9f7a32;
    opacity: 1;
}

form.searchform input[type="submit"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 10px 20px;
    border-radius: 5px;
    border: 2px solid #d4af37;
    background-color: #d4af37;
    color: white;
    font-size: 16px;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    width: 60%;
}

form.searchform input[type="submit"]:hover {
    background-color: #b77f1b;
    border-color: #b77f1b;
    color: white;
}

form.searchform input[type="submit"]:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(183, 127, 27, 0.5);
}

/* Estilos para los comentarios */
.comments-area {
    margin-top: 40px;
    padding: 20px;
    background-color: #d4a76e; /* Dorado suave de fondo */
    border: 1px solid #b07a34; /* Borde dorado oscuro */
}

.comment-list {
    list-style: none;
    padding: 0;
}

.comment {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #ffd699; /* Dorado claro */
    border: 1px solid #b3802b; /* Borde de dorado más oscuro */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
    border-radius: 8px; /* Bordes redondeados */
}

.comment-form {
    margin-top: 30px;
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    margin-top: 8px;
    border-radius: 2px;
    border: 1px solid #d8a65d; /* Dorado pálido */
    background-color: #fff7e6; /* Fondo marfil */
    color: #5e3a10; /* Texto marrón oscuro */
}

.comment-form input[type="submit"] {
    background-color: #c99400; /* Dorado oscuro */
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 8px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.comment-form input[type="submit"]:hover {
    background-color: #8a6400; /* Dorado más intenso para el hover */
}

/*************************************************************/
/*                    PÁGINA 404                             */
/*************************************************************/
.page-404 {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto; /* Centrar contenido si es necesario */
    box-sizing: border-box;
    text-align: center;
    float: none; 
}

.page-404 .site-main {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;

}

.error-404 h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

.error-404 p {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.error-404 .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #aa7400;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

.error-404 .button:hover {
    background-color: #775100;
}


/*************************************************************/
/*                     FOOTER                                */
/*************************************************************/
footer {
    background-color: #f8edc0;
    color: #6b4f1d;
    padding: 20px 0;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
    border-top: 2px solid #d4af37;
    font-size: medium;
}

footer a {
    color: #d4af37;
    text-decoration: none;
    margin: 0 10px;
}

footer a:hover {
    text-decoration: underline;
}



/*************************************************************/
/*         Estilos para el contenedor de los archivos        */
/*************************************************************/
#contenedor {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}

/* Estilo del área principal de contenido */
#contenido {
    width: 100%;
    padding: 20px;
    background-color: #fff7e6; /* Fondo suave */
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Títulos de la categoría actual */
.titulo-de-entrada {
    font-size: 50px;
    font-weight: bold;
    background: linear-gradient(45deg, #d4af37, #b77f1b);
    background-clip: text;
    color: transparent;
    padding: 10px 0;
    text-align: center;
}

/* Estilo de la lista de archivos por mes */
ul.archivos-mes {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

/* Estilo para cada mes */
ul.archivos-mes li {
    background-color: #feebd3;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

ul.archivos-mes li:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Estilo para el formulario de búsqueda */
.archivos-busqueda form.searchform {
    /*display: flex;
    justify-content: center; */
    padding: 16px;
    background-color: #f5e6ab;
    border-radius: 10px;
    width: 39%;
}

.archivos-busqueda input[type="text"] {
    width: 30%;
    margin-right: 10px;
    padding: 10px;
    border-radius: 5px;
    border: 2px solid #7e6410;
    background-color: #fff7e6;
}

.archivos-busqueda input[type="submit"] {
    padding: 10px 20px;
    background-color: #d4af37;
    color: white;
    border-radius: 5px;
    border: none;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.archivos-busqueda input[type="submit"]:hover {
    background-color: #b77f1b;
}

/* Estilo para la lista de categorías */
ul.categories-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

ul.categories-list li {
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Colores dorados para las categorías */

/* Primer tono dorado */
.category-primera-categoria {
    background-color: #d4af37;
    color: #fff;
}

/* Segundo tono dorado */
.category-segunda-categoria {
    background-color: #b77f1b;
    color: #fff;
}

/* Tercer tono dorado */
.category-tercera-categoria {
    background-color: #c9a15c;
    color: #fff;
}

/* Cuarto tono dorado */
.category-cuarta-categoria {
    background-color: #e1c16f;
    color: #fff;
}

/* Quinto tono dorado */
.category-quinta-categoria {
    background-color: #f0d37a;
    color: #fff;
}

/* Efectos al pasar el mouse */
ul.categories-list li:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}