/* ============================================
   MAIN.CSS - Estilos adicionales del sitio literario
   Se carga después del style.css principal
   ============================================ */

/* ============================================
   HERO SECCIÓN — Ensayo Destacado
   ============================================ */
.hero-section {
    background: var(--surface-container-low);
    color: var(--color-texto);
    padding: var(--espacio-xl) var(--espacio-sm);
    text-align: center;
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(108, 79, 72, 0.03) 0%, transparent 60%);
    pointer-events: none;
}

.hero-contenido {
    position: relative;
    z-index: 1;
    max-width: 700px;
}

.hero-subtitulo {
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-acento-suave);
    margin-bottom: var(--espacio-sm);
}

.hero-titulo {
    font-size: clamp(2.5rem, 6vw, var(--fs-4xl));
    color: var(--color-primario);
    margin-bottom: var(--espacio-sm);
    line-height: 1.1;
}

.hero-descripcion {
    font-size: var(--fs-lg);
    color: var(--color-texto-suave);
    font-style: italic;
    margin-bottom: var(--espacio-lg);
    line-height: 1.7;
}

/* ============================================
   SECCIÓN: ÚLTIMOS ARTÍCULOS
   ============================================ */
.seccion-titulo {
    font-family: var(--fuente-titulo);
    font-size: var(--fs-3xl);
    text-align: center;
    margin-bottom: var(--espacio-xs);
    position: relative;
}

.seccion-titulo::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: var(--color-acento-suave);
    margin: var(--espacio-sm) auto 0;
}

.seccion-subtitulo {
    text-align: center;
    color: var(--color-texto-suave);
    font-style: italic;
    margin-bottom: var(--espacio-xl);
}

/* ============================================
   PÁGINA INDIVIDUAL DE LIBRO
   ============================================ */
.libro-single {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--espacio-xl);
    max-width: 1000px;
    margin: var(--espacio-xl) auto;
    padding: 0 var(--espacio-sm);
    align-items: start;
}

.libro-single__caratula-wrap {
    position: sticky;
    top: var(--espacio-lg);
}

.libro-single__caratula {
    width: 100%;
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-lg);
}

.libro-single__precio-box {
    background: var(--surface-container-low);
    border-radius: var(--radio-md);
    padding: var(--espacio-md);
    margin-top: var(--espacio-md);
    text-align: center;
}

.libro-single__precio {
    font-family: var(--fuente-titulo);
    font-size: var(--fs-3xl);
    color: var(--color-primario);
    margin-bottom: var(--espacio-sm);
}

.libro-single__genero {
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-acento);
    margin-bottom: var(--espacio-sm);
}

.libro-single__titulo {
    font-size: var(--fs-3xl);
    margin-bottom: var(--espacio-sm);
}

.libro-single__autor {
    font-size: var(--fs-lg);
    color: var(--color-texto-suave);
    font-style: italic;
    margin-bottom: var(--espacio-md);
}

.libro-single__meta {
    display: flex;
    gap: var(--espacio-md);
    margin-bottom: var(--espacio-lg);
    padding-bottom: var(--espacio-md);
}

.libro-single__meta-item {
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    color: var(--color-texto-suave);
}

.libro-single__meta-item strong {
    display: block;
    color: var(--color-primario);
    font-weight: 600;
}

.libro-single__resena {
    font-size: var(--fs-md);
    line-height: 1.9;
    color: var(--color-texto);
}

@media (max-width: 768px) {
    .libro-single {
        grid-template-columns: 1fr;
    }

    .libro-single__caratula-wrap {
        position: static;
        max-width: 260px;
        margin: 0 auto;
    }
}

/* ============================================
   ARTÍCULO INDIVIDUAL DEL BLOG
   ============================================ */
.entrada-single {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--espacio-xl) var(--espacio-sm);
}

.entrada-single .entry-header {
    margin-bottom: var(--espacio-lg);
    padding-bottom: var(--espacio-md);
}

.entrada-single .entry-title {
    font-size: var(--fs-4xl);
    line-height: 1.15;
    margin-bottom: var(--espacio-sm);
}

.entrada-single .entry-meta {
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    color: var(--color-texto-suave);
    display: flex;
    gap: var(--espacio-md);
    flex-wrap: wrap;
}

.entrada-single .entry-content {
    font-size: var(--fs-md);
    line-height: 1.9;
}

.entrada-single .entry-content p:first-of-type::first-letter {
    font-family: var(--fuente-titulo);
    font-size: 4rem;
    float: left;
    line-height: 0.8;
    margin: 0.1em 0.1em 0 0;
    color: var(--color-acento);
}

/* ============================================
   PAGINACIÓN
   ============================================ */
.navegacion-paginas {
    display: flex;
    justify-content: center;
    gap: var(--espacio-xs);
    margin: var(--espacio-xl) 0;
}

.navegacion-paginas a,
.navegacion-paginas span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--surface-container-low);
    border-radius: var(--radio-md);
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    transition: all var(--transicion);
}

.navegacion-paginas a:hover,
.navegacion-paginas .current {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

/* ============================================
   MENSAJES Y ALERTAS
   ============================================ */
.mensaje-exito {
    background: #e8f5e9;
    color: #2e7d32;
    padding: var(--espacio-sm) var(--espacio-md);
    border-radius: var(--radio-md);
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
}

.mensaje-error {
    background: #ffebee;
    color: var(--color-error);
    padding: var(--espacio-sm) var(--espacio-md);
    border-radius: var(--radio-md);
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
}

/* ============================================
   LOADING SPINNER
   ============================================ */
.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   FRONT PAGE — HOME EDITORIAL
   Fiel al diseño Stitch: mosaic hero | pull-quote centrado | vitrina escalonada | newsletter left
   ============================================ */

.home-editorial {
    overflow-x: hidden;
}

/* ============================================
   1. HERO MOSAIC SECTION
   Stitch: grid 12-col, imagen 8/12 con overlay, sidebar 4/12 con 2 cards
   ============================================ */

.home-mosaic-section {
    max-width: 1280px;
    margin: 0 auto;
    padding: 3rem 2rem 5rem;
}

/* Grid 8/12 + 4/12 */
.home-mosaic {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: stretch;
}

@media (min-width: 1024px) {
    .home-mosaic {
        grid-template-columns: 8fr 4fr;
    }
}

/* --- Columna izquierda: imagen con overlay --- */
.home-mosaic__featured {
    background: var(--surface-container-low);
    padding: 0.5rem;   /* p-2 = 8px, como en Stitch */
    overflow: hidden;
}

.home-mosaic__featured-inner {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}

.home-mosaic__featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(30%);
    transition: transform 0.7s ease;
}

.home-mosaic__featured:hover .home-mosaic__featured-img {
    transform: scale(1.05);
}

.home-mosaic__featured-overlay {
    position: absolute;
    inset: 0;
    /* Stitch: bg-gradient-to-t from-primary/80 to-transparent — cubre todo el alto */
    background: linear-gradient(to top, rgba(108, 79, 72, 0.80) 0%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
}

@media (min-width: 768px) {
    .home-mosaic__featured-overlay {
        padding: 2rem;
    }
}

.home-mosaic__badge {
    display: inline-block;
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #fed488;    /* secondary-container */
    margin-bottom: 1rem;
}

.home-mosaic__featured-title {
    font-family: var(--fuente-titulo);
    /* Ajustado para columna 8/12: Stitch usa full-width pero nuestro contenedor es más estrecho */
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 1rem;
}

.home-mosaic__featured-excerpt {
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-base);
    color: rgba(255, 255, 255, 0.80);
    line-height: 1.6;
    max-width: 580px;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Botón "Leer Ensayo" — bg secondary-container, text on-secondary-container */
.home-mosaic__cta {
    display: inline-block;
    align-self: flex-start;            /* No estirar en contenedor flex */
    background: #fed488;               /* secondary-container */
    color: #785a1a;                    /* on-secondary-container */
    padding: 0.75rem 2rem;
    font-family: var(--fuente-ui);
    font-size: var(--fs-base);
    font-weight: 500;
    text-decoration: none;
    transition: filter var(--transicion);
    border-radius: 0;
}

.home-mosaic__cta:hover {
    filter: brightness(1.1);
    color: #785a1a;
    text-decoration: none;
}

/* --- Columna derecha: 2 artículos apilados --- */
.home-mosaic__sidebar {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;  /* nunca superar la altura del hero */
}

.home-mosaic__card {
    background: var(--surface-container-low);
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-height: 0;     /* permite que flex-shrink funcione correctamente */
    overflow: hidden;
}

.home-mosaic__card + .home-mosaic__card {
    border-top: 1px solid var(--color-borde);
}

/* Segunda tarjeta: borde izquierdo dorado (border-l-4 border-secondary) */
.home-mosaic__card--accent {
    border-left: 4px solid #775a19;
}

.home-mosaic__card-cat {
    display: block;
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #775a19;                    /* secondary */
    margin-bottom: 0.75rem;
}

.home-mosaic__card-title {
    font-family: var(--fuente-titulo);
    font-size: clamp(1rem, 1.8vw, 1.375rem);  /* se adapta al espacio disponible */
    color: var(--color-texto);
    line-height: 1.3;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-mosaic__card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--fuente-ui);
    font-size: var(--fs-base);
    font-weight: 500;
    color: #6c4f48;                    /* primary */
    text-decoration: none;
    transition: color var(--transicion);
}

