/* --- Reseteo Básico y Variables --- */
:root {
    --primary-color: #0073aa;
    --text-color: #333;
    --background-color: #fff;
    --border-color: #ddd;
    --container-width: 98%; /*1100px Ancho máximo en pantallas grandes */
    --spacing: 1rem;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
    word-wrap: break-word;
}

* {
    box-sizing: border-box;
}

/* --- Layout de una Columna --- */
.container {
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(var(--spacing) * 1.5);
    padding-right: calc(var(--spacing) * 1.5);
}

.site-main {
    padding-top: calc(var(--spacing));
    padding-bottom: calc(var(--spacing) );
}


.editor-styles-wrapper, .entry-content {
  
    text-align: justify;
}
/* --- Tipografía y Contenido --- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin: 1.5em 0 0.5em;
}
h1 { font-size: 2.2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.5rem; }

a {
    color: var(--primary-color);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

/* --- Cabecera (Header) --- */
.site-header {
    background: #f1f1f1;
    border-bottom: 1px solid var(--border-color);
    padding: var(--spacing) 0;
}
.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.site-branding h1 {
    margin: 0;
    font-size: 1.5rem;
}

.site-description {

line-height: 1;
    text-align: left;
    font-size: 16px;
    margin: 0;
    color: slategrey;
}


/* --- Navegación (Mobile First) --- */
.menu-toggle {
    display: block;
    background: white;
    border: 1px solid var(--wp--preset--color--cyan-bluish-gray);
    padding: 8px 12px;
    cursor: pointer;
    font-size: 1rem;
    color: #333;
}

.main-navigation ul {
    display: none; /* Oculto por defecto en móvil */
    list-style: none;
    margin: 0;
    padding: 0;
    background: #ffffff;
    position: absolute;
    top: 130px; /* Ajusta esto según la altura de tu cabecera */
    left: 0;
    width: 100%;
    z-index: 999;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra para mejor separación visual */
}

.main-navigation.toggled ul {
    display: block; /* Muestra el menú cuando está "toggled" (abierto) */
}

.main-navigation li {
    border-bottom: 1px solid #ddd;
    position: relative; /* Importante para posicionar los submenús */
}

.main-navigation li:last-child {
    border-bottom: none; /* Eliminar borde inferior del último elemento */
}

.main-navigation a {
 display: block;
    padding: 0.8em 1em;
    text-decoration: none;
    color: darkslategrey;
    transition: background-color 0.3s ease;
    font-weight: bold;
}

.main-navigation a:hover,
.main-navigation a:focus {
    background-color: #e0e0e0; /* Cambio de color al pasar el ratón o enfocar */
}

/* --- Estilos para Submenús (Mobile First) --- */
.main-navigation ul ul { /* Selecciona los sub-ul */
    position: static; /* En móvil, los submenús se muestran debajo */
    background: #e9e9e9; /* Un color de fondo ligeramente diferente */
    width: 100%;
    box-shadow: none; /* No queremos sombra adicional para los submenús en móvil */
    top: auto;
    left: auto;
    padding-left: 1em; /* Indentación para submenús */
    border-top: 1px solid #ddd;
}

.main-navigation ul ul li {
    border-bottom: 1px solid #ccc;
}

.main-navigation ul ul li:last-child {
    border-bottom: none;
}

/* --- Media Queries para Tablet y Desktop --- */
@media (min-width: 768px) { /* Por ejemplo, para tablets y superiores */
    .menu-toggle {
        display: none; /* Oculta el botón de menú en tablets y desktop */
    }

    .main-navigation ul {
        display: flex; /* Cambia a flexbox para alinear los elementos horizontalmente */
        position: static; /* Vuelve a su posición normal en el flujo del documento */
        width: auto;
        background: none; /* Elimina el fondo para el menú principal en desktop */
        box-shadow: none;
        top: auto;
        left: auto;
        justify-content: flex-end; /* Alinea los elementos a la derecha (o izquierda, según prefieras) */
    }

    .main-navigation.toggled ul {
        display: flex; /* Asegura que se muestre en desktop si aún se aplica toggled */
    }

    .main-navigation li {
        border-bottom: none; /* Elimina el borde inferior en desktop */
        border-right: 1px solid #ddd; /* Añade un borde derecho para separar elementos */
    }

    .main-navigation li:last-child {
        border-right: none; /* Elimina el borde derecho del último elemento */
    }

    .main-navigation a {
        padding: 1em 1.2em; /* Ajusta el padding para desktop */
    }

    /* --- Estilos para Submenús en Desktop --- */
    .main-navigation ul ul {
        display: none; /* Oculto por defecto en desktop */
        position: absolute; /* Posición absoluta para que se superponga */
        top: 100%; /* Se posiciona justo debajo del elemento padre */
        left: 0;
        background: #f9f9f9; /* Fondo diferente para submenús en desktop */
        min-width: 180px; /* Ancho mínimo para los submenús */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        border-top: none; /* Eliminar el borde superior del submenú */
        padding-left: 0; /* Eliminar la indentación */
    }

    .main-navigation li:hover > ul { /* Muestra el submenú al pasar el ratón */
        display: block;
    }

    .main-navigation ul ul li {
        border-bottom: 1px solid #eee;
    }

    .main-navigation ul ul li:last-child {
        border-bottom: none;
    }

    .main-navigation ul ul a {
        padding: 0.6em 1em; /* Ajusta el padding para enlaces de submenú */
        white-space: nowrap; /* Evita que el texto se rompa */
    }
}

