/*
Version: 1.0
Version: 1.1 Cambiar a clases wp
Version: 1.2 Layout sin contenido
Version: 1.3 Media Queries
Version: 1.4 P63 — Doble compensación de la barra fija en el archive de
  portafolio. Mobile: .archive-container tenía padding-top:123px propio,
  sumado al margin-top:120px base de .portafolio-grid (y al de
  .noticias-grid) — 243px antes de la primera tarjeta. Eliminado el
  padding-top del contenedor, la compensación queda en un solo lugar.
  Desktop: .portafolio-cats-bar (45px) + .portafolio-grid (140px) se
  sumaban igual — grid bajado a 32px, solo separación visual entre
  chips y grid, ya que el cats-bar es el que compensa la barra real.
Autor: fcastillo@madis.cl
*/
/*Cambios frente al main*/
/* Header*/

main .sidenavbar {
    position: relative;
}
main .sidenavbar {
    margin: 0;
}
.sidenavbar ul {
    position: fixed;
    top: 78px;
    z-index: var(--z-sidenavbar);
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    background: rgba(28,20,20,.72);
    backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 32px;
}
.sidenavbar ul li { list-style: none; }
.sidenavbar ul li a,
.sidenavbar select,
.sidenavbar input[type='text'],
.sidenavbar input[type='date'] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--mid-gray);
    background: transparent;
    border: 1px solid var(--line);
    padding: 6px 14px;
    border-radius: 2px;
    text-decoration: none;
    transition: border-color .2s, color .2s;
    cursor: pointer;
    appearance: none;
}
.sidenavbar ul li a:hover,
.sidenavbar ul li a.active {
    border-color: var(--red-accent);
    color: var(--red-accent);
}
.sidenavbar select:hover,
.sidenavbar select:focus {
    border-color: var(--mid-gray);
    color: var(--white);
    outline: none;
}
.sidenavbar form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* Labels inline dentro de los forms de la barra */
.sidenavbar form label {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--mid-gray);
    white-space: nowrap;
    cursor: default;
}
/* Modo claro */
body.light .sidenavbar ul {
    background: rgba(250,250,250,.96);
    border-bottom-color: var(--line);
}
body.light .sidenavbar ul li a,
body.light .sidenavbar select,
body.light .sidenavbar input {
    color: var(--mid-gray);
    border-color: var(--line);
}

/* P16 — .sidenavbar--hero: páginas donde el header de encima nace
   transparente (single-proyecto_portafolio.php hoy; page-servicio.php
   queda pendiente de aplicar el mismo $args['hero'] cuando se revise
   ese archivo). Antes del scroll, mismo tratamiento que header.nav en
   su propio estado pre-scroll (100% transparente, SIN backdrop-filter
   — header.nav tampoco lo usa antes de .scrolled, ver main.css). Con
   scroll, vuelve a ser idéntico al .sidenavbar de siempre (mismo rgba,
   mismo blur) — por eso el combinador reusa la clase .scrolled que ya
   gestiona navbar.js sobre header.nav, en vez de un estado propio.
   header.nav y #content son hermanos directos (confirmado en
   header.php), el combinador de hermanos aplica sin necesidad de JS
   adicional.
   BUG REAL de la primera versión, ya corregido: escribí
   ".sidenavbar--hero ul" como selector aparte — una sola clase, misma
   especificidad (0,1,1) que ".sidenavbar ul" y MENOR que
   "body.light .sidenavbar ul" (0,2,1). En modo claro (el default del
   sitio, ver navbar.js) la regla de modo claro le ganaba siempre a mi
   override, sin importar el orden en el archivo — la clase se
   aplicaba bien en el HTML (confirmado con "Ver código fuente"), pero
   el CSS nunca llegaba a pintarla. Fix: selector compuesto
   ".sidenavbar.sidenavbar--hero" (las DOS clases juntas, como
   realmente están en el div) — sube la especificidad a (0,2,1), y la
   variante "body.light .sidenavbar.sidenavbar--hero ul" a (0,3,1),
   por encima de "body.light .sidenavbar ul" sin depender de qué línea
   quedó más abajo en el archivo. */