.home-mosaic__card-link .material-symbols-outlined {
    font-size: 1rem;
    transition: transform var(--transicion);
}

.home-mosaic__card-link:hover {
    color: #775a19;                    /* secondary */
    text-decoration: none;
}

.home-mosaic__card-link:hover .material-symbols-outlined {
    transform: translateX(4px);
}

/* ============================================
   2. PULL-QUOTE — centrado, ícono gigante
   Stitch: max-w-3xl mx-auto text-center, format_quote icon arriba
   ============================================ */

.home-pullquote-section {
    max-width: 48rem;           /* max-w-3xl */
    margin: 0 auto;
    padding: 4rem 2rem;
    text-align: center;
}

.home-pullquote {
    position: relative;
}

.home-pullquote__icon {
    display: block;
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 5rem;           /* text-7xl */
    color: #fed488;            /* secondary-container */
    opacity: 0.50;
    pointer-events: none;
    user-select: none;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.home-pullquote__text {
    font-family: var(--fuente-titulo);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-style: italic;
    color: #6c4f48;            /* primary */
    line-height: 1.5;
    position: relative;
    z-index: 1;
    border: none;              /* Anular blockquote global */
    padding: 0;
    margin: 0;
    background: none;
}

.home-pullquote__cite {
    display: block;
    margin-top: 1.5rem;
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-texto-suave);
}

/* ============================================
   3. VITRINA DE AUTOR — fondo surface-container-low, grid escalonado
   Stitch: sección con bg full-width, 5-col, cols 2 y 4 tienen mt-8
   ============================================ */

.home-vitrina-section {
    background: var(--surface-container-low);
    padding: 6rem 0;
}

.home-vitrina {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Header: título izq + link derecha en misma línea */
.home-vitrina__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 4rem;
}

.home-vitrina__title {
    font-family: var(--fuente-titulo);
    font-size: var(--fs-3xl);
    font-weight: 400;
    color: var(--color-texto);
    margin-bottom: 0.5rem;
}

.home-vitrina__desc {
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-base);
    color: var(--color-texto-suave);
    margin: 0;
}

.home-vitrina__ver-todos {
    font-family: var(--fuente-ui);
    font-size: var(--fs-base);
    font-weight: 500;
    color: #6c4f48;
    text-decoration: none;
    border-bottom: 1px solid #6c4f48;
    padding-bottom: 2px;
    white-space: nowrap;
    transition: color var(--transicion), border-color var(--transicion);
}

.home-vitrina__ver-todos:hover {
    color: #775a19;
    border-color: #775a19;
    text-decoration: none;
}

/* Grid 5 columnas, escalonado */
.home-vitrina__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

@media (min-width: 768px) {
    .home-vitrina__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .home-vitrina__grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.home-vitrina__item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    cursor: pointer;
    text-decoration: none;
    color: var(--color-texto);
    transition: transform var(--transicion);
}

/* Escalonar columnas 2 y 4 (lg:mt-8 en Stitch) */
@media (min-width: 1024px) {
    .home-vitrina__item--offset {
        margin-top: 2rem;
    }
}

/* Marco tipo "book plate" — p-1 de Stitch = 4px padding, bg-surface = #fcf9f4 */
.home-vitrina__book-frame {
    aspect-ratio: 2 / 3;
    background: #fcf9f4;   /* surface — igual que Stitch bg-surface */
    padding: 4px;
    box-shadow: 0 4px 16px rgba(28, 28, 25, 0.12);
    transition: box-shadow 0.5s ease;
    overflow: hidden;
}

.home-vitrina__item:hover .home-vitrina__book-frame {
    box-shadow: 0 8px 32px rgba(28, 28, 25, 0.20);
}

.home-vitrina__book-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-vitrina__book-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--surface-container-low), var(--surface-container));
}

.home-vitrina__book-title {
    font-family: var(--fuente-titulo);
    font-size: var(--fs-lg);
    font-weight: 400;
    color: var(--color-texto);
    line-height: 1.3;
    margin: 0;
}

.home-vitrina__book-autor {
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    color: var(--color-texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

/* ============================================
   4. NEWSLETTER — box con alineación izquierda
   Stitch: max-w-7xl wrapper, inner bg-surface-container-highest/30
   Contenido alineado izquierda, botón con fuente serif
   Ícono decorativo auto_stories (5%) derecha inferior
   ============================================ */

.home-newsletter-section {
    max-width: 1280px;
    margin: 0 auto;
    padding: 6rem 2rem;
}

.home-newsletter-outer {
    width: 100%;
}

/* bg-surface-container-highest/30 = rgba(229,226,221,0.30) */
.home-newsletter-box {
    background: rgba(229, 226, 221, 0.30);
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .home-newsletter-box {
        padding: 5rem;
    }
}

.home-newsletter-content {
    max-width: 42rem;        /* max-w-2xl */
    position: relative;
    z-index: 1;
}

.home-newsletter__title {
    font-family: var(--fuente-titulo);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: #6c4f48;              /* text-primary */
    margin-bottom: 1.5rem;
}

.home-newsletter__desc {
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-lg);
    color: var(--color-texto-suave);
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.home-newsletter__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .home-newsletter__form {
        flex-direction: row;
    }
}

.home-newsletter__field {
    flex: 1;
}

.home-newsletter__field input[type="email"] {
    width: 100%;
    background: white;
    border: none;
    outline: none;
    padding: 1rem 1.5rem;
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-base);
    color: var(--color-texto);
    transition: box-shadow var(--transicion);
    border-radius: 0;
}

.home-newsletter__field input[type="email"]:focus {
    box-shadow: 0 0 0 2px #6c4f48;
}

.home-newsletter__field input[type="email"]::placeholder {
    color: rgba(78, 69, 63, 0.50);
}

/* Botón newsletter — serif, bg-primary */
.home-newsletter__btn {
    background: #6c4f48;
    color: #ffffff;
    border: none;
    padding: 1rem 2.5rem;
    font-family: var(--fuente-titulo);   /* SERIF — igual que en Stitch */
    font-size: var(--fs-lg);
    cursor: pointer;
    transition: background var(--transicion);
    border-radius: 0;
    white-space: nowrap;
}

.home-newsletter__btn:hover {
    background: #876760;     /* primary-container */
}

.home-newsletter__privacy {
    margin-top: 1rem;
    font-family: var(--fuente-ui);
    font-size: 0.625rem;     /* text-[10px] */
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-texto-suave);
}

/* Ícono decorativo auto_stories — gigante en (derecha/abajo) */
.home-newsletter-deco {
    position: absolute;
    right: -5rem;
    bottom: -5rem;
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
}

.home-newsletter-deco .material-symbols-outlined {
    font-size: 25rem;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    color: #1c1c19;
}

@media (max-width: 900px) {
    .home-newsletter-deco {
        display: none;
    }
}

/* ============================================
   RESPONSIVE — HOME
   ============================================ */

@media (max-width: 768px) {
    .home-mosaic-section {
        padding: 1.5rem 1rem 3rem;
    }

    .home-vitrina-section {
        padding: 3rem 0;
    }

    .home-vitrina__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 2rem;
    }

    .home-newsletter-section {
        padding: 3rem 1rem;
    }
}

/* ============================================
   CATÁLOGO DE LIBROS — archive-download.php
   Diseño Stitch: "Catálogo de Libros - 4 por Fila"
   Estructura: header | grid 4-col + hover overlay | pull-quote
   ============================================ */

.catalogo-editorial {
    overflow-x: hidden;
}

/* --- Cabecera del catálogo --- */
.catalogo-header {
    max-width: 1280px;
    margin: 0 auto;
    padding: 8rem 3rem 4rem;
}

.catalogo-header__label,
.catalogo-header__title,
.catalogo-header__desc {
    max-width: 48rem;  /* max-w-3xl */
}

.catalogo-header__label {
    display: block;
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #775a19;              /* secondary */
    margin-bottom: 1rem;
}

.catalogo-header__title {
    font-family: var(--fuente-titulo);
    font-size: clamp(3rem, 8vw, 4.5rem);
    font-weight: 500;
    color: #6c4f48;              /* primary */
    line-height: 1;
    margin-bottom: 2rem;
}

.catalogo-header__desc {
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-xl);
    color: var(--color-texto-suave);
    line-height: 1.6;
}

