/* =============================================================================
   XCMS v2 — Template Default
   ============================================================================= */

/* ---- Variables (defaults, sobreescritas por inyección del sitio) ---------- */
:root {
    --color-primary:       #0066cc;
    --color-secondary:     #111827;
    --color-accent:        #e55a00;
    --color-primary-dark:  #004fa3;
    --color-bg:            #f4f5f9;
    --color-surface:       #ffffff;
    --color-surface-2:     #f0f2f8;
    --color-border:        #e2e6f0;
    --color-text:          #111827;
    --color-text-muted:    #6b7280;
    --color-text-light:    #9ca3af;
    --font:                'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-serif:          Georgia, 'Times New Roman', serif;
    --radius:              10px;
    --radius-sm:           6px;
    --shadow:              0 4px 24px rgba(0,0,0,.09);
    --shadow-sm:           0 1px 6px rgba(0,0,0,.06);
    --transition:          .18s ease;
    --container:           1180px;
    --gap:                 1.5rem;
    --nav-h:               48px;
}

/* ---- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { font-size: 16px; scroll-behavior: smooth; }
body  { font-family: var(--font); background: var(--color-bg); color: var(--color-text);
        line-height: 1.65; -webkit-font-smoothing: antialiased;
        display: flex; flex-direction: column; min-height: 100vh; }
img   { max-width: 100%; height: auto; display: block; }
a     { color: var(--color-primary); text-decoration: none;
        transition: color var(--transition); }
a:hover { color: var(--color-primary-dark); }
ul, ol { list-style: none; }
button { font-family: var(--font); cursor: pointer; }

/* ---- Contenedor ---------------------------------------------------------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 1.25rem; }

/* ---- Main content area --------------------------------------------------- */
#main-content { flex: 1; padding: 2rem 0 3.5rem; }

/* =============================================================================
   HEADER (3 columnas: redes | logo centrado | buscador)
   ============================================================================= */
.site-header {
    background: var(--color-secondary);
    padding:    .75rem 0;
}

.site-header__inner {
    display:               grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:           center;
    gap:                   1.25rem;
}

/* Redes sociales del header */
.header-social {
    display:     flex;
    align-items: center;
    gap:         .4rem;
}

.header-social__link {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    width:         32px;
    height:        32px;
    border-radius: 50%;
    background:    rgba(255,255,255,.1);
    color:         rgba(255,255,255,.75);
    transition:    background var(--transition), color var(--transition);
}
.header-social__link:hover {
    background: var(--color-primary);
    color:      #fff;
}
.header-social__link svg { display: block; }

/* Logo (centrado por grid) */
.site-logo {
    display:     flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.site-logo img {
    max-width:  500px;
    max-height: 80px;
    width:      auto;
    height:     auto;
    object-fit: contain;
}

.site-logo__text {
    font-size:   1.6rem;
    font-weight: 800;
    color:       #fff;
    letter-spacing: -.02em;
}

/* Buscador del header */
.header-search {
    display:         flex;
    gap:             .35rem;
    justify-content: flex-end;
    max-width:       380px;
    margin-left:     auto;
}

.header-search input {
    flex:          1;
    padding:       .5rem 1rem;
    border:        1px solid rgba(255,255,255,.15);
    border-radius: 100px;
    background:    rgba(255,255,255,.08);
    color:         #fff;
    font-size:     .88rem;
    outline:       none;
    min-width:     0;
    transition:    background var(--transition), border-color var(--transition);
}
.header-search input::placeholder { color: rgba(255,255,255,.45); }
.header-search input:focus {
    background:   rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.4);
}

.header-search button {
    padding:       .5rem .85rem;
    background:    var(--color-primary);
    border:        none;
    border-radius: 100px;
    color:         #fff;
    display:       flex;
    align-items:   center;
    transition:    background var(--transition);
}
.header-search button:hover { background: var(--color-primary-dark); }

/* =============================================================================
   MOBILE BOTTOM BAR (menú tipo app — solo mobile)
   ============================================================================= */
.mobile-bottom-bar {
    display:    none;
    position:   fixed;
    bottom:     0;
    left:       0;
    right:      0;
    z-index:    300;
    background: var(--color-secondary);
    box-shadow: 0 -2px 12px rgba(0,0,0,.25);
    justify-content: space-around;
    align-items:     center;
    padding:    .35rem 0 calc(.35rem + env(safe-area-inset-bottom, 0px));
}

.mobile-bottom-bar__item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .15rem;
    padding:        .35rem .75rem;
    color:          rgba(255,255,255,.6);
    font-size:      .65rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: .04em;
    background:     none;
    border:         none;
    cursor:         pointer;
    transition:     color var(--transition);
}
.mobile-bottom-bar__item:hover,
.mobile-bottom-bar__item.is-active {
    color: #fff;
}
.mobile-bottom-bar__item.is-active svg {
    color: var(--color-accent);
}

