/* --- VARIABLES CSS GLOBALES (ESTE ES EL ÚNICO BLOQUE :ROOT) --- */
:root {
    /* Paleta Principal de Tu Arte en Macramé - Morados y Tonos Complementarios */
    --primary-purple: #5A2D5C; /* Morado oscuro vibrante */
    --light-purple: #E6E0F8;    /* Lila muy claro para fondos */
    --accent-yellow: #FFD700;   /* Dorado brillante para acentos */
    --white: #FFFFFF;
    --dark-text: #333333;
    --medium-gray: #666666; /* Gris para textos secundarios */
    --light-gray-bg: #f8f8f8; /* Fondo general del body */
    --border-purple-dark: #3C1C3F; /* Morado aún más oscuro para bordes / CTA títulos */
    --gradient-start-purple: rgba(90, 45, 92, 0.2); /* Morado semi-transparente para gradientes */
    --gradient-end-purple: rgba(90, 45, 92, 0.6);   /* Morado más opaco */

    /* Colores para el Contorno de la Sección "Sobre Nosotros" (ajustados a la paleta morada) */
    --about-us-border-color: var(--primary-purple);
    --about-us-bg-color: var(--white);

    /* Fuentes */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-slogan: 'Caveat', cursive;
}

/* --- ESTILOS GENERALES DEL BODY Y FUENTES --- */
body {
    font-family: var(--font-body); /* Usando la variable de fuente del body */
    margin: 0;
    padding: 0;
    background-color: var(--light-gray-bg); /* Fondo general gris claro para todo el sitio/blog */
    color: var(--dark-text);
    line-height: 1.6;
}

/* Estilos para el contenedor principal de las secciones (en tu caso, <main class="section-container">) */
.section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Estilos para el contenido específico del blog dentro de section-container */
.blog-content {
    background-color: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    padding: 30px;
    margin-bottom: 40px;
}