/* --- Grid 4 columnas — Stitch: grid-cols-2 md:grid-cols-3 lg:grid-cols-4 --- */
.catalogo-grid {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .catalogo-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    .catalogo-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.catalogo-grid__empty {
    grid-column: 1 / -1;
    font-family: var(--fuente-ui);
    color: var(--color-texto-suave);
    text-align: center;
    padding: 4rem;
}

/* --- Tarjeta de libro --- */
/* Stitch: article.group relative flex flex-col */
.catalogo-card {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Stitch: relative aspect-[2/3] overflow-hidden rounded-lg bg-surface-container-high
          shadow-lg transition-all duration-500 group-hover:scale-105 group-hover:shadow-2xl */
.catalogo-card__img-wrap {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 0.25rem;
    background: var(--surface-container-high, #ebe8e3);
    box-shadow: 0 4px 16px rgba(28, 28, 25, 0.12);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                z-index 0s;
    z-index: 1;
}

.catalogo-card:hover .catalogo-card__img-wrap {
    transform: scale(1.05);
    box-shadow: 0 16px 48px rgba(28, 28, 25, 0.22);
    z-index: 10;
}

/* Badge "Especial" — Stitch: absolute top-3 right-3 z-20 bg-secondary-container */
.catalogo-card__badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 20;
    background: #fed488;         /* secondary-container */
    color: #785a1a;              /* on-secondary-container */
    padding: 0.125rem 0.5rem;
    font-family: var(--fuente-ui);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 0.125rem;
}

/* Imagen de portada */
.catalogo-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
    display: block;
}

/* Placeholder si no hay imagen */
.catalogo-card__img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--surface-container-low, #f6f3ee), var(--surface-container, #f0ede8));
}

/* Overlay hover con blur — Stitch: book-card-overlay opacity:0 → 1, backdrop-blur(4px) */
.catalogo-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(108, 79, 72, 0.80);    /* primary/80 */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.catalogo-card:hover .catalogo-card__overlay {
    opacity: 1;
}

/* Botones del overlay */
.catalogo-card__overlay-btn {
    display: block;
    width: 100%;
    padding: 0.625rem 1rem;
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    border-radius: 0.125rem;
    transition: background var(--transicion), opacity var(--transicion);
    line-height: 1;
}

/* "Ver Reseña" — Stitch: bg-secondary text-on-secondary */
.catalogo-card__overlay-btn--primary {
    background: #775a19;         /* secondary */
    color: #ffffff;              /* on-secondary */
}

.catalogo-card__overlay-btn--primary:hover {
    opacity: 0.90;
    color: #ffffff;
    text-decoration: none;
}

/* "Comprar" — Stitch: bg-white/10 border border-white/20 text-white */
.catalogo-card__overlay-btn--secondary {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #ffffff;
}

.catalogo-card__overlay-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.20);
    color: #ffffff;
    text-decoration: none;
}

/* Info debajo de la tarjeta — Stitch: mt-4 flex flex-col gap-1 */
.catalogo-card__info {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Título — Stitch: font-headline text-lg text-primary leading-tight font-medium */
.catalogo-card__title {
    font-family: var(--fuente-titulo);
    font-size: var(--fs-xl, 1.125rem);
    font-weight: 500;
    color: #6c4f48;              /* primary */
    line-height: 1.3;
    margin: 0;
    transition: color var(--transicion);
}

.catalogo-card__title a {
    color: inherit;
    text-decoration: none;
}

.catalogo-card:hover .catalogo-card__title {
    color: #775a19;              /* secondary */
}

.catalogo-card:hover .catalogo-card__title a {
    text-decoration: none;
}

/* Género — Stitch: text-xs font-label text-on-surface-variant/70 uppercase tracking-widest font-semibold */
.catalogo-card__genre {
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(78, 69, 63, 0.70);     /* on-surface-variant/70 */
}

/* --- Pull-quote catálogo --- */
/* Stitch: mt-32 max-w-4xl mx-auto text-center border-y border-outline-variant py-20 px-8 bg-surface-container-lowest shadow-sm */
.catalogo-pullquote {
    max-width: 56rem;             /* max-w-4xl */
    margin: 8rem auto 6rem;       /* Stitch: mt-32 + main pb-24 */
    padding: 5rem 2rem;
    text-align: center;
    border-top: 1px solid #d1c4bc;     /* outline-variant */
    border-bottom: 1px solid #d1c4bc;
    background: #ffffff;               /* surface-container-lowest */
    box-shadow: 0 2px 8px rgba(28, 28, 25, 0.06);
}

.catalogo-pullquote__icon {
    display: block;
    font-size: 3rem;
    color: #775a19;              /* secondary */
    margin-bottom: 1.5rem;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.catalogo-pullquote__text {
    font-family: var(--fuente-titulo);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-style: italic;
    color: #6c4f48;
    line-height: 1.4;
    margin: 0 0 2rem;
    border: none;
    padding: 0;
    background: none;
}

.catalogo-pullquote__cite {
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #775a19;
    font-style: normal;
}

/* --- Responsive catálogo --- */
@media (max-width: 768px) {
    .catalogo-header {
        padding: 5rem 1rem 3rem;
    }

    .catalogo-grid {
        padding: 0 1rem;
        gap: 1.25rem;
    }

    .catalogo-pullquote {
        margin-top: 4rem;
        margin-bottom: 3rem;
        padding: 3rem 1rem;
    }
}

/* ============================================
   MATERIAL SYMBOLS — configuración base
   ============================================ */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
}

/* ============================================
   FOOTER — THE EDITORIAL LEDGER
   3 columnas: logo/tagline/social | navegación | contacto
   bg: var(--surface-container-low) = #f6f3ee
   ============================================ */

.editorial-footer {
    width: 100%;
    padding: 4rem 0 2rem;
    background-color: var(--surface-container-low);
}

.editorial-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 0 3rem;
    max-width: 1280px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .editorial-footer__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Columna 1 — Logo / tagline */
.editorial-footer__logo a {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--on-surface);
    text-decoration: none;
    letter-spacing: -0.02em;
    display: block;
    margin-bottom: 0.5rem;
}

.editorial-footer__tagline {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--on-surface-variant);
    margin: 0 0 1.25rem;
    letter-spacing: 0.04em;
}

.editorial-footer__social {
    display: flex;
    gap: 1rem;
}

.editorial-footer__social .material-symbols-outlined,
.editorial-footer__social a i {
    font-size: 1.375rem;
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: color 0.2s;
}

.editorial-footer__social .material-symbols-outlined:hover,
.editorial-footer__social a:hover i {
    color: var(--primary);
}

/* Columnas 2 y 3 — Navegación / Contacto */
.editorial-footer__heading {
    font-family: var(--font-label);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    margin: 0 0 1.25rem;
}

.editorial-footer__nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.editorial-footer__nav li a {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--on-surface);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.2s;
}

.editorial-footer__nav li a:hover {
    color: var(--primary);
}

.editorial-footer__address {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-style: normal;
    color: var(--on-surface-variant);
    line-height: 1.7;
    margin: 0 0 0.75rem;
}

.editorial-footer__email {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.1em;
    transition: color 0.2s;
}

.editorial-footer__email:hover {
    color: var(--secondary);
}

/* Línea inferior — copyright */
.editorial-footer__bottom {
    max-width: 1280px;
    margin: 4rem auto 0;
    padding: 2rem 3rem 0;
    border-top: 1px solid rgba(120, 100, 84, 0.20);
}

.editorial-footer__copy {
    font-family: var(--font-label);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    margin: 0;
}

@media (max-width: 767px) {
    .editorial-footer__col + .editorial-footer__col {
        padding-top: 1.5rem;
        border-top: 1px solid var(--outline-variant);
    }
}

/* ============================================
   DETALLE DE LIBRO — single-download.php
   Fiel al diseño Stitch: grid 5/12 portada sticky | 7/12 contenido + compra
   ============================================ */

.libro-detalle {
    max-width: 1280px;
    margin: 0 auto;
    padding: 3rem 2rem 6rem;
}

/* --- Grid principal 5/7 --- */
.libro-detalle__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}

@media (min-width: 768px) {
    .libro-detalle__grid {
        grid-template-columns: 5fr 7fr;
        gap: 4rem;
    }
}

/* ===== Columna izquierda: portada ===== */

/* Sticky solo en desktop */
@media (min-width: 768px) {
    .libro-detalle__cover-col {
        position: sticky;
        top: 6rem;   /* compensar header fijo */
    }
}

.libro-detalle__cover-wrap {
    position: relative;
}

.libro-detalle__cover-img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    box-shadow: 0 25px 50px rgba(28, 28, 25, 0.25);
    border-radius: 2px;
    transition: transform 0.7s ease;
    display: block;
}

.libro-detalle__cover-wrap:hover .libro-detalle__cover-img {
    transform: scale(1.02);
}

.libro-detalle__cover-placeholder {
    width: 100%;
    aspect-ratio: 2 / 3;
    background: var(--surface-container-low, #f6f3ee);
    border-radius: 2px;
}

/* Stats: Páginas / Edición / Formato */
.libro-detalle__stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #4e453f;   /* on-surface-variant */
}