/* Panel de categorías mobile */
.mobile-cats-panel {
    position:   fixed;
    bottom:     0;
    left:       0;
    right:      0;
    z-index:    301;
    background: var(--color-surface);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 -4px 30px rgba(0,0,0,.2);
    transform:  translateY(100%);
    transition: transform .3s ease;
    max-height: 70vh;
    overflow-y: auto;
}
.mobile-cats-panel.is-open { transform: translateY(0); }

.mobile-cats-panel__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1rem 1.25rem;
    font-size:       1rem;
    font-weight:     700;
    color:           var(--color-text);
    border-bottom:   1px solid var(--color-border);
    position:        sticky;
    top:             0;
    background:      var(--color-surface);
}
.mobile-cats-panel__header button {
    background: none;
    border:     none;
    font-size:  1.5rem;
    color:      var(--color-text-muted);
    padding:    .25rem;
    line-height: 1;
}

.mobile-cats-panel__list li a {
    display:     block;
    padding:     .85rem 1.25rem;
    color:       var(--color-text);
    font-size:   .95rem;
    border-bottom: 1px solid var(--color-border);
    transition:  background var(--transition);
}
.mobile-cats-panel__list li:last-child a { border-bottom: none; }
.mobile-cats-panel__list li a:hover { background: var(--color-surface-2); }

/* Buscador mobile (panel deslizante) */
.mobile-search-panel {
    position:   fixed;
    top:        0;
    left:       0;
    right:      0;
    z-index:    301;
    background: var(--color-secondary);
    padding:    .75rem 1rem;
    transform:  translateY(-100%);
    transition: transform .3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.mobile-search-panel.is-open { transform: translateY(0); }

.mobile-search-panel__form {
    display:     flex;
    gap:         .5rem;
    align-items: center;
}
.mobile-search-panel__form input {
    flex:          1;
    padding:       .65rem 1rem;
    border:        1px solid rgba(255,255,255,.2);
    border-radius: 100px;
    background:    rgba(255,255,255,.1);
    color:         #fff;
    font-size:     .95rem;
    outline:       none;
}
.mobile-search-panel__form input::placeholder { color: rgba(255,255,255,.45); }
.mobile-search-panel__form button[type="submit"] {
    padding:       .6rem .85rem;
    background:    var(--color-primary);
    border:        none;
    border-radius: 100px;
    color:         #fff;
    display:       flex;
    align-items:   center;
}
.mobile-search-panel__close {
    background: none;
    border:     none;
    color:      rgba(255,255,255,.7);
    font-size:  1.5rem;
    padding:    .25rem;
    line-height: 1;
}

/* Overlay para paneles mobile */
.mobile-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    z-index:    299;
    background: rgba(0,0,0,.5);
}
.mobile-overlay.is-visible { display: block; }

/* =============================================================================
   NAVBAR (sticky — solo este queda fijo al scrollear)
   ============================================================================= */
.site-nav {
    background: color-mix(in srgb, var(--color-secondary) 92%, black);
    position:   sticky;
    top:        0;
    z-index:    200;
    height:     var(--nav-h);
    box-shadow: 0 2px 12px rgba(0,0,0,.2);
    transition: transform .25s ease, box-shadow .25s ease;
}

.site-nav.is-hidden { transform: translateY(-100%); }

.site-nav__inner {
    display:     flex;
    align-items: center;
    height:      100%;
    gap:         .25rem;
}

/* Lista de nav */
.nav-list {
    display:     flex;
    align-items: stretch;
    height:      100%;
    gap:         0;
    overflow-x:  auto;
    scrollbar-width: none;
}
.nav-list::-webkit-scrollbar { display: none; }

.nav-item {
    position:    relative;
    display:     flex;
    align-items: center;
}

.nav-link {
    display:     flex;
    align-items: center;
    padding:     0 .95rem;
    height:      100%;
    color:       rgba(255,255,255,.78);
    font-size:   .875rem;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition:  color var(--transition), border-color var(--transition),
                 background var(--transition);
}
.nav-link:hover,
.nav-item.is-active .nav-link {
    color:         #fff;
    border-color:  var(--color-accent);
    background:    rgba(255,255,255,.06);
}

/* Submenú */
.nav-item.has-submenu .nav-link::after {
    content:     ' ▾';
    font-size:   .7rem;
    margin-left: .25rem;
    opacity:     .6;
}

.nav-submenu {
    display:       none;
    position:      absolute;
    top:           100%;
    left:          0;
    min-width:     200px;
    background:    var(--color-secondary);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow:    var(--shadow);
    padding:       .4rem 0;
    z-index:       201;
}

.nav-item.has-submenu:hover .nav-submenu { display: block; }

