@import "fonts.css";
@import "base.css";
@import "header-footer.css";
@import "bricks.css";

/*------------------------*/
/* theme colors
/*------------------------*/

:root {
    --textDarker: #1e282d;
    --textDark: rgba(38, 50, 56, 1);
    --textMedium: #3a3a3a;
    --borderMedium: rgba(38, 50, 56, 1); 
    --borderLight: rgba(38, 50, 56, 0.3);
    --accent: #f3353e;
    --accentDarker: rgb(49, 55, 74);
    --accentHover: #fd5c5c;
    --accentDarkerHover: rgb(84, 90, 110);
    --light: rgba(38, 50, 56, 0.035);
}
/*------------------------*/
/* turn grayscale off
/*------------------------*/

img {filter: grayscale(0);}

/*------------------------*/
/* colorize_image
/*------------------------*/

.colorize_image {filter: contrast(1) sepia(1) hue-rotate(160deg) grayscale(0.8)!important;}

/*------------------------*/
/* black_2_textDark
/*------------------------*/

.map:not(section)::after, .black_2_textDark {filter: contrast(0.7) sepia(1) hue-rotate(160deg)!important;}

/*------------------------*/
/* black_2_textMedium
/*------------------------*/

.black_2_textMedium {filter: contrast(0.3) sepia(0.3) hue-rotate(160deg) brightness(1.4)!important;}

/*------------------------*/
/* black_2_accent
/*------------------------*/

.black_2_accent {filter: contrast(0.11) sepia(1) hue-rotate(340deg) contrast(13)!important;}


/*------------------------ CSS overrides below ------------------------*/

html {line-height: 1.5}