.libro-detalle__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.libro-detalle__stat-value {
    font-family: var(--fuente-titulo);
    font-weight: 700;
    font-size: var(--fs-lg);
    color: #6c4f48;   /* primary */
}

.libro-detalle__stat-sep {
    width: 1px;
    height: 2rem;
    background: rgba(209, 196, 188, 0.40);  /* outline-variant/40 */
}

/* ===== Columna derecha: contenido ===== */

.libro-detalle__heading {
    margin-bottom: 2rem;
}

.libro-detalle__badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #fed488;          /* secondary-container */
    color: #785a1a;               /* on-secondary-container */
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.libro-detalle__title {
    font-family: var(--fuente-titulo);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 700;
    color: #1c1c19;               /* on-surface */
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
}

.libro-detalle__autor {
    font-family: var(--fuente-titulo);
    font-style: italic;
    font-size: var(--fs-xl);
    color: rgba(108, 79, 72, 0.80);  /* primary/80 */
    line-height: 1.5;
    margin: 0;
}

/* Prose — drop cap en primer párrafo */
.libro-detalle__prose {
    font-family: var(--fuente-titulo);
    font-size: var(--fs-xl);
    color: #1c1c19;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.libro-detalle__prose p {
    margin-bottom: 1.5rem;
}

.libro-detalle__prose p:first-of-type::first-letter {
    font-size: 4.5rem;
    font-weight: 700;
    color: #6c4f48;
    float: left;
    line-height: 0.85;
    margin-right: 0.2rem;
    margin-top: 0.1rem;
}

/* Pull-quote */
.libro-detalle__pullquote {
    position: relative;
    padding: 1rem 2rem;
    margin: 2.5rem 0;
    border-left: 2px solid #775a19;  /* secondary */
}

.libro-detalle__blockquote {
    font-family: var(--fuente-titulo);
    font-style: italic;
    font-size: var(--fs-2xl);
    color: #6c4f48;               /* primary */
    line-height: 1.4;
    margin: 0 0 1rem;
}

.libro-detalle__cite {
    display: block;
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #4e453f;               /* on-surface-variant */
    font-style: normal;
}

/* ===== Sección de compra ===== */
.libro-detalle__compra {
    padding-top: 2.5rem;
    margin-top: 2rem;
    border-top: 1px solid rgba(209, 196, 188, 0.30);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.libro-detalle__precio-wrap {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.libro-detalle__precio {
    font-family: var(--fuente-titulo);
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 700;
    color: #1c1c19;
}

.libro-detalle__precio-original {
    font-family: var(--fuente-ui);
    font-size: var(--fs-lg);
    color: #4e453f;
    text-decoration: line-through;
}

.libro-detalle__precio-usd {
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    color: #4e453f;
}

.libro-detalle__precio-disclaimer {
    font-family: var(--fuente-ui);
    font-size: 0.75rem;
    color: #4e453f;
    line-height: 1.4;
    margin-top: -0.5rem;
    font-style: italic;
}

.libro-detalle__botones {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Override global EDD — neutraliza la clase .blue que EDD añade por defecto */
.edd-submit,
.edd-submit.blue,
.edd-add-to-cart.blue,
.button.blue.edd-submit {
    background: #775a19 !important;  /* secondary — dorado */
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--fuente-ui) !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
}

.edd-submit:hover,
.edd-submit:focus,
.edd-submit.blue:hover,
.edd-add-to-cart.blue:hover,
.button.blue.edd-submit:hover {
    background: #5c4201 !important;
    color: #ffffff !important;
}

/* Botón principal comprar — sobrescribe EDD defaults en toda la página de detalle */
.libro-detalle__btn-comprar,
.edd-submit.libro-detalle__btn-comprar,
.libro-detalle__compra .edd-submit,
.libro-detalle__compra #edd_purchase_submit .edd-submit,
.libro-detalle__compra .edd-add-to-wishlist,
.libro-detalle__compra .edd-wishlist-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.25rem 2.5rem;
    background: #775a19 !important;  /* secondary */
    color: #ffffff !important;        /* on-secondary */
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background var(--transicion), box-shadow var(--transicion);
    border-radius: 0;
}

.libro-detalle__btn-comprar:hover,
.edd-submit.libro-detalle__btn-comprar:hover,
.libro-detalle__compra .edd-submit:hover,
.libro-detalle__compra #edd_purchase_submit .edd-submit:hover,
.libro-detalle__compra .edd-add-to-wishlist:hover,
.libro-detalle__compra .edd-wishlist-toggle:hover {
    background: #5c4201 !important;
    box-shadow: 0 4px 20px rgba(119, 90, 25, 0.30) !important;
    color: #ffffff !important;
    text-decoration: none;
}

/* Botón secundario — wishlist (gris neutro, no dorado) */
.libro-detalle__compra .edd-add-to-wishlist,
.libro-detalle__compra .edd-wishlist-toggle {
    background: #e5e2dd !important;  /* surface-container-highest */
    color: #6c4f48 !important;        /* primary */
    box-shadow: none !important;
}

.libro-detalle__compra .edd-add-to-wishlist:hover,
.libro-detalle__compra .edd-wishlist-toggle:hover {
    background: #d1c4bc !important;  /* outline-variant */
    box-shadow: none !important;
    color: #6c4f48 !important;
}

/* Nota de confianza */
.libro-detalle__trust {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    color: #4e453f;
    margin: 0;
}

.libro-detalle__trust .material-symbols-outlined {
    font-size: 1rem;
    color: #6c4f48;
}

/* ===== Reseñas de prensa ===== */
.libro-detalle__resenas {
    margin-top: 6rem;
    padding-top: 4rem;
    border-top: 1px solid rgba(209, 196, 188, 0.20);
}

.libro-detalle__resenas-titulo {
    font-family: var(--fuente-titulo);
    font-size: var(--fs-3xl);
    color: #6c4f48;
    text-align: center;
    margin-bottom: 3rem;
}

.libro-detalle__resenas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .libro-detalle__resenas-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.libro-detalle__resena-card {
    background: #f6f3ee;          /* surface-container-low */
    padding: 2rem;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.libro-detalle__resena-texto {
    font-family: var(--fuente-titulo);
    font-style: italic;
    color: #1c1c19;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.libro-detalle__resena-fuente {
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #4e453f;
}

/* ===== Responsive ===== */
@media (max-width: 767px) {
    .libro-detalle {
        padding: 2rem 1rem 4rem;
    }

    .libro-detalle__title {
        font-size: 2.25rem;
    }

    .libro-detalle__prose {
        font-size: var(--fs-base);
    }

    .libro-detalle__blockquote {
        font-size: var(--fs-xl);
    }
}

/* ============================================
   BLOG ARCHIVO — home.php
   Fiel al diseño Stitch: intro | featured 7/5 | pull-quote | bento | newsletter
   ============================================ */

.blog-archivo {
    max-width: 1280px;
    margin: 0 auto;
    padding: 3rem 2rem 6rem;
}

/* ===== Intro header ===== */
.blog-header {
    text-align: center;
    max-width: 48rem;
    margin: 0 auto 5rem;
}

.blog-header__eyebrow {
    display: block;
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #775a19;           /* secondary */
    margin-bottom: 1rem;
}

.blog-header__title {
    font-family: var(--fuente-titulo);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    color: #6c4f48;           /* primary */
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

.blog-header__desc {
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-lg);
    color: #4e453f;           /* on-surface-variant */
    line-height: 1.7;
    margin: 0;
}

/* ===== Sección header (reutilizable) ===== */
.blog-section {
    margin-bottom: 5rem;
}

.blog-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid rgba(209, 196, 188, 0.20);
    padding-bottom: 1rem;
    margin-bottom: 3rem;
}

.blog-section__title {
    font-family: var(--fuente-titulo);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    color: #6c4f48;
    margin: 0;
}

.blog-section__title--italic {
    font-style: italic;
}

.blog-section__ver-todos {
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #775a19;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--transicion);
}

.blog-section__ver-todos:hover {
    opacity: 0.7;
    text-decoration: none;
}

/* ===== Grid 7/5 ===== */
.blog-section__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}

@media (min-width: 768px) {
    .blog-section__grid {
        grid-template-columns: 7fr 5fr;
    }
}

/* ===== Artículo destacado (7/12) ===== */
.blog-featured__img-wrap {
    display: block;
    overflow: hidden;
    background: #f6f3ee;
    margin-bottom: 1.5rem;
    border-radius: 2px;
}

.blog-featured__img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    opacity: 0.9;
    transition: transform 0.7s ease;
    display: block;
}

.blog-featured__img-wrap:hover .blog-featured__img {
    transform: scale(1.05);
}

.blog-featured__img-placeholder {
    width: 100%;
    height: 450px;
    background: #f6f3ee;
}

.blog-featured__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.blog-featured__badge {
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: #775a19;
}

.blog-featured__title {
    font-family: var(--fuente-titulo);
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    line-height: 1.3;
    color: #1c1c19;
    margin: 0;
}