.nav-submenu li a {
    display:    block;
    padding:    .6rem 1.1rem;
    color:      rgba(255,255,255,.75);
    font-size:  .85rem;
    transition: background var(--transition), color var(--transition);
}
.nav-submenu li a:hover { background: rgba(255,255,255,.08); color: #fff; }

/* Hamburguesa */
.nav-toggle {
    display:    none;
    background: none;
    border:     none;
    color:      #fff;
    padding:    .35rem .5rem;
    flex-direction: column;
    gap:        5px;
    margin-left: auto;
}
.nav-toggle span {
    display:      block;
    width:        22px;
    height:       2px;
    background:   #fff;
    border-radius:2px;
    transition:   transform .2s, opacity .2s;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =============================================================================
   LAYOUT CON SIDEBAR
   ============================================================================= */
.home-layout {
    display: grid;
    gap:     2rem;
}
.home-layout--with-sidebar {
    grid-template-columns: 1fr 320px;
}
.home-layout--no-sidebar {
    grid-template-columns: 1fr;
}

/* Sidebar */
.site-sidebar {
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
}

.sidebar-block {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    overflow:      hidden;
}

.sidebar-block__header {
    background:     var(--color-secondary);
    color:          #fff;
    padding:        .65rem 1rem;
    font-size:      .82rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.sidebar-block__body {
    padding: 0;
}

.sidebar-article {
    display:       flex;
    gap:           .75rem;
    padding:       .75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    align-items:   flex-start;
}
.sidebar-article:last-child { border-bottom: none; }

.sidebar-article__thumb {
    flex-shrink: 0;
    width:       75px;
    height:      55px;
    overflow:    hidden;
    border-radius: var(--radius-sm);
}
.sidebar-article__thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.sidebar-article__body { flex: 1; min-width: 0; }

.sidebar-article__title {
    font-size:   .82rem;
    font-weight: 600;
    line-height: 1.35;
    color:       var(--color-text);
    display:     block;
    margin-bottom: .15rem;
}
.sidebar-article__title:hover { color: var(--color-primary); }

.sidebar-article__cat {
    font-size:      .68rem;
    font-weight:    700;
    text-transform: uppercase;
    color:          var(--color-accent);
}

.sidebar-block--html .sidebar-block__body {
    padding: 1rem;
}

/* =============================================================================
   PORTADA — SECCIONES
   ============================================================================= */
.portada-section { margin-bottom: 2.75rem; }

.section-heading {
    font-size:     1.05rem;
    font-weight:   800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:         var(--color-text);
    padding-bottom: .6rem;
    margin-bottom:  1.1rem;
    border-bottom:  3px solid var(--color-accent);
    display:       inline-block;
}

/* --- Diseño: hero-sidebar (1 grande + sidebar lateral) -------------------- */
.portada-headline {
    display:               grid;
    grid-template-columns: 1fr 300px;
    gap:                   1.25rem;
    align-items:           start;
}

.portada-headline__sidebar {
    display:        flex;
    flex-direction: column;
    gap:            0;
}

/* --- Diseño: hero-grid-2x2 (1 grande + grid 2x2) ------------------------- */
.portada-hero-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows:    auto auto;
    gap:                   1rem;
}
.portada-hero-grid > .article-card--hero {
    grid-column: 1;
    grid-row:    1 / 3;
}
.portada-hero-grid > .article-card--hero .article-card__image {
    aspect-ratio: 4/5;
    height:       100%;
}

/* --- Diseño: grid-2x1-hero-2x1 ------------------------------------------- */
.portada-2x1-hero-2x1 {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows:    auto;
    gap:                   1rem;
}
.portada-2x1-hero-2x1 > :nth-child(1) { grid-column: 1; }
.portada-2x1-hero-2x1 > :nth-child(2) { grid-column: 2; }
.portada-2x1-hero-2x1 > :nth-child(3) { grid-column: 3; }
.portada-2x1-hero-2x1 > .portada-2x1-hero-2x1__hero {
    grid-column: 2 / 4;
    grid-row:    1;
}
.portada-2x1-hero-2x1 > :nth-child(4) { grid-column: 4; }
.portada-2x1-hero-2x1 > :nth-child(5) { grid-column: 4; }

/* --- Diseño: hero-2x2 (grande arriba + 2x2 abajo) ------------------------ */
.portada-hero-bottom {
    display: grid;
    gap:     1rem;
}
.portada-hero-bottom__grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   1rem;
}

/* --- Diseño: 2x2-hero (2x2 arriba + grande abajo) ------------------------ */
.portada-top-hero {
    display: grid;
    gap:     1rem;
}
.portada-top-hero__grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   1rem;
}

/* --- Diseño: grid (grilla uniforme) --------------------------------------- */
.portada-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap:                   1.1rem;
}

/* --- Diseño: slider (carrusel horizontal) --------------------------------- */
.portada-slider {
    position: relative;
    overflow: hidden;
}

.portada-slider__track {
    display:    flex;
    gap:        1rem;
    transition: transform .4s cubic-bezier(.4,0,.2,1);
    cursor:     grab;
}
.portada-slider__track.is-grabbing { cursor: grabbing; }