.sidenavbar.sidenavbar--hero ul {
    background: transparent;
    backdrop-filter: none;
    border-bottom-color: transparent;
}
body.light .sidenavbar.sidenavbar--hero ul {
    background: transparent;
    backdrop-filter: none;
    border-bottom-color: transparent;
}
header.nav.scrolled ~ #content .sidenavbar.sidenavbar--hero ul {
    background: rgba(28,20,20,.72);
    backdrop-filter: blur(18px) saturate(140%);
    border-bottom-color: var(--line);
}
body.light header.nav.scrolled ~ #content .sidenavbar.sidenavbar--hero ul {
    background: rgba(250,250,250,.96);
    backdrop-filter: blur(18px) saturate(140%);
    border-bottom-color: var(--line);
}
/* Filtros toggle — mobile */
.filtros-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 6px 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    letter-spacing: .06em;
    color: var(--mid-gray);
    cursor: pointer;
    transition: border-color .2s, color .2s;
    margin: 8px 16px;
}
.filtros-toggle:hover {
    border-color: var(--red-accent);
    color: var(--red-accent);
}

/* Botón volver dentro de la barra — solo en singles */
.barra-volver {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--mid-gray);
    text-decoration: none;
    border: 1px solid var(--line);
    padding: 6px 14px;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color .2s, color .2s, gap .25s var(--ease);
    white-space: nowrap;
}
.barra-volver:hover {
    border-color: var(--red-accent);
    color: var(--red-accent);
    gap: 10px;
}
.barra-sep {
    width: 1px;
    height: 2px;
    background: var(--line);
    flex-shrink: 0;
}
/* Estado abierto en mobile — sin inline styles */
.filtros-toggle.is-open {
    border-bottom: none;
    color: var(--white);
}
/* Nosotros */
#proposito div, #fundamentos div, #historia div {
    margin: 24px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    max-width: 80vw;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 16px;
}
#proposito div article, #fundamentos div article {
    background-color: var(--dark-graphite);
    padding: 24px 40px;
    border-radius: 0 16px;
}
#proposito div h2, #fundamentos div h2 {
    border: transparent;
    margin: 0;
}
/* Noticias y Portafolio */
/* Layout mínimo para archives vacíos o con poco contenido */
.main-content-madis {
    min-height: calc(100vh - var(--header-height));
    display: flex;
    flex-direction: column;
}
.archive-container {
    flex: 1;
}
.noticias-grid{
    margin: 140px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-width: 1280px;
    width: 100%;
}
.card-noticia-madis {
    display: flex;
    flex-direction: column;
    background: var(--dark-graphite);
    overflow: hidden;
    transition: background .25s var(--ease);
}
.card-noticia-madis:hover { background: var(--dark-graphite); }
/* Título de noticia en grid */
.card-noticia-titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--white);
    line-height: 1.3;
    border: none;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .25s;
}
.card-noticia-madis:hover .card-noticia-titulo { color: var(--red-accent); }
.card-noticia-titulo a {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}
.card-noticia-imagen {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    flex-shrink: 0;
}
.card-noticia-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease), opacity .4s;
    display: block;
}
.card-noticia-madis:hover .card-noticia-imagen img {
    transform: scale(1.04);
    opacity: .95;
}
.card-noticia-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px 22px;
    flex: 1;
}
.card-noticia-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.card-noticia-cats a {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--red-accent);
}
.card-noticia-extracto p {
    font-family: 'Nunito', sans-serif;
    font-size: .9rem;
    color: var(--reading-text);
    line-height: 1.65;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-noticia-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    letter-spacing: .06em;
    color: var(--mid-gray);
    margin-top: 4px;
    transition: gap .3s var(--ease), color .2s;
    text-decoration: none;
}
.card-noticia-madis:hover .card-noticia-cta,
.card-noticia-cta:hover {
    gap: 14px;
    color: var(--red-accent);
}
/* ─── Portafolio grid — mobile-first (P40/P41/P42) ─────────────────
   Base (mobile/tablet, <1024px): 1 columna, todas las tarjetas 16/9,
   sin distinción grande/chica — no hay espacio para que la diferencia
   se note. El grid desktop (2 columnas, patrón 2+1 repetido cada 3
   tarjetas) es exclusivo de ≥1024px, ver @media más abajo — así lo
   pidió el usuario explícitamente ("para desktop"). El flag
   .card-proyecto-madis--grande se asigna en JS
   (archive-proyecto_portafolio.php, renderPagina), recalculado sobre
   el subconjunto visible cada vez que cambia el filtro o la página —
   no en PHP ni con :nth-of-type, porque la posición debe depender de
   lo que arroje la consulta vigente (todas, por categoría, por
   fecha), no de un orden fijo pre-filtro. ──────────────────────── */