.blog-featured__title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transicion);
}

.blog-featured__title a:hover {
    color: #6c4f48;
    text-decoration: none;
}

.blog-featured__excerpt {
    font-family: var(--fuente-cuerpo);
    color: #4e453f;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.blog-featured__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    color: rgba(28, 28, 25, 0.50);
    margin-top: 0.25rem;
}

/* ===== Sidebar (5/12) ===== */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.blog-sidebar__item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.blog-sidebar__thumb-wrap {
    flex-shrink: 0;
    width: 6rem;
    height: 6rem;
    overflow: hidden;
    background: #f6f3ee;
    border-radius: 2px;
    display: block;
}

.blog-sidebar__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: transform 0.5s ease, filter 0.5s ease;
}

.blog-sidebar__item:hover .blog-sidebar__thumb {
    transform: scale(1.1);
    filter: grayscale(0%);
}

.blog-sidebar__thumb-placeholder {
    width: 100%;
    height: 100%;
    background: #e5e2dd;
}

.blog-sidebar__body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.blog-sidebar__cat {
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #775a19;
}

.blog-sidebar__title {
    font-family: var(--fuente-titulo);
    font-size: var(--fs-xl);
    line-height: 1.3;
    margin: 0;
}

.blog-sidebar__title a {
    color: #1c1c19;
    text-decoration: none;
    transition: color var(--transicion);
}

.blog-sidebar__title a:hover {
    color: #6c4f48;
    text-decoration: none;
}

.blog-sidebar__excerpt {
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-sm);
    color: #4e453f;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* ===== Pull-quote ===== */
.blog-pullquote {
    margin: 4rem 0;
    padding: 0 2rem;
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.blog-pullquote__inner {
    padding-left: 3rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-left: 2px solid #775a19;  /* secondary */
}

.blog-pullquote__text {
    font-family: var(--fuente-titulo);
    font-style: italic;
    font-size: clamp(1.75rem, 4vw, 3rem);
    color: #6c4f48;
    line-height: 1.3;
    margin: 0 0 1.5rem;
    border: none;        /* eliminar borde por defecto del tema en blockquote */
    padding: 0;
}

.blog-pullquote__footer {
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #4e453f;
}

/* ===== Bento section ===== */
.blog-bento-section {
    margin-top: 2rem;
}

.blog-bento {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .blog-bento {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tarjeta grande ocupa 2 columnas */
.blog-bento__card--large {
    background: #f6f3ee;
    display: flex;
    flex-direction: column;
    gap: 0;
}

@media (min-width: 768px) {
    .blog-bento__card--large {
        grid-column: span 2;
        flex-direction: row;
        align-items: center;
        gap: 2.5rem;
        padding: 2.5rem;
    }
}

.blog-bento__large-img-wrap {
    display: block;
    overflow: hidden;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .blog-bento__large-img-wrap {
        width: 50%;
    }
}

.blog-bento__large-img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform 1s ease;
    display: block;
}

.blog-bento__card--large:hover .blog-bento__large-img {
    transform: scale(1.05);
}

.blog-bento__large-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
}

@media (min-width: 768px) {
    .blog-bento__large-body {
        padding: 0;
        flex: 1;
    }
}

/* Tarjeta secundaria */
.blog-bento__card--secondary {
    background: #f6f3ee;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.blog-bento__sq-img-wrap {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.blog-bento__sq-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.blog-bento__card--secondary:hover .blog-bento__sq-img {
    transform: scale(1.1);
}

.blog-bento__img-placeholder {
    width: 100%;
    background: #e5e2dd;
}

.blog-bento__img-placeholder--sq {
    aspect-ratio: 1 / 1;
    margin-bottom: 1.5rem;
}

.blog-bento__badge {
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #775a19;
}

.blog-bento__title {
    font-family: var(--fuente-titulo);
    font-size: var(--fs-2xl);
    line-height: 1.3;
    color: #1c1c19;
    margin: 0;
    transition: color var(--transicion);
}

.blog-bento__card--secondary .blog-bento__title {
    font-size: var(--fs-xl);
}

.blog-bento__card--large:hover .blog-bento__title,
.blog-bento__card--secondary:hover .blog-bento__title,
.blog-bento__card--secondary .blog-bento__title a:hover {
    color: #6c4f48;
}

.blog-bento__card--secondary .blog-bento__title a {
    color: inherit;
    text-decoration: none;
}

.blog-bento__excerpt {
    font-family: var(--fuente-cuerpo);
    color: #4e453f;
    line-height: 1.7;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-bento__excerpt--sm {
    font-size: var(--fs-sm);
    -webkit-line-clamp: 3;
}

.blog-bento__autor {
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    color: var(--color-on-surface-variant);
    margin: 0 0 0.5rem;
    font-style: italic;
}

.blog-bento__cta {
    display: inline-block;
    align-self: flex-start;
    padding: 0.75rem 1.5rem;
    background: #6c4f48;
    color: #ffffff;
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-decoration: none;
    transition: opacity var(--transicion);
    border-radius: 0;
}

.blog-bento__cta:hover {
    opacity: 0.9;
    color: #ffffff;
    text-decoration: none;
}

.blog-bento__secondary-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.blog-bento__meta {
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    color: #775a19;
    letter-spacing: -0.02em;
    margin-top: auto;
    padding-top: 1.5rem;
}

/* Newsletter card bento (col-span-2) */
.blog-bento__newsletter {
    background: #6c4f48;       /* primary */
    color: #ffffff;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .blog-bento__newsletter {
        grid-column: span 2;
    }
}

.blog-bento__newsletter-icon {
    font-size: 3rem;
    color: #fed488;
}

.blog-bento__newsletter-title {
    font-family: var(--fuente-titulo);
    font-style: italic;
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    color: #ffffff;
    margin: 0;
}

.blog-bento__newsletter-desc {
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-base);
    color: rgba(255, 255, 255, 0.80);
    max-width: 28rem;
    line-height: 1.6;
    margin: 0;
}

.blog-bento__newsletter-form {
    display: flex;
    width: 100%;
    max-width: 28rem;
}

.blog-bento__newsletter-input {
    flex: 1;
    background: rgba(229, 226, 221, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #ffffff;
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-base);
    padding: 1rem 1.5rem;
    outline: none;
    transition: border-color var(--transicion);
}

.blog-bento__newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.40);
}

.blog-bento__newsletter-input:focus {
    border-color: #fed488;
}

.blog-bento__newsletter-btn {
    background: #775a19;       /* secondary */
    color: #ffffff;
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 1rem 1.5rem;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transicion);
}

.blog-bento__newsletter-btn:hover {
    background: #fed488;
    color: #785a1a;
}

/* ===== Responsive ===== */
@media (max-width: 767px) {
    .blog-archivo {
        padding: 2rem 1rem 4rem;
    }

    .blog-header {
        margin-bottom: 3rem;
    }

    .blog-featured__img,
    .blog-featured__img-placeholder {
        height: 260px;
    }

    .blog-pullquote {
        padding: 0 1rem;
    }

    .blog-pullquote__inner {
        padding-left: 1.5rem;
    }

    .blog-bento__newsletter {
        padding: 2rem 1.5rem;
    }

    .blog-bento__newsletter-form {
        flex-direction: column;
    }

    .blog-bento__newsletter-btn {
        padding: 0.875rem;
    }
}


/* ============================================
   ARTÍCULO INDIVIDUAL — single.php
   Layout: hero 21:9 | grid 9 contenido + 3 sidebar sticky
   Fiel al diseño Stitch "Article Single View"
   ============================================ */

/* ---- Hero banner ---- */
.art-hero {
    max-width: 1280px;
    margin: 0 auto 4rem;
    padding: 0 2rem;
}

.art-hero__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    border-radius: var(--radio-sm);
}

.art-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.art-hero__img-wrap:hover .art-hero__img {
    transform: scale(1.03);
}

.art-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(252,249,244,0.55) 0%, transparent 50%);
    pointer-events: none;
}

/* ---- Content grid ---- */
.art-grid {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem 5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
}

@media (min-width: 1024px) {
    .art-grid {
        grid-template-columns: 3fr 9fr;
        align-items: start;
    }
}

/* ---- Sidebar ---- */
.art-sidebar__inner {
    position: sticky;
    top: 7rem;
    background: var(--surface-container-low);
    border-radius: var(--radio-sm);
    padding: 1.5rem;
}

/* order en móvil: content primero, sidebar debajo */
.art-sidebar {
    order: 2;
}
.art-content {
    order: 1;
}

@media (min-width: 1024px) {
    .art-sidebar { order: 1; }
    .art-content { order: 2; }
}

/* Table of contents */
.art-toc__title {
    font-family: var(--fuente-titulo);
    font-style: italic;
    font-size: var(--fs-lg);
    color: var(--color-acento);
    margin-bottom: 1.25rem;
}

.art-toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.art-toc__list a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    color: var(--color-texto-suave);
    text-decoration: none;
    transition: color 0.2s;
}