.text-gradient-light {
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(93deg,#d50711, #fd5c5c);
    background-clip: text;
}

.text-gradient-dark {
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(93deg,#6368a0,#0b89bb);
    background-clip: text;
}

.text-gradient-gray {
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(93deg,#43454f,#787e96);
    background-clip: text;
}
.button, button {
    font-weight: 400;
    border-radius: 0.3rem;
    transition: all .3s;
    font-size: 0.9rem;
}
 
h1, h2 {letter-spacing: -.03em;font-weight: 600;}

ul.tabs li a {
    font-weight: 600;
    letter-spacing: -.03em;
}

footer ul li {
    font-size: 0.8rem;
    line-height: 1.0rem;
}

.button.secondary {background: var(--accentDarker);}
.button.smaller,.button.smaller2 {
    background: white; 
    color: var(--textMedium);
    border: 1.2px solid var(--borderLight);
    font-family: 'Figtree', serif !important;
}
@media (min-width: 600px) {
    .button:hover {
        transform: scale(1.0);
        background: var(--accentHover);
        }
    .button.secondary:hover {
        transform: scale(1.0);
        background: var(--accentDarkerHover);
        }
    .button.smaller:hover,.button.smaller2:hover {
        transform: scale(1.0);
        background: white;
        border: 1.2px solid var(--borderMedium);
        }
    }
    
p {
    font-size: 1.25em;
    line-height: 1.3;
}

section .container.small {max-width: 60rem;}

.tabs_container .twocols {
    margin-bottom: 0rem;
    padding: 0;
}

.tabs_container p {
    margin-bottom: 1.0em;
}

.image p {
    margin-bottom: 1.2em;
}

section.image {
    padding: 0.5rem 0 5rem;
}

ul.reviews li div.box .customers {display: flex; gap: 0.25rem; margin: 0 0 1.5rem;}
ul.reviews li div.box .customers img {height: 3rem;}

section.cta .twocols {padding: 2.5rem clamp(2rem, 5vw, 5rem)}

.big_font_size {
    font-size: 5em;
    line-height: 0.1em;
}


.eev-menu-icon {
    height: 16px !important; vertical-align:middle; display: inline;
}

body.mobilemenu.menushown header .navnav > ul > li > ul > li > a > img.eev-menu-icon {
    filter: invert(2);
}

section.intro img {width: 100%;}


.eevid-footer-grid {
    flex-shrink: 0 !important;
    flex-grow: 1 !important;
    display: grid !important;
    grid-template-columns: 200px 200px 200px;
    gap: 10px;
    align-items: start !important;
    gap: 5px;
    padding-bottom: 0px;
}

@media only screen and (max-width: 600px) {
    .eevid-footer-grid {
        grid-template-columns: 115px 115px 115px;
    }
}

.eevid-success-avatar * img {
    max-width: 300px;
}

/*------------------------*/
/* Blog
/*------------------------*/

/* Prevent flash on page load */
.contentitems.grid.posts {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contentitems.grid.posts.loaded {
    opacity: 1;
}

section.docs h2, .container.post h2, h3 {font-family: 'Merriweather'; font-size: 1.5rem; color: #43454f; line-height: 1.25; margin-bottom: 0.4rem; padding-top: 1.5rem; font-weight: regular;}

/* Post title link styling */
.post-title-link {
    color: #43454f !important; /* Red color matching your accent */
    text-decoration: none;
    transition: color 0.3s ease;
}

.post-title-link:hover {
    color: #fd5c5c !important; /* Lighter red on hover */
    text-decoration: none;
}

/* Override rounded corners for post images */
section.posts .grid .item .img {
    border-radius: 0 !important; /* Remove rounded corners */
    overflow: hidden; /* Important for zoom effect */
    width: 100%;
    aspect-ratio: 1 / 1; /* Forzar contenedor cuadrado */
    position: relative; /* Para posicionamiento absoluto de la imagen */
}

/* Zoom effect on hover for post images */
section.posts .grid .item .img img {
    transition: transform 0.3s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recortar la imagen para mantener proporción cuadrada */
}

section.posts .grid .item .img:hover img {
    transform: scale(1.2); /* Zoom 20% on hover */
}

/* Blog header and filter container */
.blog-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Changed from flex-start to center for better alignment */
    margin-bottom: 2rem;
    padding: 2rem 0 1rem 0;
}

/* Grid de posts con líneas alineadas */
section.posts .grid {
    display: grid;
    gap: 8rem; /* Espacio vertical entre filas */
    column-gap: 2.5rem; /* 40px entre columnas */
    max-width: 100%;
}

/* Contenedor de cada item del post */
section.posts .grid .item {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Línea gris debajo de cada item */
section.posts .grid .item::after {
    content: '';
    position: absolute;
    bottom: -1rem; /* Alineado con el gap del grid */
    left: 0;
    right: 0;
    height: 1px;
    background-color: #888; /* Color más oscuro */
}

/* Padding por encima de la línea para separar del contenido */
section.posts .grid .item {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 1.5rem; /* Espacio entre el contenido y la línea */
}

/* Clases para diferentes configuraciones de grid */
section.posts .grid.grid-1-col {
    grid-template-columns: 1fr;
}

section.posts .grid.grid-2-col {
    grid-template-columns: repeat(2, 1fr);
}

section.posts .grid.grid-3-col {
    grid-template-columns: repeat(3, 1fr);
}

section.posts .grid.grid-4-col {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive breakpoints */
@media (min-width: 1000px) {
    section.posts .grid {
        grid-template-columns: repeat(4, 1fr) !important; /* 4 columnas en desktop normal */
    }
}

@media (min-width: 800px) and (max-width: 999px) {
    section.posts .grid {
        grid-template-columns: repeat(3, 1fr) !important; /* 3 columnas cuando imagen es ~50% */
    }
}

@media (min-width: 600px) and (max-width: 799px) {
    section.posts .grid {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columnas */
    }
}

@media (max-width: 599px) {
    section.posts .grid {
        grid-template-columns: 1fr !important; /* 1 columna en mobile */
    }
}

/* Las imágenes ya son cuadradas por el contenedor, no necesitamos max-width */
/* Mantener solo el estilo para mobile donde ocupamos todo el ancho */
@media (max-width: 599px) {
    section.posts .grid .img {
        width: 100%; /* En 1 columna, ocupar todo el ancho disponible */
    }
    
    section.posts .grid .img img {
        width: 100%; /* En 1 columna, ocupar todo el ancho disponible */
    }
}

/* Post destacado - Ocupa toda la fila con layout especial */
.post-featured {
    grid-column: 1 / -1 !important; /* Ocupa toda la fila */
    display: grid !important;
    grid-template-columns: 3fr 4fr !important; /* 2 columnas: imagen (43%) + contenido (57%) */
    gap: 2rem !important;
    align-items: center !important; /* Centrar verticalmente el contenido */
}

/* Forzar ocultación de posts con display: none */
.post-featured[style*="display: none"],
.post-featured[style*="display:none"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.post-featured .img {
    grid-column: 1 !important; /* Primera columna (2 columnas del grid principal) */
    width: 100% !important;
    max-width: none !important; /* Sobrescribir max-width del grid normal */
}

.post-featured .img img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important; /* Mantener proporción 1:1 (cuadrada) */
    object-fit: cover !important;
    max-width: none !important; /* Sobrescribir max-width del grid normal */
}

.post-featured .post-content-wrapper {
    grid-column: 2 !important; /* Segunda columna (2 columnas del grid principal) */
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    padding-left: 1rem !important; /* Espacio adicional para separar del contenido */
}

/* Título del post destacado - Tamaño y estilo específicos */
.post-featured .post-title-link {
    font-size: 3.0rem !important; /* Título más grande que el normal */
    line-height: 1.2 !important; /* Line-height ajustado para título grande */
    font-weight: 600 !important; /* Más peso visual */
    color: var(--textDark) !important; /* Color más oscuro para destacar */
}

/* Título responsive del post destacado */
@media (max-width: 1199px) {
    .post-featured .post-title-link {
        font-size: 2.5rem !important; /* Reducir en pantallas medianas */
    }
}

@media (max-width: 999px) {
    .post-featured .post-title-link {
        font-size: 2.0rem !important; /* Reducir más en tablet */
    }
}

@media (max-width: 799px) {
    .post-featured .post-title-link {
        font-size: 1.8rem !important; /* Reducir en pantallas pequeñas */
    }
}

/* En mobile, el post destacado se comporta como los demás */
@media (max-width: 599px) {
    .post-featured {
        grid-template-columns: 1fr !important; /* Vuelve a 1 columna */
        gap: 1rem !important;
        grid-column: 1 / -1 !important; /* Mantener ancho completo */
    }
    
    .post-featured .img {
        grid-column: 1 !important;
        width: 100% !important;
    }
    
    .post-featured .img img {
        width: 100% !important;
        aspect-ratio: 1 / 1 !important; /* Mantener proporción cuadrada */
    }
    
    .post-featured .post-content-wrapper {
        grid-column: 1 !important;
        padding-left: 0 !important; /* Quitar padding en mobile */
    }
    
    /* Título más pequeño en mobile */
    .post-featured .post-title-link {
        font-size: 1.6rem !important; /* Mismo tamaño que posts normales */
        line-height: 1.2 !important;
    }
}

.blog-header {
    text-align: left;
}

.blog-header h1 {
    font-family: 'Figtree', serif;
    font-size: 3.0rem;
    font-weight: 700;
    color: var(--textDark);
    margin: 0;
    line-height: 1.2;
}

.blog-header p {
    font-family: 'Merriweather', serif;
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--textMedium);
    margin: 0;
    line-height: 1.6;
}

/* Filter styling */
.filter {
    text-align: right !important;
    margin-left: 2rem !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    display: flex !important;
    align-items: center !important; /* Added for vertical centering */
}

/* Desktop/Mobile visibility classes */
.desktop-only {
    display: flex;
}

.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
    
    .mobile-only {
        display: block !important;
    }
}

/* Category links styling */
.category-links {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.category-link {
    color: var(--textMedium);
    text-decoration: none;
    padding: 0.3rem 0.8rem;
    border-radius: 1.5rem;
    background: var(--light);
    transition: all 0.3s ease;
    font-size: 0.9rem;
    border: 1px solid transparent;
}

.category-link:hover {
    background: var(--accent);
    color: white;
    text-decoration: none;
}

.category-link.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* Post category links styling */
.category-filter-link {
    text-decoration: none;
    color: inherit;
    transition: border-bottom 0.2s ease;
    padding-bottom: 1px;
    border-bottom: 1px solid transparent;
}

.category-filter-link:hover {
    border-bottom: 1px solid #286fb6;
}

/* Enlaces en contenido de posts individuales - solo en brick_post.html */
.post-content a {
    color: inherit;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.post-content a:hover {
    color: #fd5c5c !important;
    text-decoration: underline;
}

/* Responsive design for mobile devices */
@media (max-width: 768px) {
    .blog-header-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    
    .filter {
        text-align: left !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 0 !important;
    }
    
    .blog-header h1 {
        font-size: 2rem;
    }
}



/* Post categories styling */
.post-categories {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
}

.category-tag {
    color: #286fb6;
    font-size: 1.0rem;
    font-weight: 400;
    margin-right: 1rem;
    font-family: 'Figtree', serif;
    text-transform: none;
}

/* Post summary styling with Merriweather font */
.post-summary {
    font-family: 'Merriweather', serif !important;
    font-weight: 300 !important;
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    color: var(--textMedium) !important;
}

/* Sobrescribir estilos globales de p para el blog */
.post-summary p,
.post-content p {
    font-size: 1.1rem !important;  /* Sobrescribir el 1.25em global */
    line-height: 1.6 !important;   /* Sobrescribir el 1.3 global */
    font-family: 'Merriweather', serif !important;
    font-weight: 300 !important;
}

/* Estilos para listas con viñetas (bullet points) en posts */
.post-content ul,
.post-content ol {
    font-family: 'Merriweather', serif !important;
    font-weight: 300 !important;
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    color: var(--textMedium) !important;
    margin: 1.5rem 0 !important;
    padding-left: 2.5rem !important;
}

.post-content ul li,
.post-content ol li {
    font-family: 'Merriweather', serif !important;
    font-weight: 300 !important;
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    color: var(--textMedium) !important;
    margin-bottom: 0.5rem !important;
}

.post-content ul li:last-child,
.post-content ol li:last-child {
    margin-bottom: 0 !important;
}

/* Estilos específicos para brick_posts (listado) */
section.posts .post-summary p {
    font-size: 1.1rem !important;
    line-height: 1.7 !important;  /* Incrementado de 1.5 a 1.7 */
    font-family: 'Merriweather', serif !important;
    font-weight: 300 !important;
    margin-top: 1rem !important;  /* Añadir distancia con el título */
}

/*------------------------*/
/* Pagination
/*------------------------*/

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
    margin-bottom: 2rem;
}

.pagination-numbers {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.pagination-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.3rem;
    background: var(--light);
    color: var(--textMedium);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.pagination-number:hover {
    background: var(--accent);
    color: white;
    text-decoration: none;
}

.pagination-current {
    background: var(--accent) !important;
    color: white !important;
    border-color: var(--accent) !important;
}

.pagination-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.3rem;
    background: var(--light);
    color: var(--textMedium);
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.pagination-arrow:hover {
    background: var(--accent);
    color: white;
    text-decoration: none;
}

/* Mobile responsive pagination */
@media (max-width: 768px) {
    .pagination {
        gap: 0.5rem;
    }
    
    .pagination-numbers {
        gap: 0.25rem;
    }
    
    .pagination-number,
    .pagination-arrow {
        width: 2rem;
        height: 2rem;
        font-size: 0.9rem;
    }
    
    .pagination-arrow {
        font-size: 1rem;
    }
}

/* Pagination ellipsis */
.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    margin: 0 0.25rem;
    color: #666;
    font-weight: 500;
    cursor: default;
}

/* Responsive pagination adjustments */
@media (max-width: 768px) {
    .pagination {
        gap: 0.25rem;
    }
    
    .pagination-number,
    .pagination-arrow {
        min-width: 1.75rem;
        height: 1.75rem;
        font-size: 0.875rem;
    }
    
    .pagination-ellipsis {
        min-width: 1.75rem;
        height: 1.75rem;
        font-size: 0.875rem;
    }
}

/*------------------------*/
/* Header spacing override
/*------------------------*/

header + section:not(.bgimage) {
    padding-top: 8rem !important; /* Reduced from 11rem to 8rem */
}

/* Mobile responsive padding adjustment */
@media (max-width: 768px) {
    header + section:not(.bgimage) {
        padding-top: 5rem !important; /* Reduced padding for mobile devices */
    }
}

/* Mobile select styling */
.mobile-only select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
    font-size: 1rem;
    cursor: pointer;
}

.mobile-only select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Ensure mobile select is properly hidden on desktop */
@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}

/* Ensure desktop links are hidden on mobile */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
}

/* Post layout - Two columns */
.post-layout {
    display: grid;
    grid-template-columns: 3fr 4fr;
    gap: 3rem;
    max-width: 84rem;
    margin: 0 auto;
    padding: 2rem clamp(1rem,4vw,3rem) 0 clamp(1rem,4vw,3rem);
}

/* Post content layout - Ocupa todo el ancho del navbar */
.post-content-layout {
    grid-template-columns: 1fr;  /* Una sola columna */
    gap: 0;
    padding-top: 2rem;  /* Espacio arriba del contenido */
}

.post-left-column {
    position: relative;
}

.post-image-container {
    position: relative;
    height: 0;
    padding-bottom: 100%; /* 1:1 aspect ratio */
    overflow: hidden;
    border-radius: 0;
    margin-bottom: 0;
}

.post-featured-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Floating index */
.floating-index {
    position: absolute;
    top: 300px;
    left: 44px;
    right: 52px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    width: auto;
    max-width: 360px;
    height: auto;
    max-height: none;
    overflow: visible;
    transform: translateY(0);
    transition: transform 0.3s ease;
    z-index: 5;
    display: block;
}

.floating-index.fixed {
    position: fixed !important;
    top: 120px !important;
    max-height: calc(100vh - 140px) !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    z-index: 5 !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    padding: 1.5rem !important;
}

.floating-index.fixed-bottom {
    position: absolute;
    bottom: 20px;
    top: auto;
    left: 44px;
    right: 52px;
    width: auto;
    max-width: 400px;
    max-height: none;
    overflow: visible;
}

.index-content h2 {
    margin: 0 0 0.75rem 0;
    font-family: 'Figtree', serif !important;
    text-transform: uppercase;
    font-size: 1.0rem;
    font-weight: 600;
    color: #333;
    padding-top: 0px;
    padding-bottom: 10px;
    border-bottom: 1px solid #d8d8d8;
}

.index-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.index-list li {
    margin-bottom: 0.25rem;
}

.index-list li:last-child {
    margin-bottom: 0;
}

.index-list a {
    display: block;
    padding: 0.25rem 0;
    color: #666;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
    border-left: 2px solid transparent;
    padding-left: 0.2rem;
}

.index-list a:hover {
    color: #286fb6;
    border-left-color: #286fb6;
}

.index-list a.active {
    color: #286fb6;
    border-left-color: #286fb6;
    font-weight: 500;
}

/* Right column */
.post-right-column {
    padding: 0;
}

.post-metadata {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.post-categories {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.post-author {
    color: #666;
    font-size: 0.9rem;
    margin-top: 1.5rem;
    margin-bottom: -0.8rem;  /* Espacio mínimo como un <br> */
    font-weight: 300;
}

.post-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    font-size: 0.9rem;
}

.post-date img {
    width: 16px;
    height: 16px;
}

.post-title {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    color: #333;
    font-family: 'Figtree', serif;
}

/* Título del post en el listado - misma fuente que post individual */
.post-title-link {
    font-family: 'Figtree', serif !important;
    font-weight: 600;
    font-size: 1.6rem !important;  /* Mismo tamaño que post individual */
    line-height: 1.2 !important;   /* Mismo line-height que post individual */
    color: #43454f;
    text-decoration: none;
    transition: color 0.3s ease;
}

.post-title-link:hover {
    color: #fd5c5c !important;
    text-decoration: none;
}

.post-content h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    scroll-margin-top: 2rem;
}

.post-content h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.1rem; /* Mismo tamaño que el texto general del post */
    font-weight: 600; /* Peso superior al texto normal */
    color: #333;
    font-family: 'Merriweather', serif;
    line-height: 1.6;
}

/* Estilos para tablas en posts */
.post-content table,
.post-table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.post-content table th,
.post-content table td,
.post-table th,
.post-table td {
    padding: 1rem 1.5rem;
    text-align: left;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-family: 'Merriweather', serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--textMedium);
}