.portafolio-grid {
    margin: 120px auto 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
}
.card-proyecto-madis {
    position: relative;
    overflow: hidden;
    background: var(--dark-graphite);
    aspect-ratio: 16 / 9;
}
.card-proyecto-enlace {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.card-proyecto-imagen-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.img-proyecto-grid {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
    transition: transform .8s var(--ease), opacity .4s;
    transform: scale(1.04);
    filter: contrast(1.05);
}
.card-proyecto-madis:hover .img-proyecto-grid {
    transform: scale(1);
    opacity: .85;
}
.card-proyecto-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(16,10,10,.85) 0%, transparent 55%);
    display: flex;
    align-items: flex-end;
    padding: 1.5rem;
    transition: background .3s;
}
.card-proyecto-madis:hover .card-proyecto-overlay {
    background: linear-gradient(0deg, rgba(229,29,37,.5) 0%, transparent 60%);
}
.card-proyecto-titulo {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(.9rem, 1.4vw, 1.1rem);
    font-weight: 600;
    color: var(--static-ghost-white);
    margin: 0 0 4px;
    border: none;
    letter-spacing: -.01em;
}
.card-proyecto-categoria {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--red-accent);
}
/* P16 — bloque completo retirado: .layout-noticia, #hero-image/
   #banner-servicio, #display-noticia, .lead-noticia/.cuerpo-noticia/
   .cierre-noticia, .cita-bloque — scaffold de layout previo a que
   existieran single-noticia.css (plantilla de noticia) y el .svc-hero
   actual (services.css, #banner-servicio era el hero viejo de servicio).
   Cero uso de ningún selector ni ID en los 9 archivos de plantilla
   auditados — ninguna plantilla actual los genera. */
.noticia-fecha {
    color: var(--reading-text);
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    letter-spacing: .04em;
}
.noticia-separador, .card-noticia-meta span {
    color: var(--mid-gray);
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    letter-spacing: .04em;
}
figure.size-large {
    max-width: 800px;
}
/* P16 — bloque completo retirado: carrusel viejo (.carousel/.carousel-container/
   .carousel-slide) previo a que carousel.css existiera como archivo propio,
   con .arrow-icon/.track-group/.track-icon (flechas de navegación antes del
   rediseño P69 a botón circular rojo). border-radius:0 16px y hover cian
   #00E5FF coinciden exactos con el "antes" que el changelog de carousel.css
   ya documenta como reemplazado — nunca se limpió de pages.css cuando se
   hizo la extracción. Cero uso en los 9 archivos de plantilla auditados. */


/* ─── Chips de categoría portafolio ─────────────────────── */
.portafolio-cats-bar {
    display: none; /* solo desktop — en mobile usa el select de barra-filtros */
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 1.5rem 6vw .75rem;
    margin-top: 45px; /* compensa barra-filtros fija */
}
.pcat-chip {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mid-gray);
    background: transparent;
    border: 1px solid var(--line);
    padding: 6px 14px;
    border-radius: 2px;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
    white-space: nowrap;
}
.pcat-chip:hover {
    border-color: var(--mid-gray);
    color: var(--white);
}
.pcat-chip.active {
    border-color: var(--red-accent);
    color: var(--red-accent);
    background: rgba(229,29,37,.06);
}