.art-toc__list a::before {
    content: '';
    display: inline-block;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: var(--color-acento-suave);
    flex-shrink: 0;
}

.art-toc__list a:hover {
    color: var(--color-acento-suave);
}

.art-toc__list a.is-active {
    color: var(--color-acento);
    font-weight: 600;
}

/* Sidebar author block */
.art-sidebar__author {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(209,196,188,0.3);
}

.art-sidebar__author-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.art-sidebar__author-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.art-sidebar__author-role {
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    color: var(--color-texto-suave);
    margin: 0;
}

.art-sidebar__author-name {
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-acento);
    margin: 0;
}

.art-sidebar__author-name a {
    color: inherit;
    text-decoration: none;
}

.art-sidebar__author-bio {
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-sm);
    color: var(--color-texto-suave);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.art-sidebar__author-btn {
    display: block;
    width: 100%;
    padding: 0.5rem 0;
    background: var(--color-acento);
    color: #ffffff;
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s;
}

.art-sidebar__author-btn:hover {
    background: #5c403a;
}

/* ---- Article header: meta + title ---- */
.art-content__header {
    margin-bottom: 3rem;
}

.art-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-acento-suave);
    margin-bottom: 1rem;
}

.art-meta__sep {
    display: inline-block;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: var(--color-borde);
}

.art-title {
    font-family: var(--fuente-titulo);
    font-style: italic;
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
    line-height: 1.12;
    color: var(--color-primario);
    max-width: 48rem;
    margin: 0;
}

/* ---- Article body (the_content) ---- */
.art-body {
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-md);
    line-height: 1.8;
    color: var(--color-texto-suave);
}

/* Drop cap en el primer párrafo */
.art-body > p:first-of-type {
    font-size: var(--fs-lg);
    font-family: var(--fuente-titulo);
    font-style: italic;
    color: var(--color-primario);
    line-height: 1.6;
}

.art-body > p:first-of-type::first-letter {
    font-size: 4.5rem;
    font-family: var(--fuente-titulo);
    font-weight: 700;
    color: var(--color-acento);
    float: left;
    line-height: 0.85;
    margin-right: 0.15em;
    margin-top: 0.1em;
}

/* Headings dentro del contenido */
.art-body h2 {
    font-family: var(--fuente-titulo);
    font-style: italic;
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    color: var(--color-acento);
    margin: 3rem 0 1.25rem;
    line-height: 1.25;
}

.art-body h3 {
    font-family: var(--fuente-titulo);
    font-style: italic;
    font-size: var(--fs-xl);
    color: var(--color-primario);
    margin: 2.25rem 0 1rem;
}

/* Blockquote / pull-quote */
.art-body blockquote {
    display: flex;
    align-items: center;
    margin: 3.5rem 0;
    padding: 2rem 0;
    border: none;
    border-left: none;
    background: transparent;
}

.art-body blockquote::before {
    content: '';
    display: block;
    width: 0.25rem;
    align-self: stretch;
    background: var(--color-acento-suave);
    flex-shrink: 0;
    margin-right: 2rem;
    border-radius: 2px;
}

.art-body blockquote p {
    font-family: var(--fuente-titulo);
    font-style: italic;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    color: var(--color-acento);
    line-height: 1.35;
    margin: 0;
}

/* Imágenes inline */
.art-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radio-sm);
    margin: 2rem 0;
}

/* Links */
.art-body a {
    color: var(--color-acento);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.art-body a:hover {
    color: var(--color-acento-suave);
}

/* Pagination nextpage */
.art-body__pagination {
    display: flex;
    gap: 0.5rem;
    margin-top: 2rem;
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
}

.art-body__pagination span a,
.art-body__pagination span {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--color-borde);
    color: var(--color-acento);
    text-decoration: none;
    border-radius: var(--radio-sm);
}

.art-body__pagination span a:hover {
    background: var(--surface-container-low);
}

/* ---- Tags footer ---- */
.art-tags {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(209,196,188,0.3);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.art-tags__chip {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--surface-container-high);
    color: var(--color-texto-suave);
    font-family: var(--fuente-ui);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radio-sm);
    transition: background 0.2s;
}

.art-tags__chip:hover {
    background: var(--surface-dim);
    color: var(--color-acento);
}

/* ---- Responsive ---- */
@media (max-width: 1023px) {
    .art-hero {
        margin-bottom: 2.5rem;
    }
    .art-hero__img-wrap {
        aspect-ratio: 16 / 9;
    }
    .art-grid {
        gap: 2.5rem;
    }
    .art-title {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
    }
    .art-sidebar__inner {
        position: static;
    }
}

@media (max-width: 600px) {
    .art-hero {
        padding: 0 1rem;
        margin-bottom: 1.5rem;
    }
    .art-hero__img-wrap {
        aspect-ratio: 4 / 3;
    }
    .art-grid {
        padding: 0 1rem 3rem;
        gap: 2rem;
    }
}


/* ============================================
   PÁGINA DE CONTACTO — "Entrar en Correspondencia"
   ============================================ */

.contacto-page {
    background: var(--color-fondo);
}

/* ----- Contenedor y grid principal ----- */
.contacto-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 6rem 2rem 8rem;
}

.contacto-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 6rem;
    align-items: start;
}