/* Media Query para pantallas aún más grandes, si es necesario */
@media (min-width: 1024px) {
    /* Puedes añadir ajustes aquí para pantallas de laptop/escritorio más grandes */
}

/* --- Contenido de Posts --- */
.entry-header { margin-bottom: 1.5em; }
.entry-title { margin: 0; text-align: center;}
.post-thumbnail { margin: 1em 0; text-align:center }

/* --- Pie de Página (Footer) --- */
.site-footer {
    background: #333;
    color: #eee;
    padding: calc(var(--spacing) * 2) 0;
    font-size: 0.9em;
}
.site-footer a { color: #fff; }

.footer-widgets {
    display: grid;
    grid-template-columns: 1fr; /* --- CAMBIO: Simplificado a 1 columna siempre --- */
    gap: 2em;
    margin-bottom: 2em;
}

/* --- Soporte Editor de Bloques --- */
.alignwide {
    margin-left: -50px;
    margin-right: -50px;
    max-width: calc(100% + 100px);
}
.alignfull {
    margin-left: calc(-100vw / 2 + 100% / 2);
    margin-right: calc(-100vw / 2 + 100% / 2);
    max-width: 100vw;
}

/* --- Estilos WooCommerce --- */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: 1fr; /* --- CAMBIO: Simplificado a 1 columna siempre --- */
    gap: 1.5em;
    padding: 0;
}
.woocommerce ul.products li.product {
    list-style: none;
    text-align: center;
    margin-bottom: 2em; /* Añadido para más espacio vertical */
}
.woocommerce .woocommerce-result-count, .woocommerce-ordering {
    margin-bottom: 1.5em;
}

/* --- Estilos para la Zona de Widgets de la Homepage --- */
.homepage-widget-area {
    display: grid;
    grid-template-columns: 1fr; /* --- CAMBIO: Simplificado a 1 columna siempre --- */
    gap: 2em;
    padding-top: 0em;
    padding-bottom: 2em;
}

.homepage-widget {
    background-color: #f9f9f9;
    border: 1px solid var(--border-color);
    padding: 1.5em;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.homepage-widget-title {
    margin-top: 0;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 0.5em;
    margin-bottom: 1em;
}

/* --- Estilos para Shortcodes --- */
.custom-button {
    display: inline-block;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
    border: none;
}
.custom-button.button-primary {
    background-color: var(--primary-color);
    color: #fff;
}
.custom-button.button-primary:hover {
    background-color: #005a87;
    color: #fff;
    text-decoration: none;
}
.custom-button.button-secondary {
    background-color: #333;
    color: #fff;
}
.custom-button.button-secondary:hover {
    background-color: #555;
    color: #fff;
    text-decoration: none;
}
.material-symbols-outlined {
    vertical-align: middle;
}

/* --- Responsive (Media Queries) --- */
/* --- CAMBIO: Eliminadas las media queries que creaban múltiples columnas --- */

/* Desktop */
@media (min-width: 1024px) {
    .menu-toggle {
        display: none; /* Ocultar botón hamburguesa */
    }
    .main-navigation ul {
        display: flex; /* Mostrar menú horizontal */
        position: static;
        width: auto;
        background: none;
    }
    .main-navigation li {
        border: none;
    background: white;
    border-radius: 10px;
    margin: 0.2em;
    font-weight: bold;
    font-family: 'Poppins';
     color: cadetblue;
     
 
    }
	
	
}

/* --- Responsive (Media Queries) --- */

/* Tablet */
@media (min-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas en tablet */
    }
    .footer-widgets {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas en tablet */
    }
	
	
	
}

/* Desktop */
@media (min-width: 1024px) {
    .menu-toggle {
        display: none; /* Ocultar botón hamburguesa */
    }
    .main-navigation ul {
        display: flex; /* Mostrar menú horizontal */
        position: static;
        width: auto;
        background: none;
    }
   .main-navigation li {
               border: none;
    background: white;
    border-radius: 10px;
    margin: 0.2em;
    font-weight: bold;
    font-family: 'Poppins';
     color: cadetblue;
    
 
    }
	
	.main-navigation  li:hover {
	text-decoration:none;
    background: #656565;  
   color: white !important;
    }
	
	.main-navigation  a  { color:cadetblue; }
		.main-navigation  a:hover {
	text-decoration:none;
     
   color: white !important;
    }
	
    .woocommerce ul.products {
        grid-template-columns: repeat(4, 1fr); /* 4 columnas en desktop */
    }
}