.portada-slider__slide {
    flex:       0 0 calc(33.333% - .667rem);
    min-width:  0;
}

.portada-slider__btn {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    background:      rgba(0,0,0,.5);
    color:           #fff;
    border:          none;
    width:           38px;
    height:          38px;
    border-radius:   50%;
    font-size:       1.3rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         2;
    transition:      background var(--transition);
}
.portada-slider__btn:hover { background: rgba(0,0,0,.75); }
.portada-slider__btn--prev { left: .5rem; }
.portada-slider__btn--next { right: .5rem; }

/* Portada — lista */
.portada-list { display: flex; flex-direction: column; gap: 0; }

/* =============================================================================
   TARJETAS DE ARTÍCULO
   ============================================================================= */

/* --- Estándar (grilla) ---------------------------------------------------- */
.article-card--standard {
    background:    var(--color-surface);
    border-radius: var(--radius);
    overflow:      hidden;
    border:        1px solid var(--color-border);
    box-shadow:    var(--shadow-sm);
    display:       flex;
    flex-direction: column;
    transition:    transform var(--transition), box-shadow var(--transition);
}
.article-card--standard:hover {
    transform:  translateY(-3px);
    box-shadow: var(--shadow);
}

.article-card--standard .article-card__image-link { display: block; overflow: hidden; }
.article-card--standard .article-card__image {
    width:        100%;
    aspect-ratio: 16/9;
    object-fit:   cover;
    transition:   transform .35s ease;
}
.article-card--standard:hover .article-card__image { transform: scale(1.04); }

.article-card--standard .article-card__body {
    padding: .85rem 1rem 1rem;
    flex:    1;
    display: flex;
    flex-direction: column;
    gap:     .35rem;
}

/* --- Hero ------------------------------------------------------------------ */
.article-card--hero {
    background:    var(--color-surface);
    border-radius: var(--radius);
    overflow:      hidden;
    border:        1px solid var(--color-border);
    box-shadow:    var(--shadow);
    transition:    transform var(--transition), box-shadow var(--transition);
}
.article-card--hero:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,.12); }

.article-card--hero .article-card__image-link { display: block; overflow: hidden; }
.article-card--hero .article-card__image {
    width:        100%;
    aspect-ratio: 16/7;
    object-fit:   cover;
    transition:   transform .35s ease;
}
.article-card--hero:hover .article-card__image { transform: scale(1.03); }

.article-card--hero .article-card__body { padding: 1.2rem 1.35rem 1.35rem; }

.article-card--hero .article-card__title {
    font-size:   1.35rem;
    font-weight: 800;
    line-height: 1.25;
}

/* --- Row (horizontal) ----------------------------------------------------- */
.article-card--row {
    display:       flex;
    gap:           .85rem;
    padding:       .85rem 0;
    border-bottom: 1px solid var(--color-border);
    align-items:   flex-start;
}
.article-card--row:last-child { border-bottom: none; }

.article-card--row .article-card__image-link {
    flex-shrink: 0;
    width:       90px;
    height:      62px;
    overflow:    hidden;
    border-radius: var(--radius-sm);
}
.article-card--row .article-card__image {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .3s;
}
.article-card--row:hover .article-card__image { transform: scale(1.06); }

.article-card--row .article-card__body { flex: 1; display: flex; flex-direction: column; gap: .2rem; }

/* --- Elementos comunes de la card ----------------------------------------- */
.article-card__category {
    font-size:      .7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          var(--color-accent);
    display:        block;
}

.article-card__title {
    font-size:   .95rem;
    font-weight: 700;
    color:       var(--color-text);
    line-height: 1.35;
    display:     block;
}
.article-card__title:hover,
.article-card__title a:hover { color: var(--color-primary); }
.article-card__title a { color: inherit; }

.article-card--hero .article-card__category { font-size: .75rem; margin-bottom: .3rem; }

.article-card__excerpt {
    font-size:  .83rem;
    color:      var(--color-text-muted);
    display:    -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:   hidden;
    flex:       1;
}

.article-card__meta {
    font-size:  .72rem;
    color:      var(--color-text-light);
    display:    flex;
    gap:        .6rem;
    flex-wrap:  wrap;
    margin-top: auto;
    padding-top:.35rem;
}

.article-card__author { font-weight: 600; color: var(--color-text-muted); }

/* =============================================================================
   ARCHIVE HEADER (categoría / etiqueta / búsqueda)
   ============================================================================= */
.archive-header {
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.archive-title {
    font-size:   1.75rem;
    font-weight: 800;
    color:       var(--color-text);
    margin-bottom: .35rem;
}
.archive-title em { font-style: normal; color: var(--color-primary); }

.archive-desc { font-size: .95rem; color: var(--color-text-muted); }

.archive-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap:                   1.25rem;
    margin-bottom:         2rem;
}