/* ===== COLUMNA IZQUIERDA ===== */
.contacto-col-left {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.contacto-col-left__header {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Título: light weight, gran tamaño — fiel al diseño Stitch */
.contacto-titulo {
    font-family: var(--fuente-titulo);
    font-size: clamp(3rem, 5.5vw, 4.5rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--color-primario, #6c4f48);
    line-height: 1.1;
    margin: 0;
}

.contacto-subtitulo {
    font-family: var(--fuente-ui);
    font-size: var(--fs-lg);
    color: #4e453f;
    max-width: 28rem;
    line-height: 1.7;
    margin: 0;
}

/* ----- Nota al margen — borde izquierdo dorado ----- */
.contacto-nota {
    border-left: 2px solid var(--color-acento, #775a19);
    padding: 1rem 0 1rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contacto-nota__titulo {
    font-family: var(--fuente-titulo);
    font-size: var(--fs-xl);
    font-style: italic;
    font-weight: 500;
    color: var(--color-primario, #6c4f48);
    margin: 0;
}

.contacto-nota__item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.contacto-nota__label {
    font-family: var(--fuente-ui);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #4e453f;
    margin: 0;
}

.contacto-nota__email {
    font-family: var(--fuente-titulo);
    font-size: var(--fs-lg);
    color: var(--color-primario, #6c4f48);
    text-decoration: none;
    transition: color var(--transicion);
    display: inline-block;
    margin-top: 0.125rem;
}

.contacto-nota__email:hover {
    color: var(--color-acento, #775a19);
}

/* Iconos de redes: fila horizontal */
.contacto-redes-lista {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.contacto-red {
    color: var(--color-primario, #6c4f48);
    text-decoration: none;
    transition: color var(--transicion);
    display: flex;
    align-items: center;
}

.contacto-red:hover {
    color: var(--color-acento, #775a19);
}

.contacto-red .material-symbols-outlined,
.contacto-red i {
    font-size: 1.5rem;
}

/* Imagen decorativa: grayscale → color al hover */
.contacto-deco-img {
    width: 100%;
    height: 256px;
    object-fit: cover;
    border-radius: 0.125rem;
    filter: grayscale(100%);
    opacity: 0.8;
    display: block;
    transition: filter 0.7s ease, opacity 0.7s ease;
}

.contacto-deco-img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* ===== COLUMNA DERECHA — Panel bg-surface-container-low ===== */
.contacto-panel {
    background: #f6f3ee;
    padding: 3rem 5rem;
    position: relative;
}

/* ----- Formulario ----- */
.contacto-form {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Honeypot */
.contacto-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Fila 2 columnas: Nombre + Correo */
.contacto-form__row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.contacto-form__group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Labels: serif italic grande */
.contacto-form__label {
    font-family: var(--fuente-titulo);
    font-size: var(--fs-xl);
    font-style: italic;
    font-weight: 400;
    color: var(--color-primario, #6c4f48);
}

/* Inputs: transparente con solo underline */
.contacto-form__input,
.contacto-form__textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid #d1c4bc;
    border-radius: 0;
    padding: 0.75rem 0;
    font-family: var(--fuente-ui);
    font-size: var(--fs-base);
    color: var(--color-texto);
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--transicion);
    resize: none;
}

.contacto-form__input:focus,
.contacto-form__textarea:focus {
    outline: none;
    box-shadow: none;
    border-bottom-color: var(--color-primario, #6c4f48);
}

.contacto-form__input::placeholder,
.contacto-form__textarea::placeholder {
    color: rgba(78, 69, 63, 0.3);
}

/* ----- Botón: alineado a la derecha ----- */
.contacto-form__actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 2rem;
}

.contacto-form__btn {
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.06em;
    background: var(--color-primario, #6c4f48);
    color: #ffffff;
    border: none;
    border-radius: 0.375rem;
    padding: 1rem 3rem;
    cursor: pointer;
    transition: opacity var(--transicion), transform 0.1s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.contacto-form__btn:hover {
    opacity: 0.9;
}

.contacto-form__btn:active {
    transform: scale(0.97);
}

.contacto-form__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ----- Mensajes AJAX ----- */
.contacto-form__mensaje {
    min-height: 1.5em;
}

.contacto-form__mensaje.mensaje-exito {
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    color: #2d6a4f;
    background: #d8f3dc;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
}

.contacto-form__mensaje.mensaje-error {
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    color: #9b1c1c;
    background: #fde8e8;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
}

/* ----- Cita de Shakespeare — dentro del panel, bajo el form ----- */
.contacto-cita {
    margin-top: 5rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(209, 196, 188, 0.3);
}

.contacto-cita__texto {
    font-family: var(--fuente-titulo);
    font-style: italic;
    font-size: var(--fs-base);
    color: #4e453f;
    line-height: 1.7;
    margin: 0;
}

.contacto-cita__autor {
    display: block;
    font-family: var(--fuente-ui);
    font-style: normal;
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #4e453f;
    margin-top: 0.5rem;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .contacto-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .contacto-panel {
        padding: 2.5rem 3rem;
    }
}

@media (max-width: 768px) {
    .contacto-container {
        padding: 4rem 1.5rem 5rem;
    }

    .contacto-form__row-2 {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

@media (max-width: 480px) {
    .contacto-panel {
        padding: 2rem 1.5rem;
    }

    .contacto-titulo {
        font-size: 2.5rem;
    }
}


/* ============================================
   PÁGINA QUIÉN SOY — "La Economía del Pergamino"
   ============================================ */

.quien-soy-page {
    background: var(--color-fondo);
}

/* ----- Contenedor principal ----- */
.qs-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 4rem 1.5rem 4rem;
}

/* ===== HERO: grid asimétrico 7/5 ===== */
.qs-hero-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 4rem;
    align-items: start;
}

.qs-hero-left {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.qs-hero-right {
    position: sticky;
    top: 8rem;
}

/* Etiqueta "Hojas de Vida" */
.qs-label {
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-acento, #775a19);
    display: block;
    margin-bottom: -1rem;
}

/* Título: serif italic, enorme, color primario */
.qs-titulo {
    font-family: var(--fuente-titulo);
    font-size: clamp(3.75rem, 8vw, 6rem);
    font-weight: 400;
    font-style: italic;
    color: var(--color-primario, #6c4f48);
    line-height: 1.05;
    margin: 0;
}

/* Párrafos de introducción: Newsreader (titular) italic, color on-surface-variant */
.qs-intro-text {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 42rem;
}

.qs-intro-parrafo {
    font-family: var(--fuente-titulo);
    font-size: var(--fs-xl);
    font-style: italic;
    color: #4e453f;
    line-height: 1.75;
    margin: 0;
}

/* Drop cap en el primer párrafo */
.qs-intro-parrafo--dropcap::first-letter {
    float: left;
    font-size: 5rem;
    line-height: 0.8;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
    font-family: var(--fuente-titulo);
    font-weight: 600;
    font-style: normal;
    color: var(--color-primario, #6c4f48);
}

/* ----- Foto: grupo con fondo offset decorativo + grain ----- */
.qs-foto-group {
    position: relative;
}

.qs-foto-deco-bg {
    position: absolute;
    top: -1rem;
    left: -1rem;
    right: -1rem;
    bottom: -1rem;
    background: #f6f3ee;
    z-index: -1;
    transform: translate(1rem, 1rem);
}

.qs-foto-container {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 0.125rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    position: relative;
}

/* Foto: sepia + grises — igual que Stitch */
.qs-foto-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Caption: alineado a la derecha */
.qs-foto-caption {
    margin-top: 1.5rem;
    text-align: right;
}

.qs-foto-nombre {
    font-family: var(--fuente-titulo);
    font-style: italic;
    color: var(--color-primario, #6c4f48);
    font-size: var(--fs-base);
    margin: 0;
}

.qs-foto-ciudad {
    font-family: var(--fuente-ui);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #80756e;
    margin: 0;
}

/* ===== SECCIÓN BIO: pull-quote + 2-col texto ===== */
.qs-bio-section {
    max-width: 64rem;
    margin: 5rem auto 0;
}

/* Pull-quote: barra vertical dorada + blockquote */
.qs-pullquote-row {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    margin-bottom: 4rem;
}

.qs-pullquote-line {
    width: 2px;
    height: 8rem;
    background: var(--color-acento, #775a19);
    flex-shrink: 0;
}

.qs-pullquote-row .qs-pullquote {
    font-family: var(--fuente-titulo);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-style: italic;
    color: var(--color-primario, #6c4f48);
    line-height: 1.35;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

/* Dos columnas de bio: Newsreader (igual que Stitch usa font-headline) */
.qs-bio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.qs-bio-parrafo {
    font-family: var(--fuente-titulo);
    font-size: var(--fs-lg);
    line-height: 1.75;
    color: #4e453f;
    margin: 0;
}

.qs-bio-parrafo em {
    font-style: italic;
}

/* ===== SECCIÓN FILOSOFÍA: bento 3-col ===== */
.qs-filosofia-section {
    margin-top: 6rem;
}

.qs-filosofia-titulo {
    font-family: var(--fuente-titulo);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-style: italic;
    font-weight: 400;
    color: var(--color-primario, #6c4f48);
    text-align: center;
    margin-bottom: 4rem;
}

/* Grid 3 columnas */
.qs-filosofia-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* Tarjeta base */
.qs-card {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 320px;
    position: relative;
    overflow: hidden;
}

.qs-card__icon {
    font-size: 2.5rem;
    color: var(--color-acento, #775a19);
    margin-bottom: 2rem;
    flex-shrink: 0;
    display: block;
}

.qs-card__titulo {
    font-family: var(--fuente-titulo);
    font-size: var(--fs-xl);
    color: var(--color-primario, #6c4f48);
    margin: 0 0 1rem 0;
    line-height: 1.3;
}

.qs-card__titulo--lg {
    font-size: clamp(1.25rem, 2.5vw, 1.875rem);
    max-width: 26rem;
}

.qs-card__texto {
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    color: #4e453f;
    line-height: 1.7;
    margin: 0;
}

/* Si hay contents div anidado: flexbox hacia abajo */
.qs-card > div {
    display: flex;
    flex-direction: column;
}

/* Variantes de fondo */
.qs-card--low {
    background: #f6f3ee;
}

.qs-card--high {
    background: #ebe8e3;
}

/* Card amplia: ocupa 2 columnas */
.qs-card--wide {
    grid-column: span 2;
}

.qs-card--wide .qs-card__content {
    position: relative;
    z-index: 1;
}

/* Símbolo decorativo "∫" dentro de card wide */
.qs-card__deco-symbol {
    position: absolute;
    right: 0;
    bottom: 0;
    font-family: var(--fuente-titulo);
    font-size: 12rem;
    font-style: italic;
    color: var(--color-primario, #6c4f48);
    line-height: 1;
    opacity: 0.1;
    pointer-events: none;
    padding: 1rem;
    z-index: 0;
}

/* Card primaria: fondo mahogany, texto blanco */
.qs-card--primary {
    background: var(--color-primario, #6c4f48);
    color: #ffffff;
}

.qs-card__icon--inv {
    color: #fed488;
}

.qs-card__titulo--inv {
    font-family: var(--fuente-titulo);
    font-size: var(--fs-xl);
    color: #ffffff;
    margin: 0 0 1rem 0;
    line-height: 1.3;
}

.qs-card__texto--inv {
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    margin: 0;
}

/* Card surface-container-lowest */
.qs-card--lowest {
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Card imagen decorativa */
.qs-card--img {
    padding: 0;
    height: 320px;
    min-height: 320px;
    background: #f6f3ee;
}

.qs-card-img__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: sepia(0.4) contrast(0.9) brightness(0.95);
    opacity: 0.8;
}

.qs-card-img__overlay {
    position: absolute;
    inset: 0;
    background: rgba(108, 79, 72, 0.2);
    pointer-events: none;
}

/* ===== NEWSLETTER CTA: centrado con border-y ===== */
.qs-newsletter-section {
    margin: 6rem auto 0;
    text-align: center;
    max-width: 42rem;
    border-top: 1px solid #d1c4bc;
    border-bottom: 1px solid #d1c4bc;
    padding: 4rem 0;
}

.qs-newsletter-titulo {
    font-family: var(--fuente-titulo);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-style: italic;
    font-weight: 400;
    color: var(--color-primario, #6c4f48);
    margin: 0 0 2rem 0;
}

.qs-newsletter-subtitulo {
    font-family: var(--fuente-ui);
    font-size: var(--fs-base);
    color: #4e453f;
    line-height: 1.7;
    margin: 0 0 3rem 0;
}

.qs-newsletter-form {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.qs-newsletter-input {
    background: #ebe8e3;
    border: none;
    border-radius: 0.125rem;
    padding: 1rem 1.5rem;
    font-family: var(--fuente-ui);
    font-size: var(--fs-base);
    color: var(--color-texto);
    width: 100%;
    max-width: 20rem;
    box-sizing: border-box;
    transition: box-shadow var(--transicion);
}

.qs-newsletter-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primario, #6c4f48);
}

.qs-newsletter-btn {
    background: var(--color-primario, #6c4f48);
    color: #ffffff;
    border: none;
    border-radius: 0.125rem;
    padding: 1rem 2rem;
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity var(--transicion);
    white-space: nowrap;
}

.qs-newsletter-btn:hover {
    opacity: 0.9;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .qs-hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    .qs-filosofia-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .qs-card--wide {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .qs-container {
        padding: 3rem 1rem 5rem;
    }

    .qs-hero-grid {
        grid-template-columns: 1fr;
    }

    .qs-hero-left {
        order: 2;
        gap: 2rem;
    }

    .qs-hero-right {
        order: 1;
        position: static;
    }


    .qs-titulo {
        font-size: 3rem;
    }

    .qs-bio-section {
        margin-top: 4rem;
    }

    .qs-bio-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .qs-filosofia-section {
        margin-top: 5rem;
    }

    .qs-filosofia-grid {
        grid-template-columns: 1fr;
    }

    .qs-card--wide {
        grid-column: span 1;
    }

    .qs-newsletter-section {
        margin-top: 5rem;
        padding: 3rem 1rem;
    }

    .qs-newsletter-form {
        flex-direction: column;
        align-items: center;
    }

    .qs-newsletter-input {
        max-width: 100%;
    }

    .qs-newsletter-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .qs-titulo {
        font-size: 2.5rem;
    }

    .qs-pullquote {
        font-size: 1.25rem;
    }
}


/* ----- Hero ----- */
.qs-hero {
    background: var(--surface-container-low, #f6f3ee);
    padding: var(--espacio-xl) var(--espacio-sm);
    border-bottom: 1px solid var(--color-borde);
}

.qs-hero__inner {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--espacio-lg) 0;
}

.qs-hero__label {
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-acento);
    margin-bottom: var(--espacio-xs);
}

.qs-hero__titulo {
    font-family: var(--fuente-titulo);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    font-style: italic;
    color: var(--color-texto);
    line-height: 1.1;
    margin: 0;
}

/* ----- Intro: texto + foto ----- */
.qs-intro-section {
    padding: var(--espacio-xl) var(--espacio-sm);
}

.qs-intro {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--espacio-xl);
    align-items: start;
}

.qs-intro__texto {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-md);
    padding-top: var(--espacio-sm);
}

.qs-intro__parrafo {
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-lg);
    color: var(--color-texto);
    line-height: 1.8;
    margin: 0;
}

.qs-intro__foto-wrap {
    position: sticky;
    top: 5rem;
    margin: 0;
}

.qs-intro__foto {
    width: 100%;
    height: auto;
    border-radius: 0.125rem;
    display: block;
    object-fit: cover;
    background: var(--surface-container-high, #ebe8e3);
}

.qs-intro__caption {
    margin-top: var(--espacio-sm);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.qs-intro__nombre {
    font-family: var(--fuente-titulo);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--color-texto);
}

.qs-intro__ciudad {
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    color: var(--color-texto-suave);
    letter-spacing: 0.04em;
}

/* ----- Pull-quote "Annotated" ----- */
.qs-pullquote-section {
    padding: var(--espacio-xl) var(--espacio-sm);
    background: var(--surface-container, #f0ede8);
}

.qs-pullquote-wrap {
    max-width: 860px;
    margin: 0 auto;
}

.qs-pullquote {
    margin: 0;
    padding: var(--espacio-md) var(--espacio-lg);
    border-left: 3px solid var(--color-acento, #775a19);
    background: transparent;
}

.qs-pullquote__texto {
    font-family: var(--fuente-titulo);
    font-size: clamp(1.3rem, 2.5vw, 1.875rem);
    font-style: italic;
    color: var(--color-primario, #6c4f48);
    line-height: 1.55;
    margin: 0;
}

/* ----- Bio extendida ----- */
.qs-bio-section {
    padding: var(--espacio-xl) var(--espacio-sm);
}

.qs-bio {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-md);
}

.qs-bio__parrafo {
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-lg);
    color: var(--color-texto);
    line-height: 1.8;
    margin: 0;
}

/* ----- Filosofía de Trabajo ----- */
.qs-filosofia-section {
    padding: var(--espacio-xl) var(--espacio-sm);
    background: var(--surface-container-low, #f6f3ee);
}

.qs-filosofia {
    max-width: 1100px;
    margin: 0 auto;
}

.qs-filosofia__titulo {
    font-family: var(--fuente-titulo);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--color-texto);
    margin-bottom: var(--espacio-lg);
    padding-bottom: var(--espacio-sm);
    border-bottom: 2px solid var(--color-acento);
}

.qs-filosofia__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espacio-lg);
}

.qs-filosofia-card {
    background: var(--surface-container-lowest, #ffffff);
    border-radius: 0.375rem;
    padding: var(--espacio-lg);
}

.qs-filosofia-card__icon {
    font-size: 2rem;
    color: var(--color-acento, #775a19);
    display: block;
    margin-bottom: var(--espacio-sm);
}

.qs-filosofia-card__titulo {
    font-family: var(--fuente-titulo);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--color-texto);
    margin-bottom: var(--espacio-sm);
    line-height: 1.3;
}

.qs-filosofia-card__texto {
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-base);
    color: var(--color-texto-suave);
    line-height: 1.7;
    margin: 0;
}

/* ----- Imagen decorativa ----- */
.qs-deco-section {
    overflow: hidden;
}

.qs-deco-wrap {
    max-width: 100%;
    line-height: 0;
}

.qs-deco-img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
}

/* ----- Newsletter CTA ----- */
.qs-newsletter-section {
    padding: var(--espacio-xl) var(--espacio-sm);
    background: var(--surface-container, #f0ede8);
}

.qs-newsletter {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--espacio-xl);
    align-items: center;
}

.qs-newsletter__titulo {
    font-family: var(--fuente-titulo);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--color-texto);
    margin-bottom: var(--espacio-xs);
}

.qs-newsletter__subtitulo {
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-base);
    color: var(--color-texto-suave);
    line-height: 1.7;
    margin-bottom: var(--espacio-md);
}

.qs-newsletter__form {
    display: flex;
    gap: var(--espacio-sm);
    flex-wrap: wrap;
}

.qs-newsletter__field {
    flex: 1;
    min-width: 220px;
}

.qs-newsletter__field input {
    width: 100%;
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-base);
    color: var(--color-texto);
    background: var(--surface-container-lowest, #ffffff);
    border: none;
    border-radius: 0.25rem;
    padding: 0.75rem 1rem;
    box-sizing: border-box;
    transition: box-shadow var(--transicion);
}

.qs-newsletter__field input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primario);
}

.qs-newsletter__btn {
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--color-primario, #6c4f48);
    color: #ffffff;
    border: none;
    border-radius: 0.375rem;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: background var(--transicion);
    white-space: nowrap;
}

.qs-newsletter__btn:hover {
    background: var(--color-acento, #775a19);
}

.qs-newsletter__deco {
    opacity: 0.15;
}

.qs-newsletter__deco .material-symbols-outlined {
    font-size: 6rem;
    color: var(--color-primario);
}

/* ----- Responsive Quién Soy ----- */
@media (max-width: 1024px) {
    .qs-intro {
        grid-template-columns: 1fr 1fr;
        gap: var(--espacio-lg);
    }

    .qs-filosofia__grid {
        gap: var(--espacio-md);
    }
}

@media (max-width: 768px) {
    .qs-hero {
        padding: var(--espacio-lg) 1rem;
    }

    .qs-intro-section,
    .qs-bio-section,
    .qs-filosofia-section,
    .qs-newsletter-section {
        padding: var(--espacio-lg) 1rem;
    }

    .qs-intro {
        grid-template-columns: 1fr;
    }

    .qs-intro__foto-wrap {
        position: static;
        max-width: 360px;
    }

    .qs-filosofia__grid {
        grid-template-columns: 1fr;
    }

    .qs-newsletter {
        grid-template-columns: 1fr;
    }

    .qs-newsletter__deco {
        display: none;
    }

    .qs-deco-img {
        height: 220px;
    }

    .qs-pullquote-section {
        padding: var(--espacio-lg) 1rem;
    }

    .qs-pullquote {
        padding: var(--espacio-sm) var(--espacio-md);
    }
}

@media (max-width: 480px) {
    .qs-hero__titulo {
        font-size: 2rem;
    }

    .qs-newsletter__form {
        flex-direction: column;
    }

    .qs-newsletter__btn {
        width: 100%;
    }
}