/* ─── Paginación portafolio (JS) ────────────────────────── */
.portafolio-paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2.5rem 6vw;
    flex-wrap: wrap;
}
.pp-count {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--mid-gray);
    opacity: .5;
    margin-right: .75rem;
}
.pp-btn {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--mid-gray);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 2px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
    padding: 0;
}
.pp-btn:hover:not(:disabled) {
    border-color: var(--mid-gray);
    color: var(--white);
}
.pp-btn.active {
    border-color: var(--red-accent);
    color: var(--red-accent);
    background: rgba(229,29,37,.06);
}
.pp-btn:disabled {
    opacity: .2;
    cursor: default;
}


/* ═══════════════════════════════════════════
   MODAL PORTAFOLIO
   Variables: main.css (--black, --graphite, --white, --mid-gray,
   --red-accent, --line, --ease, --z-modal)
   ═══════════════════════════════════════════ */

/* Icono + en la card */
.card-proyecto-plus {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(16,10,10,.38);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mid-gray);
    flex-shrink: 0;
    opacity: 0;
    transform: rotate(-45deg) scale(.9);
    transition: opacity .35s, transform .4s var(--ease),
                background .2s, border-color .2s, color .2s;
}
.card-proyecto-madis:hover .card-proyecto-plus {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    background: var(--red-accent);
    border-color: var(--red-accent);
    color: var(--static-white);
}
/* Línea roja inferior a la card */
.card-proyecto-madis::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    width: 0;
    height: 2px;
    background: var(--red-accent);
    transition: width .55s var(--ease);
    pointer-events: none;
}
.card-proyecto-madis:hover::before { width: 100%; }

/* Mobile */
@media (max-width: 767px) {
    /* Contenedor: flujo normal, pegado bajo el header fijo */
    main .sidenavbar {
        position: fixed;
        top: 79px;
        left: 0;
        right: 0;
        width: 100%;
        z-index: var(--z-sidenavbar);
        background: var(--dark-graphite);
        border-bottom: 1px solid var(--line);
        box-sizing: border-box;
    }
    body.light main .sidenavbar {
        background: var(--dark-graphite);
    }

    /* P16 — mismo criterio que en desktop (ver arriba, fuera de este
       media query): pre-scroll transparente igual que header.nav,
       opaco recién cuando header.nav gana .scrolled. Acá el fondo vive
       en main.sidenavbar (el contenedor con el botón "Filtros"), no en
       .sidenavbar ul (que en mobile ya es transparente siempre, ver
       regla más abajo).
       Mismo fix de especificidad que en desktop: "main .sidenavbar--hero"
       solo (0,1,1) perdía contra "body.light main .sidenavbar" (0,2,1)
       en modo claro. Selector compuesto "main .sidenavbar.sidenavbar--hero"
       (0,2,1) + variante body.light explícita (0,3,1). */
    main .sidenavbar.sidenavbar--hero {
        background: transparent;
        border-bottom-color: transparent;
    }
    body.light main .sidenavbar.sidenavbar--hero {
        background: transparent;
        border-bottom-color: transparent;
    }
    header.nav.scrolled ~ #content main .sidenavbar.sidenavbar--hero {
        background: var(--dark-graphite);
    }
    /* Si el usuario abre "Filtros" antes de hacer scroll (header todavía
       transparente sobre el hero), el desplegable igual necesita fondo
       sólido para que "Área"/"Ordenar por fecha" se lean — sin esto,
       heredaba el transparent de arriba y quedaba ilegible sobre la foto. */
    main .sidenavbar.sidenavbar--hero:has(.filtros-toggle.is-open) {
        background: var(--dark-graphite);
    }

    /* Toggle: ocupa el ancho, siempre visible */
    .filtros-toggle {
        display: flex;
        width: 100%;
        margin: 0;
        padding: 11px 16px;
        border: none;
        border-radius: 0;
        background: transparent;
        color: var(--mid-gray);
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        letter-spacing: .06em;
        cursor: pointer;
        box-sizing: border-box;
    }

    /* ul: flujo normal bajo el toggle, oculto por defecto */
    .sidenavbar ul {
        position: static;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 16px 12px;
        background: transparent;
        border-bottom: none;
        backdrop-filter: none;
        gap: 6px;
    }
    .sidenavbar ul li { width: 100%; }
    .sidenavbar select,
    .sidenavbar input { width: 100%; }

    /* P63: .archive-container tenía su propio padding-top:123px acá,
       pero .portafolio-grid (margin-top:120px) y .noticias-grid
       (margin-top:140px) YA compensan la barra fija por su cuenta como
       regla base, sin depender de este breakpoint — se sumaban:
       123px + 120px = 243px antes de la primera tarjeta. Eliminado,
       la compensación queda en un solo lugar (el grid). */

    .noticias-grid { grid-template-columns: 1fr; }
}