/* --- ESTILOS ESPECÍFICOS DE LA PÁGINA PRINCIPAL DEL BLOG (index.html) --- */
.blog-section {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.blog-section-logo-container {
    text-align: center;
    margin-bottom: 20px;
    padding-top: 20px;
}

.blog-section-logo {
    max-width: 250px;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.blog-slogan-container {
    margin-bottom: 40px;
    text-align: center;
}

.blog-slogan-container h3 {
    font-family: var(--font-slogan);
    font-size: 3.5em;
    color: var(--primary-purple); /* Ajustado a morado */
    margin-bottom: 5px;
    font-weight: 700;
}

.slogan-line {
    display: block;
    font-size: 1.1em;
    color: var(--dark-text);
    margin-top: 5px;
}

.blog-section h2 {
    font-size: 2.8em;
    color: var(--primary-purple); /* Ajustado a morado */
    margin-bottom: 40px;
    font-weight: 700;
}

/* Contenedor de las tarjetas de blog (usando Flexbox para responsividad) */
.blog-cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

/* Estilos para cada tarjeta de blog */
.blog-post-card {
    background-color: var(--white);
    border: 2px solid var(--primary-purple); /* Borde morado */
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    padding: 25px;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.blog-post-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Contenedor de la imagen y el gradiente */
.blog-image-container {
    position: relative;
    width: 100%;
    max-width: 350px;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid var(--light-purple); /* Borde sutil ajustado a morado claro */
}

.blog-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.blog-image-container:hover img {
    transform: scale(1.05);
}

/* Gradiente sobre la imagen */
.blog-image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Usando las variables de gradiente moradas */
    background: linear-gradient(to bottom, var(--gradient-start-purple), var(--gradient-end-purple));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    border-radius: 10px;
}

.blog-image-container:hover::before {
    opacity: 1;
}

.blog-post-card h3 {
    font-size: 1.8em;
    color: var(--primary-purple); /* Ajustado a morado */
    margin-bottom: 10px;
    font-weight: 600;
    text-align: center;
    width: 100%;
}

.blog-post-card p {
    font-size: 1em;
    color: var(--dark-text);
    text-align: justify;
    margin-bottom: 20px;
    padding: 0 5px;
}

.blog-post-card .btn-read-more {
    background-color: var(--primary-purple); /* Ajustado a morado */
    color: var(--white);
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: auto;
    z-index: 2;
    position: relative;
}

.blog-post-card .btn-read-more:hover {
    background-color: var(--border-purple-dark); /* Morado más oscuro al pasar el ratón */
    transform: translateY(-2px);
}

/* --- ESTILOS ESPECÍFICOS DE LAS PÁGINAS DE ARTÍCULOS INDIVIDUALES --- */

/* Contenedor del logo en la parte superior de la página del artículo */
.page-logo-container {
    text-align: center;
    padding: 30px 0 20px;
    background-color: var(--white);
    border-bottom: 1px solid var(--light-purple); /* Ajustado a morado claro */
    margin-bottom: 20px;
}

.page-logo {
    max-width: 180px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Contenedor principal del artículo */
.article-container {
    max-width: 800px;
    margin: 0 auto 40px;
    background-color: var(--white);
    border: 2px solid var(--primary-purple); /* Ajustado a morado */
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    padding: 40px;
    text-align: left;
    line-height: 1.8; /* Mayor interlineado para lectura en artículos */
}

.article-container h1 {
    font-size: 2.5em;
    color: var(--primary-purple); /* Ajustado a morado */
    margin-bottom: 20px;
    text-align: center;
    font-weight: 700;
}

.article-container img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 25px auto;
    display: block;
    border: 1px solid var(--light-purple); /* Ajustado a morado claro */
}

.article-container h2 {
    font-size: 1.8em;
    color: var(--border-purple-dark); /* Ajustado a morado oscuro para subheadings */
    margin-top: 30px;
    margin-bottom: 15px;
}

.article-container p {
    margin-bottom: 15px;
    text-align: justify;
}

.article-container ul {
    list-style-type: disc;
    margin-left: 25px;
    margin-bottom: 20px;
}

.article-container ul li {
    margin-bottom: 8px;
}

/* --- ESTILOS PARA PIES DE PÁGINA Y BOTONES DE REGRESO --- */
.main-site-return-container {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 30px;
}

.btn-back-to-main-site,
.btn-back-to-blog {
    display: inline-block;
    background-color: var(--primary-purple); /* Fondo morado para mayor visibilidad */
    color: var(--white);
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 30px;
    text-align: center;
}

.btn-back-to-main-site:hover,
.btn-back-to-blog:hover {
    background-color: var(--border-purple-dark); /* Morado más oscuro al pasar el ratón */
    transform: translateY(-2px);
}

footer {
    background-color: var(--primary-purple); /* Fondo morado para el pie de página */
    color: var(--white);
    text-align: center;
    padding: 25px 20px;
    font-size: 0.9em;
    width: 100%;
    box-sizing: border-box;
}

footer p {
    margin: 0 0 10px 0;
}

/* --- Estilos para la sección de Videos --- */
.videos-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin: 60px auto;
    max-width: 1200px;
    padding: 0 20px;
}

.video-item {
    background-color: var(--white);
    border: 2px solid var(--primary-purple); /* Borde morado */
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.video-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--light-purple); /* Ajustado a morado claro */
}

.video-responsive video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-item video::-webkit-media-controls {
    border-radius: 0 0 15px 15px;
}

.video-caption {
    text-align: center;
    padding: 15px 20px;
    font-size: 1.05em;
    color: var(--dark-text);
    line-height: 1.5;
}

/* --- Estilos para la sección "Sobre Nosotros" (ajustados a la paleta) --- */
.about-us-section {
    padding: 40px 20px;
    max-width: 960px;
    margin: 40px auto;
    background-color: var(--about-us-bg-color); /* Usando variable para el fondo blanco */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* Contornos morados y blancos */
.about-us-section::before,
.about-us-section::after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 5px;
    pointer-events: none;
}

/* Contorno morado exterior */
.about-us-section::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-color: var(--about-us-border-color); /* Usando variable para el morado */
    box-sizing: border-box;
}

/* Contorno blanco interior */
.about-us-section::after {
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    border-color: var(--white); /* Fondo blanco */
    box-sizing: border-box;
    z-index: 1;
}