.post-content table th,
.post-table th {
    font-weight: 600;
    background: rgba(255, 255, 255, 0.7);
    color: var(--textDarker);
}

/* Clase para filas con estilo de título - base eliminada para usar solo title-style */

/* Estilos personalizables para filas de título */
.post-table tr.title-row.title-style,
.post-table tr.title-row.title-style th,
.post-table tr.title-row.title-style td {
    font-weight: 700 !important;
    background: rgba(255, 255, 255, 0.8) !important;
    color: var(--textDarker) !important;
}

/* Estilos personalizables para filas normales */
.post-table tr.normal-style {
    background: var(--light);
}

.post-content table tr:last-child td,
.post-table tr:last-child td {
    border-bottom: none;
}

/* Efecto hover eliminado para tablas */

/* Contenedor de tabla con leyenda */
.table-container {
    margin: 2rem 0;
}

/* Leyenda de la tabla */
.table-caption {
    text-align: center;
    font-size: 0.9rem;
    color: var(--textMedium);
    font-family: 'Merriweather', serif;
    font-weight: 300;
    line-height: 1.4;
    margin-top: 0.75rem;
    font-style: italic;
}

/* Figcaption styling */
.post-content figcaption.figcaption-custom,
.post-summary figcaption.figcaption-custom,
.post-content figcaption.figcaption-custom p,
.post-summary figcaption.figcaption-custom p {
    text-align: center;
    font-size: 0.9rem !important;
    color: var(--textMedium);
    font-family: 'Merriweather', serif;
    font-weight: 300;
    line-height: 1.4;
    margin-top: 0.75rem;
    padding-top: 5px;
    font-style: italic;
}