/* =============================================================================
   BÚSQUEDA
   ============================================================================= */
.search-form { margin-bottom: 1.5rem; }

.search-form__inner {
    display:       flex;
    gap:           .5rem;
    max-width:     540px;
}

.search-form__inner input {
    flex:          1;
    padding:       .7rem 1.1rem;
    border:        2px solid var(--color-border);
    border-radius: var(--radius);
    font-size:     1rem;
    background:    var(--color-surface);
    color:         var(--color-text);
    outline:       none;
    transition:    border-color var(--transition);
}
.search-form__inner input:focus { border-color: var(--color-primary); }

.search-form__inner button {
    padding:       .7rem 1.5rem;
    background:    var(--color-primary);
    color:         #fff;
    border:        none;
    border-radius: var(--radius);
    font-size:     .95rem;
    font-weight:   600;
    transition:    background var(--transition);
}
.search-form__inner button:hover { background: var(--color-primary-dark); }

.empty-state, .empty-portada {
    text-align: center;
    padding:    3rem 1rem;
    color:      var(--color-text-muted);
    font-size:  .95rem;
}

/* =============================================================================
   PAGINACIÓN
   ============================================================================= */
.pagination {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             .5rem;
    margin:          2.5rem 0 1rem;
    flex-wrap:       wrap;
}

.pagination__btn {
    padding:       .5rem 1.1rem;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background:    var(--color-surface);
    color:         var(--color-text-muted);
    font-size:     .88rem;
    transition:    all var(--transition);
}
.pagination__btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-surface-2); }

.pagination__pages { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }

.pagination__page {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    min-width:     38px;
    height:        38px;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size:     .88rem;
    color:         var(--color-text-muted);
    background:    var(--color-surface);
    transition:    all var(--transition);
}
.pagination__page:hover  { border-color: var(--color-primary); color: var(--color-primary); }
.pagination__page.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); font-weight: 600; }
.pagination__ellipsis   { color: var(--color-text-light); padding: 0 .25rem; }

/* =============================================================================
   PÁGINA DE ARTÍCULO
   ============================================================================= */
.article-page { max-width: 780px; }

.article-header { margin-bottom: 1.5rem; }