/* Tablet */

@media (min-width: 768px) {
    .filtros-toggle {
        display: none;
    }
    .noticias-grid { grid-template-columns: repeat(2, 1fr); }
}



/* Desktop */
@media (min-width: 1024px) {
    /* Nosotros */
    #proposito div, #fundamentos div, #historia div {
        margin: 24px 160px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        max-width: 800px;
        gap: 40px;
    }
    /* Noticias y Portafolio */
    .noticias-grid { grid-template-columns: repeat(4, 1fr); }
    .portafolio-cats-bar { display: flex; }

    /* ── Grid portafolio desktop (P42) — 2 columnas, no 3. Patrón
       repetido cada 3 tarjetas: 2 en fila (16/9 cada una, media
       columna) + 1 a ancho completo (16/9 también, misma proporción,
       solo más grande por ocupar las 2 columnas). Con 8 proyectos por
       página: fila1=2, fila2=1 ancho completo, fila3=2, fila4=1 ancho
       completo, fila5=2 — 8 en total. Como ambas variantes son 16/9,
       ya no hace falta la transigencia de "alguna queda cuadrada" del
       diseño anterior (P40) — acá todo es apaisado. Grande/chica lo
       asigna el JS (renderPagina) sobre el subconjunto visible, ver
       comentario arriba del bloque base. ── */
    .portafolio-grid {
        grid-template-columns: repeat(2, 1fr);
        background: none;
        max-width: 1280px;
        /* P63: era 140px — .portafolio-cats-bar (arriba en el DOM) ya
           compensa la barra fija con sus 45px de margin-top; esto se
           sumaba encima. Queda solo como separación visual entre chips
           y grid. Nota: si $terms viniera vacío, .portafolio-cats-bar
           no se renderiza y este grid quedaría sin compensación real —
           caso de borde, no se resuelve acá porque el sitio siempre
           tiene categorías cargadas. */
        margin: 32px auto 0;
    }
    .card-proyecto-madis {
        aspect-ratio: 16 / 9;
        min-height: unset;
        grid-column: unset;
        grid-row: unset;
    }
    .card-proyecto-madis--grande {
        grid-column: 1 / -1;
        /* P56 — 21/9 en vez de 16/9 solo para la tarjeta a ancho
           completo: a 16/9 y ancho de pantalla completo se ve muy alta/
           "cuadrada" en pantallas grandes (mismo síntoma que llevó a
           21/9 en el grid del home). Las tarjetas en pareja (media
           columna) se quedan en 16/9, esto es solo para la que ocupa
           las 2 columnas. Bonus: al bajar la altura, la fila siguiente
           asoma más en el viewport sin scrollear, como pediste. */
        aspect-ratio: 21 / 9;
    }
}