/* Post content meta bar styling */
.post-content-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;  /* Reducido de 1rem a 0.5rem */
    padding: 0.25rem 0;     /* Reducido de 0.5rem a 0.25rem */
}

.post-readtime {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    font-size: 0.9rem;
}

.readtime-icon {
    font-size: 1rem;
}

.readtime-text {
    font-family: 'Merriweather', serif;
    font-weight: 300;
}

.post-share {
    display: flex;
    align-items: center;
}

.share-link-btn {
    background: none;
    border: none;  /* Sin borde visible */
    padding: 0.5rem;  /* Padding para área clickeable */
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;  /* Ancho mínimo para área clickeable */
    height: 2.5rem;     /* Altura mínima para área clickeable */
    outline: none !important;  /* Quitar el outline punteado */
    box-shadow: none !important;  /* Quitar sombras */
    -webkit-appearance: none;  /* Quitar estilos nativos de webkit */
    -moz-appearance: none;     /* Quitar estilos nativos de firefox */
    appearance: none;          /* Quitar estilos nativos */
}

.share-link-btn:hover {
    background: #f5f5f5;
    border-color: #999;
}

.share-icon {
    font-size: 1rem;
    color: #666;
}

.post-content-divider {
    border: none;
    height: 1px;
    background-color: #e0e0e0;
    margin: -0.5rem 0 2rem 0;  /* Reducido: 0.5rem arriba, 1rem abajo */
}