.about-us-container {
    position: relative;
    z-index: 2;
    padding: 20px;
}

.logo-container {
    text-align: center;
    margin-bottom: 30px;
}

.logo {
    max-width: 150px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.about-us-section h1 { /* Ajustado para no chocar con h1 de artículo */
    text-align: center;
    color: var(--primary-purple); /* Ajustado a morado */
    margin-bottom: 25px;
    font-size: 2em;
}

.about-us-section p { /* Ajustado para no chocar con p de artículo */
    margin-bottom: 15px;
    text-align: justify;
}

/* --- ESTILOS GENERALES DEL HEADER Y NAVEGACIÓN (Consolidado) --- */
.main-header {
    background-color: var(--primary-purple);
    color: var(--white);
    padding: 1.5rem 0;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.site-title {
    margin: 0;
    font-size: 2.2em;
    font-weight: 700;
}

.site-title a {
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-title a:hover {
    color: var(--accent-yellow);
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.main-nav li {
    margin: 0 15px;
}

.main-nav a {
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    padding: 5px 0;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    border-bottom: 2px solid transparent;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--accent-yellow);
    border-bottom: 2px solid var(--accent-yellow);
}

/* --- Estilos para la sección de Grid (Piedras) --- */
.section-title {
    text-align: center;
    font-size: 2.5em;
    color: var(--primary-purple); /* Ajustado a morado */
    margin-bottom: 20px;
    padding-top: 30px;
}

.section-description {
    text-align: center;
    font-size: 1.1em;
    color: var(--medium-gray);
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.grid-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
    padding-bottom: 50px;
    border-bottom: 1px solid var(--light-gray-bg);
}

.grid-item {
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    overflow: hidden;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.grid-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid var(--light-gray-bg);
}

.item-title {
    color: var(--primary-purple); /* Ajustado a morado */
    font-size: 1.4em;
    font-weight: 600;
    margin: 15px 10px 10px;
}

.item-description {
    color: var(--dark-text);
    font-size: 0.95em;
    padding: 0 15px 20px;
    text-align: justify;
}

/* --- MEDIA QUERIES PARA RESPONSIVIDAD --- */
@media (min-width: 768px) {
    .blog-post-card {
        width: calc(50% - 30px);
    }
    .page-logo-container {
        padding: 20px 0 15px;
    }
    .page-logo {
        max-width: 150px;
    }
    .article-container {
        margin: 20px auto 40px;
        padding: 30px;
    }
    .article-container h1 {
        font-size: 2.2em;
    }
    .article-container h2 {
        font-size: 1.6em;
    }
    .video-item {
        width: calc(50% - 30px); /* Dos videos por fila, considerando el gap */
    }
    .about-us-section {
        margin: 20px 10px;
        padding: 30px 15px;
    }
    .about-us-section h1 {
        font-size: 1.8em;
    }
}

@media (min-width: 1024px) {
    .blog-post-card {
        width: calc(33.333% - 30px);
    }
    .videos-container {
        padding: 0;
    }
    .video-item {
        width: calc(33.333% - 30px); /* Tres videos por fila, considerando el gap */
    }
}

@media (max-width: 480px) {
    .blog-section h2 {
        font-size: 2em;
    }
    .blog-post-card {
        padding: 20px;
    }
    .blog-post-card h3 {
        font-size: 1.5em;
    }
    .blog-post-card .btn-read-more {
        padding: 10px 20px;
        font-size: 1em;
    }
    .blog-section-logo {
        max-width: 200px;
    }
    .blog-slogan-container h3 {
        font-size: 2.8em;
    }
    .slogan-line {
        font-size: 1em;
    }
    .article-container {
        margin: 20px 15px;
        padding: 20px;
    }
    .article-container h1 {
        font-size: 1.8em;
    }
    .article-container h2 {
        font-size: 1.3em;
    }
    .btn-back-to-main-site,
    .btn-back-to-blog {
        padding: 10px 20px;
        font-size: 1em;
    }
    footer {
        padding: 20px 15px;
    }
    .videos-container {
        gap: 20px;
    }
    .video-item {
        max-width: 100%;
    }
    .video-caption {
        font-size: 1em;
        padding: 10px 15px;
    }
    .about-us-section {
        margin: 15px 5px;
        padding: 20px 10px;
    }
    .about-us-section h1 {
        font-size: 1.5em;
    }
    .logo {
        max-width: 120px;
    }
}
/* --- ESTILOS PARA LA SECCIÓN CTA PERSONALIZADA --- */

.cta-section {
    padding: 80px 20px; /* Aumento el padding para más espacio */
    background: linear-gradient(to bottom, var(--light-purple), var(--white)); /* Fondo suave con gradiente */
    border-radius: 15px;
    margin-top: 60px; /* Espacio superior */
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Sombra más pronunciada */
    position: relative; /* Para posibles efectos visuales futuros */
}

/* Estilos para el logo dentro de la CTA */
.cta-logo-container {
    margin-bottom: 30px; /* Espacio debajo del logo */
}

.cta-logo {
    max-width: 200px; /* Tamaño máximo del logo en esta sección */
    height: auto;
    border-radius: 10px; /* Suaves bordes en el logo */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra para el logo */
}

/* Estilos para el título y descripción de la CTA */
.cta-section .section-title {
    font-size: 3em; /* Título más grande y llamativo */
    color: var(--primary-purple);
    margin-bottom: 25px;
    font-family: var(--font-heading); /* Usando la fuente para encabezados */
}

.cta-section .section-description {
    font-size: 1.2em; /* Descripción más legible */
    color: var(--medium-gray);
    max-width: 900px; /* Ancho máximo para la descripción */
    margin: 0 auto 50px auto; /* Centrado y espacio inferior */
}

/* Contenedor de botones para que estén lado a lado */
.cta-buttons-container {
    display: flex;
    flex-wrap: wrap; /* Permite que los botones salten de línea en pantallas pequeñas */
    justify-content: center;
    gap: 30px; /* Espacio entre los botones */
    margin-top: 40px;
}

/* Estilos para cada botón individual dentro de la CTA */
.cta-buttons-container .btn {
    display: flex; /* Para alinear imagen y texto */
    flex-direction: column; /* Imagen arriba, texto abajo */
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px; /* Más padding interno */
    min-width: 250px; /* Ancho mínimo para los botones */
    max-width: 350px; /* Ancho máximo para los botones */
    height: 250px; /* Altura fija para la tarjeta del botón */
    border-radius: 15px;
    background-color: var(--white); /* Fondo blanco para las tarjetas de botón */
    border: 2px solid var(--primary-purple); /* Borde morado */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    text-decoration: none; /* Quitar subrayado */
    color: var(--primary-purple); /* Color de texto inicial morado */
    font-weight: 700;
    font-size: 1.15em;
}

.cta-buttons-container .btn:hover {
    transform: translateY(-10px); /* Efecto de levantamiento más pronunciado */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
    background-color: var(--light-purple); /* Ligero cambio de fondo al pasar el ratón */
    color: var(--border-purple-dark); /* Color de texto más oscuro al pasar el ratón */
}

/* Estilos para las imágenes dentro de los botones de la CTA */
.cta-buttons-container .btn img {
    max-width: 120px; /* Tamaño de las imágenes dentro de los botones */
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px; /* Espacio entre imagen y texto */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.cta-buttons-container .btn:hover img {
    transform: scale(1.08); /* Pequeño zoom en la imagen al pasar el ratón */
}

/* Estilos para el texto dentro de los botones de la CTA */
.cta-buttons-container .btn span {
    display: block; /* Asegura que el texto esté en su propia línea */
    margin-top: 10px; /* Espacio adicional encima del texto del botón */
    text-transform: uppercase; /* Opcional: para que el texto sea más impactante */
    letter-spacing: 1px;
}


/* --- Media Queries para Responsividad de la sección CTA --- */
@media (max-width: 768px) {
    .cta-section {
        padding: 60px 15px;
    }
    .cta-section .section-title {
        font-size: 2.2em;
    }
    .cta-section .section-description {
        font-size: 1em;
        margin-bottom: 30px;
    }
    .cta-buttons-container {
        flex-direction: column; /* Apilar botones en pantallas más pequeñas */
        gap: 20px;
    }
    .cta-buttons-container .btn {
        width: 90%; /* Ocupar casi todo el ancho disponible */
        min-width: unset; /* Eliminar el min-width para móviles */
        height: auto; /* Altura auto para que se ajuste al contenido */
        padding: 15px;
    }
    .cta-buttons-container .btn img {
        max-width: 100px;
        margin-bottom: 10px;
    }
    .cta-buttons-container .btn span {
        font-size: 1em;
    }
    .cta-logo {
        max-width: 150px; /* Ajuste el tamaño del logo para móviles */
    }
}

@media (max-width: 480px) {
    .cta-section .section-title {
        font-size: 1.8em;
    }
    .cta-buttons-container .btn {
        padding: 10px;
    }
    .cta-buttons-container .btn img {
        max-width: 80px;
    }
    .cta-buttons-container .btn span {
        font-size: 0.9em;
    }
}
/* --- ESTILOS ESPECÍFICOS DE LAS PIEDRAS DE DETALLE (varias-piedras.html) --- */

/* Contenedor principal de la cuadrícula de artículos de piedras */
.piedras-detalle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Columnas responsivas */
    gap: 40px; /* Espacio entre los artículos de piedra */
    padding: 40px 20px; /* Padding interno */
    max-width: 1200px;
    margin: 0 auto;
}

/* Estilos para cada artículo de piedra individual */
.piedra-articulo {
    background-color: var(--white); /* Fondo blanco para el artículo */
    border: 1px solid var(--light-purple); /* Borde sutil */
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* Sombra suave y atractiva */
    overflow: hidden; /* Asegura que la imagen se ajuste al borde redondeado */
    display: flex;
    flex-direction: column; /* Contenido apilado verticalmente */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.piedra-articulo:hover {
    transform: translateY(-8px); /* Efecto de levantamiento al pasar el ratón */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada al pasar el ratón */
}

/* Imagen de la piedra */
.piedra-articulo img {
    width: 100%;
    height: 250px; /* Altura fija para las imágenes */
    object-fit: cover; /* Recorta la imagen para que cubra el área sin distorsionarse */
    border-bottom: 1px solid var(--light-purple); /* Borde sutil debajo de la imagen */
}

/* Contenedor del texto de la piedra */
.piedra-contenido {
    padding: 25px; /* Espaciado interno para el texto */
    flex-grow: 1; /* Permite que el contenido ocupe el espacio restante */
    display: flex;
    flex-direction: column;
}

/* Título de la piedra */
.piedra-titulo {
    font-family: var(--font-heading); /* Usa la fuente de encabezados */
    font-size: 2.2em; /* Tamaño más grande para los títulos de piedra */
    color: var(--primary-purple); /* Morado principal */
    margin-top: 0; /* Elimina margen superior por defecto */
    margin-bottom: 15px; /* Espacio debajo del título */
    text-align: center; /* Centra el título */
    font-weight: 700; /* Negrita más marcada */
    line-height: 1.2;
}

/* Descripción de la piedra */
.piedra-descripcion {
    font-size: 1.05em; /* Ligeramente más grande para mejor lectura */
    color: var(--dark-text); /* Color de texto oscuro para el cuerpo */
    margin-bottom: 20px; /* Espacio debajo de la descripción */
    text-align: justify; /* Texto justificado para una apariencia limpia */
    line-height: 1.7; /* Mayor interlineado para legibilidad */
}

/* Lista de propiedades */
.piedra-propiedades {
    list-style: none; /* Elimina los puntos por defecto de la lista */
    padding: 0; /* Elimina padding por defecto */
    margin-bottom: 0; /* Elimina margen inferior */
    margin-top: auto; /* Empuja la lista hacia abajo si hay espacio */
    border-top: 1px dashed var(--light-purple); /* Línea punteada decorativa */
    padding-top: 20px; /* Espacio encima de la línea punteada */
}

.piedra-propiedades li {
    font-size: 0.95em; /* Tamaño para los ítems de la lista */
    color: var(--medium-gray); /* Gris medio para las propiedades */
    margin-bottom: 10px; /* Espacio entre ítems */
    line-height: 1.5;
}

.piedra-propiedades li:last-child {
    margin-bottom: 0; /* Elimina el margen inferior del último ítem */
}

.piedra-propiedades li strong {
    color: var(--border-purple-dark); /* Color más oscuro para las etiquetas en negrita */
    font-weight: 600; /* Negrita */
}

/* --- Media Queries para Responsividad de los artículos de piedra --- */
@media (max-width: 768px) {
    .piedras-detalle-grid {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
        padding: 30px 15px;
        gap: 30px;
    }
    .piedra-articulo img {
        height: 200px; /* Ajuste la altura de la imagen en móviles */
    }
    .piedra-contenido {
        padding: 20px;
    }
    .piedra-titulo {
        font-size: 1.8em;
        margin-bottom: 10px;
    }
    .piedra-descripcion {
        font-size: 0.95em;
        margin-bottom: 15px;
    }
    .piedra-propiedades {
        padding-top: 15px;
    }
    .piedra-propiedades li {
        font-size: 0.9em;
        margin-bottom: 8px;
    }
}
/* --- ESTILOS DEL LOGO EN EL HEADER --- */
.site-title {
    display: flex; /* Para que el logo y el texto estén en la misma línea */
    align-items: center; /* Centra verticalmente el logo y el texto */
    justify-content: center; /* Centra horizontalmente el logo y el texto si no hay nav */
    gap: 15px; /* Espacio entre el logo y el texto */
    margin: 0; /* Asegura que no haya márgenes no deseados */
    font-size: 2.2em; /* Mantén el tamaño de fuente del título si el texto sigue siendo importante */
    font-weight: 700;
}

.site-title a {
    display: flex; /* También aplica flex al enlace para alinear el logo y el texto */
    align-items: center;
    gap: 15px; /* Mantiene el espacio entre logo y texto dentro del enlace */
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.header-logo {
    max-width: 60px; /* Tamaño máximo para tu logo en el header */
    height: auto;
    border-radius: 50%; /* Opcional: si quieres que tu logo sea redondo */
    /* box-shadow: 0 0 8px rgba(0,0,0,0.2); Opcional: una pequeña sombra al logo */
}

/* Ajustes para la navegación cuando el logo está presente */
.main-nav ul {
    margin-top: 15px; /* Da un poco de espacio entre el título/logo y la navegación */
}

/* Media Query para pantallas más pequeñas */
@media (max-width: 768px) {
    .site-title {
        flex-direction: column; /* Apila el logo y el texto en pantallas pequeñas */
        gap: 5px;
        font-size: 1.8em; /* Reduce el tamaño del título en móviles */
    }
    .site-title a {
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }
    .header-logo {
        max-width: 50px; /* Reduce un poco el tamaño del logo en móviles */
    }
}

@media (max-width: 480px) {
    .site-title {
        font-size: 1.5em; /* Aún más pequeño en móviles muy pequeños */
    }
    .header-logo {
        max-width: 40px;
    }
}
/* --- ESTILOS PARA LA PÁGINA DE HISTORIA DEL MACRAMÉ (macrame.html) --- */
.history-section {
padding: 40px 20px;
max-width: 1000px;
margin: 0 auto;
}

.history-article {
margin-bottom: 50px;
}

.history-article:last-child {
margin-bottom: 0;
}

.history-subtitle {
font-family: var(--font-heading);
font-size: 1.8em;
color: var(--border-purple-dark);
margin-bottom: 10px;
}

.history-paragraph {
font-size: 1.1em;
color: var(--dark-text);
line-height: 1.7;
text-align: justify;
margin-bottom: 15px;
}

.history-image {
max-width: 80%;
height: auto;
display: block;
margin: 20px auto;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border: 1px solid var(--light-purple);
}

/* Media Queries para la página de historia */
@media (max-width: 768px) {
.history-section {
padding: 30px 15px;
}
.history-subtitle {
font-size: 1.5em;
}
.history-paragraph {
font-size: 1em;
}
.history-image {
max-width: 100%;
}
}
/* Agrega esta nueva regla a tu styles_blog.css */
main {
    max-width: 1200px; /* Este es el ancho máximo que quieres para todo el contenido principal */
    margin: 0 auto; /* ¡Esto centrará la etiqueta <main> y todo su contenido! */
    padding: 20px; /* Añade un poco de relleno a los lados para que el contenido no toque los bordes de la pantalla */
    box-sizing: border-box; /* Es importante para que el padding no aumente el ancho total */
}

/* También, por consistencia, asegúrate de tener el reset de box-sizing al principio del CSS si no lo tienes: */
html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}
/* --- ESTILOS GENERALES DEL CONTENEDOR PRINCIPAL --- */
main {
    max-width: 1200px; /* Ancho máximo para el contenido de tu página */
    margin: 0 auto;    /* Centra el contenido horizontalmente */
    padding: 20px;     /* Relleno interno para los lados */
    box-sizing: border-box; /* Asegura que el padding no aumente el ancho total */
}

/* --- ESTILOS DEL ENCABEZADO DEL BLOG --- */
.blog-header {
    background-color: var(--light-gray-bg); /* Fondo del encabezado. Usa tus variables de color. */
    padding: 20px 0; /* Relleno superior e inferior */
    border-bottom: 1px solid var(--border-color); /* Línea divisoria inferior */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil para un efecto 3D */
}

.blog-header .container {
    display: flex; /* Habilita Flexbox para alinear elementos */
    justify-content: space-between; /* Espacia el logo a la izquierda y la nav a la derecha */
    align-items: center; /* Centra verticalmente los elementos */
    max-width: 1200px; /* Asegura que el contenido del header también se centre si el header es más ancho */
    margin: 0 auto;
    padding: 0 20px; /* Relleno a los lados dentro del contenedor del header */
}

/* --- ESTILOS DEL LOGO EN EL ENCABEZADO DEL BLOG --- */
.blog-logo a {
    display: inline-block; /* Para que el enlace se comporte como un bloque y el logo sea manejable */
    line-height: 0; /* Elimina espacio extra debajo de la imagen si lo hay */
}

.blog-header-logo {
    max-height: 50px; /* **Altura máxima del logo en el encabezado. ¡Ajusta este valor!** */
    width: auto; /* Mantiene la proporción del logo */
    border-radius: 50%; /* Opcional: hace el logo redondo */
    transition: transform 0.3s ease; /* Pequeña animación al pasar el ratón */
}

.blog-header-logo:hover {
    transform: scale(1.05); /* El logo se agranda un poco al pasar el ratón */
}

/* --- ESTILOS DE LA NAVEGACIÓN DEL BLOG --- */
.blog-nav ul {
    list-style: none; /* Elimina los puntos de la lista */
    padding: 0;
    margin: 0;
    display: flex; /* Habilita Flexbox para los elementos de la lista */
    gap: 20px; /* Espacio entre los elementos del menú */
}

.blog-nav a {
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    color: var(--dark-text); /* Color del texto de los enlaces. Usa tus variables de color. */
    font-weight: bold; /* Texto en negrita */
    transition: color 0.3s ease; /* Animación de color al pasar el ratón */
}

.blog-nav a:hover {
    color: var(--primary-color); /* Color de los enlaces al pasar el ratón. Usa tus variables. */
}

/* --- ADAPTABILIDAD (MEDIA QUERIES) --- */
@media (max-width: 768px) {
    .blog-header .container {
        flex-direction: column; /* Apila el logo y la navegación en pantallas pequeñas */
        text-align: center;
        gap: 15px; /* Espacio entre el logo y la nav apilados */
    }

    .blog-nav ul {
        flex-direction: column; /* Apila los elementos del menú */
        gap: 10px;
    }

    .blog-header-logo {
        max-height: 40px; /* Ajusta el tamaño del logo en móviles */
    }
}

@media (max-width: 480px) {
    .blog-header-logo {
        max-height: 35px; /* Más pequeño en pantallas muy pequeñas */
    }
    .blog-nav a {
        font-size: 0.9em; /* Texto de navegación ligeramente más pequeño */
    }
}