.article-category {
    display:        inline-block;
    background:     var(--color-accent);
    color:          #fff;
    font-size:      .72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding:        .25rem .65rem;
    border-radius:  3px;
    margin-bottom:  .75rem;
}
.article-category:hover { background: var(--color-primary); color: #fff; }

.article-volanta {
    font-size:      .82rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color:          var(--color-text-muted);
    margin-bottom:  .5rem;
}

.article-title {
    font-size:     2.1rem;
    font-weight:   800;
    line-height:   1.2;
    color:         var(--color-text);
    margin-bottom: .85rem;
}

.article-bajada {
    font-size:     1.05rem;
    color:         var(--color-text-muted);
    line-height:   1.55;
    margin-bottom: 1.1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.article-meta {
    display:       flex;
    gap:           1.25rem;
    font-size:     .82rem;
    color:         var(--color-text-light);
    margin-bottom: 1.5rem;
    flex-wrap:     wrap;
    align-items:   center;
}

.article-meta__author,
.article-meta__date {
    display:     flex;
    align-items: center;
    gap:         .35rem;
}
.article-meta__author { font-weight: 600; color: var(--color-text-muted); }

/* Imagen principal (1 sola imagen) */
.article-featured-image {
    margin-bottom: 1.75rem;
    border-radius: var(--radius);
    overflow:      hidden;
}
.article-featured-image img {
    width:        100%;
    max-height:   520px;
    object-fit:   cover;
    border-radius: var(--radius);
}
.article-featured-image figcaption {
    font-size:  .78rem;
    color:      var(--color-text-light);
    padding:    .45rem .1rem 0;
    font-style: italic;
}

/* =============================================================================
   CARRUSEL DE IMÁGENES
   ============================================================================= */
.article-carousel {
    position:      relative;
    margin-bottom: 1.75rem;
    border-radius: var(--radius);
    overflow:      hidden;
    background:    #000;
    user-select:   none;
}

.carousel-track {
    display:    flex;
    transition: transform .4s cubic-bezier(.4,0,.2,1);
}

.carousel-slide {
    min-width:  100%;
    position:   relative;
}
.carousel-slide img {
    width:       100%;
    max-height:  520px;
    object-fit:  cover;
    display:     block;
}
.carousel-slide figcaption {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    background: linear-gradient(transparent, rgba(0,0,0,.65));
    color:      rgba(255,255,255,.9);
    font-size:  .78rem;
    padding:    1.5rem .75rem .6rem;
    font-style: italic;
}

.carousel-btn {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    background:      rgba(0,0,0,.45);
    color:           #fff;
    border:          none;
    font-size:       2rem;
    line-height:     1;
    width:           44px;
    height:          44px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background var(--transition);
    z-index:         2;
}
.carousel-btn:hover        { background: rgba(0,0,0,.75); }
.carousel-btn--prev        { left: .75rem; }
.carousel-btn--next        { right: .75rem; }

.carousel-dots {
    position:        absolute;
    bottom:          .75rem;
    left:            50%;
    transform:       translateX(-50%);
    display:         flex;
    gap:             .4rem;
    z-index:         2;
}
.carousel-dot {
    width:           9px;
    height:          9px;
    border-radius:   50%;
    background:      rgba(255,255,255,.45);
    border:          none;
    padding:         0;
    transition:      background var(--transition), transform var(--transition);
}
.carousel-dot.is-active { background: #fff; transform: scale(1.25); }

.carousel-counter {
    position:   absolute;
    top:        .7rem;
    right:      .85rem;
    background: rgba(0,0,0,.5);
    color:      #fff;
    font-size:  .75rem;
    padding:    .2rem .55rem;
    border-radius: 20px;
    z-index:    2;
}

/* =============================================================================
   CONTENIDO DEL ARTÍCULO (salida del editor)
   ============================================================================= */
.article-content {
    font-family: var(--font-serif);
    font-size:   1.06rem;
    line-height: 1.85;
    color:       var(--color-text);
    margin-bottom: 2rem;
}
.article-content h2, .article-content h3, .article-content h4 {
    font-family: var(--font);
    font-weight: 700;
    margin:      1.75rem 0 .75rem;
    line-height: 1.3;
}
.article-content h2 { font-size: 1.45rem; }
.article-content h3 { font-size: 1.2rem; }
.article-content h4 { font-size: 1rem; }
.article-content p  { margin-bottom: 1.15rem; }
.article-content ul, .article-content ol {
    padding-left: 1.6rem; margin-bottom: 1.1rem;
}
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li { margin-bottom: .45rem; }
.article-content blockquote {
    border-left: 4px solid var(--color-primary);
    padding:     .85rem 1.35rem;
    margin:      1.5rem 0;
    background:  var(--color-surface-2);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color:       var(--color-text-muted);
    font-style:  italic;
}
.article-content img {
    border-radius: var(--radius-sm);
    margin: 1.25rem auto;
    max-width: 100%;
}
.article-content a { color: var(--color-primary); text-decoration: underline; }
.article-content strong { font-weight: 700; }
.article-content iframe {
    width: 100%; aspect-ratio: 16/9; border: none;
    border-radius: var(--radius-sm); margin: 1.25rem 0;
}
.article-content table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .92rem; font-family: var(--font); }
.article-content th, .article-content td { padding: .5rem .75rem; border: 1px solid var(--color-border); text-align: left; }
.article-content th { background: var(--color-surface-2); font-weight: 600; }

/* =============================================================================
   VIDEO / ADJUNTOS
   ============================================================================= */
.article-videos,
.article-audios { margin: 1.75rem 0; }
.audio-wrapper {
    margin:        1rem 0;
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       .75rem 1rem;
}
.article-audio {
    width:         100%;
    display:       block;
    border-radius: var(--radius);
}
.video-wrapper {
    margin:        1.25rem 0;
    background:    #000;
    border-radius: var(--radius);
    overflow:      hidden;
    box-shadow:    0 2px 12px rgba(0,0,0,.18);
}
.article-video {
    width:         100%;
    height:        auto;
    border-radius: 0;   /* el wrapper ya tiene el radius */
    display:       block;
    background:    #000;
}
.media-caption  { font-size: .78rem; color: var(--color-text-light); margin: .4rem .6rem .6rem; font-style: italic; }

.article-downloads {
    margin:        1.75rem 0;
    padding:       1.35rem;
    background:    var(--color-surface);
    border-radius: var(--radius);
    border:        1px solid var(--color-border);
}
.article-downloads h3 {
    font-size:   .88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:       var(--color-text-muted);
    margin-bottom: .85rem;
    font-family: var(--font);
}

.download-list { display: flex; flex-direction: column; gap: .5rem; }

.download-item {
    display:       flex;
    align-items:   center;
    gap:           .85rem;
    padding:       .65rem 1rem;
    background:    var(--color-surface-2);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition:    background var(--transition);
}
.download-item:hover          { background: #e8eaf6; }
.download-item__icon          { font-size: 1.4rem; flex-shrink: 0; }
.download-item__info          { flex: 1; min-width: 0; }
.download-item__name          { font-size: .9rem; color: var(--color-text); font-weight: 500; display: block; }
.download-item__name:hover    { color: var(--color-primary); text-decoration: underline; }
.download-item__size          { font-size: .75rem; color: var(--color-text-light); }
.download-item__ext {
    font-size:      .68rem;
    font-weight:    700;
    text-transform: uppercase;
    background:     var(--color-primary);
    color:          #fff;
    padding:        .15rem .45rem;
    border-radius:  3px;
    flex-shrink:    0;
}

/* =============================================================================
   ETIQUETAS
   ============================================================================= */
.article-tags {
    display:    flex;
    flex-wrap:  wrap;
    align-items: center;
    gap:        .4rem;
    margin:     1.75rem 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}

.article-tags__label {
    font-size:   .78rem;
    font-weight: 700;
    color:       var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-right: .25rem;
}

.tag-pill {
    display:       inline-block;
    padding:       .3rem .8rem;
    background:    var(--color-surface-2);
    border:        1px solid var(--color-border);
    border-radius: 100px;
    font-size:     .78rem;
    color:         var(--color-text-muted);
    transition:    all var(--transition);
}
.tag-pill:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* =============================================================================
   BOTONES DE COMPARTIR
   ============================================================================= */
.article-share {
    margin:     1.75rem 0 2rem;
    padding:    1.25rem;
    background: var(--color-surface);
    border:     1px solid var(--color-border);
    border-radius: var(--radius);
}

.article-share__label {
    font-size:      .72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color:          var(--color-text-light);
    display:        block;
    margin-bottom:  .75rem;
}

.article-share__buttons {
    display:   flex;
    gap:       .6rem;
    flex-wrap: wrap;
}

.share-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           .45rem;
    padding:       .55rem 1.1rem;
    border-radius: var(--radius-sm);
    font-size:     .85rem;
    font-weight:   600;
    color:         #fff;
    border:        none;
    cursor:        pointer;
    text-decoration: none;
    transition:    opacity var(--transition), transform var(--transition);
}
.share-btn:hover       { opacity: .88; transform: translateY(-1px); color: #fff; }
.share-btn svg         { flex-shrink: 0; }
.share-btn--facebook   { background: #1877f2; }
.share-btn--twitter    { background: #000; }
.share-btn--whatsapp   { background: #25d366; }
.share-btn--telegram   { background: #0088cc; }
.share-btn--native     { background: var(--color-text-muted); }
.share-btn--copy       { background: var(--color-text-muted); }
.share-btn--copy.copied { background: #16a34a; }

/* =============================================================================
   PÁGINAS INTERNAS
   ============================================================================= */
.page-content {
    max-width:  780px;
}

.page-header {
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid var(--color-border);
}

.page-title {
    font-size:   2rem;
    font-weight: 700;
    line-height: 1.25;
    color:       var(--color-text);
    margin:      0 0 .6rem;
}

.page-description {
    font-size:  1.05rem;
    color:      var(--color-text-muted);
    margin:     0;
    line-height: 1.6;
}

.page-body {
    font-family: var(--font-serif, Georgia, 'Times New Roman', serif);
    font-size:   1.05rem;
    line-height: 1.75;
    color:       var(--color-text);
}

.page-body h2 { font-size: 1.4rem; margin: 1.75rem 0 .6rem; }
.page-body h3 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.page-body p  { margin: 0 0 1.1rem; }
.page-body ul, .page-body ol { margin: 0 0 1.1rem 1.5rem; }
.page-body li { margin-bottom: .4rem; }
.page-body a  { color: var(--color-primary); text-decoration: underline; }

/* =============================================================================
   ARTÍCULOS RELACIONADOS
   ============================================================================= */
.related-articles {
    margin-top:    2.5rem;
    padding-top:   2rem;
    border-top:    2px solid var(--color-border);
}

.related-articles__title {
    font-size:   1.1rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:       var(--color-text);
}

.related-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   1.1rem;
}

.related-item {}

.related-item__thumb {
    display:       block;
    overflow:      hidden;
    border-radius: var(--radius-sm);
    margin-bottom: .65rem;
    aspect-ratio:  16/9;
}
.related-item__thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .35s;
}
.related-item__thumb:hover img { transform: scale(1.05); }

.related-item__body {}
.related-item__title { font-size: .88rem; font-weight: 600; line-height: 1.35; margin-bottom: .3rem; }
.related-item__title a { color: var(--color-text); }
.related-item__title a:hover { color: var(--color-primary); }
.related-item__date { font-size: .73rem; color: var(--color-text-light); }

/* =============================================================================
   FOOTER
   ============================================================================= */
.site-footer {
    background: var(--color-secondary);
    color:      rgba(255,255,255,.75);
    padding:    3rem 0 0;
    margin-top: auto;
}

.site-footer__inner {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap:                   2.5rem;
    padding-bottom:        2.5rem;
}

/* Logo del footer */
.footer-brand { display: flex; flex-direction: column; gap: .85rem; }

.footer-logo-link { display: inline-flex; }

.footer-logo {
    max-width:  500px;
    max-height: 80px;
    width:      auto;
    height:     auto;
    object-fit: contain;
    opacity:    .9;
}

.footer-logo-text {
    font-size:   1.4rem;
    font-weight: 800;
    color:       #fff;
}

.footer-social { display: flex; flex-wrap: wrap; gap: .45rem; }

.footer-social__link {
    display:       inline-flex;
    align-items:   center;
    padding:       .3rem .75rem;
    background:    rgba(255,255,255,.1);
    border-radius: 100px;
    color:         rgba(255,255,255,.8);
    font-size:     .78rem;
    font-weight:   500;
    transition:    background var(--transition), color var(--transition);
}
.footer-social__link:hover { background: var(--color-primary); color: #fff; }

.footer-nav__title {
    font-size:      .72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color:          rgba(255,255,255,.4);
    margin-bottom:  .85rem;
}

.footer-nav ul    { display: flex; flex-direction: column; gap: .4rem; }
.footer-nav li a  { font-size: .88rem; color: rgba(255,255,255,.65); transition: color var(--transition); }
.footer-nav li a:hover { color: #fff; }

.footer-contact   { font-size: .85rem; line-height: 1.9; color: rgba(255,255,255,.6); }
.footer-contact a { color: rgba(255,255,255,.65); }
.footer-contact a:hover { color: #fff; }

.site-footer__bottom {
    border-top:  1px solid rgba(255,255,255,.08);
    padding:     1rem 0;
    font-size:   .78rem;
    color:       rgba(255,255,255,.35);
    text-align:  center;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
    .portada-headline { grid-template-columns: 1fr 260px; }
    .portada-hero-grid { grid-template-columns: 1fr 1fr; }
    .portada-2x1-hero-2x1 { grid-template-columns: repeat(2, 1fr); }
    .portada-2x1-hero-2x1 > .portada-2x1-hero-2x1__hero { grid-column: 1 / -1; }
    .portada-2x1-hero-2x1 > :nth-child(4) { grid-column: auto; }
    .portada-2x1-hero-2x1 > :nth-child(5) { grid-column: auto; }
    .portada-slider__slide { flex: 0 0 calc(50% - .5rem); }
    .home-layout--with-sidebar { grid-template-columns: 1fr 280px; }
    .site-footer__inner { grid-template-columns: 1fr 1fr; }
    .site-footer__inner > .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    /* Header: solo logo centrado */
    .site-header__inner {
        grid-template-columns: 1fr;
        justify-items:         center;
    }
    .header-social { display: none; }
    .header-search { display: none; }

    /* Bottom bar visible */
    .mobile-bottom-bar { display: flex; }
    body { padding-bottom: 60px; }

    /* Navbar mobile */
    .site-nav { display: none; }

    /* Sidebar pasa debajo */
    .home-layout--with-sidebar { grid-template-columns: 1fr; }

    /* Bloques portada */
    .portada-headline { grid-template-columns: 1fr; }
    .portada-headline__sidebar { flex-direction: row; overflow-x: auto; }
    .portada-headline__sidebar .article-card--row {
        min-width: 220px; flex-direction: column;
        border-bottom: none; border-right: 1px solid var(--color-border); padding-right: .85rem;
    }
    .portada-headline__sidebar .article-card--row .article-card__image-link {
        width: 100%; height: 120px;
    }
    .portada-hero-grid {
        grid-template-columns: 1fr;
        grid-template-rows:    auto;
    }
    .portada-hero-grid > .article-card--hero {
        grid-column: 1;
        grid-row:    auto;
    }
    .portada-hero-grid > .article-card--hero .article-card__image {
        aspect-ratio: 16/9;
        height: auto;
    }
    .portada-2x1-hero-2x1 {
        grid-template-columns: 1fr;
    }
    .portada-2x1-hero-2x1 > .portada-2x1-hero-2x1__hero { grid-column: 1; }
    .portada-hero-bottom__grid { grid-template-columns: 1fr; }
    .portada-top-hero__grid    { grid-template-columns: 1fr; }
    .portada-slider__slide { flex: 0 0 calc(50% - .5rem); }

    .portada-grid { grid-template-columns: repeat(2, 1fr); }
    .archive-grid { grid-template-columns: repeat(2, 1fr); }
    .article-title { font-size: 1.6rem; }
    .site-footer__inner { grid-template-columns: 1fr; gap: 1.75rem; }
    .site-footer__inner > .footer-brand { grid-column: 1; }
    .related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
    :root { --gap: 1rem; }
    .portada-grid { grid-template-columns: 1fr; }
    .portada-hero-bottom__grid { grid-template-columns: 1fr; }
    .portada-top-hero__grid    { grid-template-columns: 1fr; }
    .portada-slider__slide { flex: 0 0 100%; }
    .archive-grid { grid-template-columns: 1fr; }
    .article-title { font-size: 1.35rem; }
    .article-carousel .carousel-btn { width: 34px; height: 34px; font-size: 1.5rem; }
    .article-share__buttons .share-btn { font-size: .8rem; padding: .5rem .85rem; }
    .related-grid { grid-template-columns: 1fr; }
    .site-logo img { max-height: 56px; }
}