/* Ocultar botón de enlace en mobile */
@media (max-width: 768px) {
    .post-share {
        display: none;
    }
    
    .post-content-meta {
        justify-content: flex-start;  /* Alinear el tiempo de lectura a la izquierda */
    }
}

/* Responsive design */
@media (min-width: 1025px) {
    .floating-index {
        position: absolute !important;
        top: 400px !important;
        left: 44px !important;
        right: 52px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .post-content-layout .post-content {
        padding-left: 39%;  /* Padding importante a la izquierda para dejar espacio al índice */        padding-top: 0px;
    }
}

@media (max-width: 1024px) {
    .post-layout {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0 1rem;
        max-width: 100%;
    }
    
    .post-content-layout {
        padding: 0 1rem;  /* Mismos márgenes que el post-layout en mobile */
        padding-top: 3rem;  /* Más espacio encima del contenido en mobile */
    }
    
    .post-left-column {
        order: 1;
    }
    
    .post-right-column {
        order: 2;
        padding: 0;
    }
    
    .post-image-container {
        padding-bottom: 100%; /* Keep 1:1 ratio */
    }
    
    .post-content-layout .post-content {
        padding-left: 0;  /* Reset padding en mobile */
    }
    
    .post-author {
        margin-top: 0.5rem;  /* Reducir espacio entre summary y author en mobile */
    }
}

@media (max-width: 768px) {
    .post-layout {
        padding: 0 1rem;
    }
    
    .post-title {
        font-size: 2rem;
    }
    
    .floating-index {
        margin: 1rem 0;
        padding: 1rem;
    }
    
    .post-content-layout {
        padding-top: 3rem;  /* Espacio encima del contenido en mobile */
    }
    
    .post-content-layout .post-content {
        padding-left: 0;  /* Reset padding en mobile */
    }
    
    .post-author {
        margin-top: -1.5rem;  /* Reducir espacio entre summary y author en mobile */
    }
}

/*------------------------*/
/* CTA Cards Styles
/*------------------------*/

.cta-card {
    margin: 2rem 0;
    padding: 2rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.cta-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.cta-content h3 {
    color: var(--textDarker);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.cta-content p {
    color: var(--textMedium);
    font-size: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-buttons .button {
    text-decoration: none;
    transition: all .3s;
}

.cta-buttons .button:hover {
    text-decoration: none;
}

/* Mantener color blanco en el primer botón */
.cta-card-hybrid .cta-buttons .button:first-child {
    color: white;
}

.cta-card-hybrid .cta-buttons .button:first-child:hover {
    background: var(--accentHover) !important;
    color: white !important;
}

/* Asegurar que el botón smaller mantenga sus estilos originales */
.cta-card-hybrid .button.smaller {
    background: white !important;
    color: var(--textMedium) !important;
    border: 1.2px solid var(--borderLight) !important;
    font-family: 'Figtree', serif !important;
    padding: 0.7em 1.25em !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
}

.cta-card-hybrid .button.smaller:hover {
    background: white !important;
    border: 1.2px solid var(--borderMedium) !important;
    color: var(--textMedium) !important;
    transform: scale(1.0) !important;
}



/* Propuesta Híbrida: Texto Simple + Fondo Moderno */
.cta-card-hybrid {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    color: var(--textMedium);
    border: none;
}

.cta-card-hybrid .cta-content h3,
.cta-card-hybrid .cta-content p {
    color: var(--textMedium);
}

/* Responsive Design */
@media (max-width: 768px) {
    .cta-card {
        margin: 1.5rem 0;
        padding: 1.5rem;
    }
    
    .cta-content h3 {
        font-size: 1.3rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-buttons .button {
        width: 100%;
        max-width: 250px;
    }
}

@media (max-width: 480px) {
    .cta-card {
        padding: 1rem;
    }
    
    .cta-content h3 {
        font-size: 1.2rem;
    }
    
    .cta-content p {
        font-size: 0.9rem;
    }
}

/* Altura de la barra superior */
:root {
  --header-height: 74px; 
}

/* Aplica el margen de desplazamiento a los títulos */
h2[id],
h3[id],
h4[id],
.section[id] {
  scroll-margin-top: calc(var(--header-height) + 5px);
}