@charset "utf-8";
/*
Theme Name: Matias Vargas
Text Domain: matiasvargas
Author: Ricardo Juárez
Author URI: https://rjvv.com/
Version: 1.0
License: GNU/GPL Version 2 or later
Copyright: (c) 2026 Ricardo Juárez
*/


:root {

    /* Colores */
    --primary:  #FFFFFF;
    --contrast: #000000;
    --accent:   red;
    --grey:     #888888;

    /* Espaciados */
    --pad:  20px;
    --padm: 50px;
    --padb: 130px;
    --padh: 200px;

    /* Fuentes */
    --sans: 'Haffer', sans-serif;

    /* Tipografía — único estilo del sitio */
    --line-height: 16px;

    /* Header fijo */
    --header: 56px;

    /* Alto de los rows (home y single) */
    --row-height: calc(var(--real100) - var(--padb));

    /* object-position por defecto de las medias en rows
       (las clases de layout lo pisan con left/right/top/bottom) */
    --ox: center;
    --oy: center;

    /* Misc */
    --real100:   100vh;
    --radius:    4px;
    --transition: 0.3s ease;
}


/* ============================================================
   BASE BODY
   ============================================================ */

body {
    font-family: var(--sans);
    font-weight: 430;
    font-size: 11px;
    line-height: var(--line-height);
    letter-spacing: 0.15em;
    text-align: center;
    text-transform: uppercase;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    color: var(--primary);
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

/* Texto blanco en difference — solo header y divs con texto, nunca imágenes */
#header,
#footer,
.project-text,
.archive-list,
.contact-stack-items,
.contact-stack-represented {
    mix-blend-mode: difference;
}


/* ============================================================
   UTILIDADES TIPOGRÁFICAS
   ============================================================ */

.uppercase  { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.italic     { font-style: italic; }
.bold       { font-weight: 700; }
.normal     { font-weight: 400; }
.nowrap     { white-space: nowrap; }
.strike     { text-decoration: line-through; }

.t-primary  { color: var(--primary); }
.t-contrast { color: var(--contrast); }
.t-accent   { color: var(--accent); }
.t-grey     { color: var(--grey); }

.aligncenter { text-align: center; }
.alignleft   { text-align: left; }
.alignright  { text-align: right; }


/* ============================================================
   POST CONTENT
   ============================================================ */

   .project-text{
    max-width: 1100px;
    margin: 0 auto;
   }
.post-content p,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6,
.post-content blockquote,
.post-content ol,
.post-content ul {
    margin-bottom: var(--line-height);
}

.post-content *:last-child {
    margin-bottom: 0;
}

.post-content ul,
.post-content ol {
    padding-left: 1.4em;
}

.post-content ul li { list-style: disc; }
.post-content ol li { list-style: decimal; }

.post-content a {
    text-decoration: underline;
}

.post-content blockquote {
    padding-left: 1em;
    border-left: 2px solid var(--contrast);
    font-style: italic;
}

.post-content img {
    margin-top: var(--line-height);
    margin-bottom: var(--line-height);
}


/* ============================================================
   UTILIDADES DE LAYOUT
   ============================================================ */

.none  { display: none; }
.block { display: block; }
.flex  { display: flex; }
.clear { clear: both; }

.left  { float: left !important; }
.right { float: right !important; }

.rel    { position: relative; }
.abs    { position: absolute; }
.fixed  { position: fixed; }
.sticky { position: sticky; }

.overflow-hidden { overflow: hidden; }
.pointer         { cursor: pointer; }
.no-select       { user-select: none; -webkit-user-select: none; }

.mobile  { display: none; }
.desktop { display: block; }

.padded   { padding: var(--pad); }
.padded-v { padding: var(--pad) 0; }
.padded-h { padding: 0 var(--pad); }

.margined  { margin-bottom: var(--pad); }
.marginedm { margin-bottom: var(--padm); }
.marginedb { margin-bottom: var(--padb); }


/* Menu overlay */
.menu-hover {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: var(--primary);
}

.menu-hover.appear {
    display: flex;
    align-items: center;
    justify-content: center;
}

body.menu-open {
    overflow: hidden;
}

/* ============================================================
   INPUTS — reset
   ============================================================ */

input, textarea, select, button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: var(--grey);
    opacity: 1;
}

input[type="submit"],
button[type="submit"] {
    cursor: pointer;
}

textarea {
    resize: none;
}


/* ============================================================
   SWIPER
   ============================================================ */

.swiper-slide {
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}


/* ============================================================
   RESET
   ============================================================ */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code, del, dfn, em, img, ins,
kbd, q, samp, small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
article, aside, canvas, details, figure, figcaption,
hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
}

*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    outline: none;
}

article, aside, canvas, figure, figcaption,
hgroup, section, audio, video { display: block; }

html, body {
    width: 100%;
    overscroll-behavior: none;
}

html {
    margin-top: 0 !important;
    background-color: var(--primary);
}
@media screen and (max-width: 782px) {
    html { margin-top: 0 !important; }
}

table  { border-collapse: collapse; }
li     { list-style: none; }
abbr   { text-decoration: none; }
button { outline: none; cursor: pointer; }
p      { margin-bottom: 0; }

a {
    text-decoration: none;
    outline: none;
    color: inherit;
}
a img { border: none !important; }

figure     { position: relative; }
figure img { width: 100%; }

img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

img::selection      { background: transparent; }
img::-moz-selection { background: transparent; }

::selection      { background: var(--contrast); color: var(--primary); }
::-moz-selection { background: var(--contrast); color: var(--primary); }


/* ============================================================
   HEADER
   ============================================================ */

#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header);
    padding: var(--pad);
}

#main {
    padding-top: var(--header);
}

.header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-name {
    white-space: nowrap;
}

.header-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.contact-items,
.header-nav {
    display: flex;
    align-items: center;
    gap: var(--pad);
}

/* ============================================================
   CAT OVERLAY — fullscreen al hacer clic en Work / Personal
   ============================================================ */

#header {
    z-index: 1000;
    /* deja pasar los clics al overlay salvo en los propios enlaces */
    pointer-events: none;
}

#header a,
#header button,
#header .mobile-menu {
    pointer-events: auto;
}

.cat-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 900;
    background: var(--primary);
    color: var(--contrast);
    overflow-y: auto;
}

.cat-overlay.appear {
    display: block;
}

body.overlay-open {
    overflow: hidden;
}

/* Con el overlay abierto, el centro del header (título de proyecto,
   items de contacto) se oculta para dejar sitio a los filtros */
body.overlay-open .header-center {
    display: none;
}

.overlay-filters {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: center;
    gap: var(--pad);
    padding: var(--pad);
    background: var(--primary);
}

.overlay-filter.is-active {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cat-overlay .project-list {
    width: 320px;
    margin: 0 auto;
    min-height: calc(var(--real100) - (var(--line-height) + var(--pad) * 2));
}


/* ============================================================
   PROJECT LIST — overlay de header y archive de categoría
   ============================================================ */

.project-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.project-list-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pad);
    padding: var(--pad) 0;
    text-align: left;
}



.project-list-item.is-hidden {
    display: none;
}

.project-list-count {
    font-size: 9px;
}

.archive-list {
    padding: 0 var(--pad) var(--padb);
}


/* ============================================================
   HOME — Highlighted Projects Row
   ============================================================ */

.home-rows {
    display: flex;
    flex-direction: column;
}

.home-rows .home-row:last-child {
    margin-bottom: 0;
}

.home-project {
    display: block;
    height: 100%;
}

/* Imágenes/vídeos contenidos en la altura del row.
   --ox/--oy se definen en las clases de layout de cada row */
.home-project img,
.home-project video {
    width: 100%;
    max-height: var(--row-height);
    object-fit: contain;
    object-position: var(--ox) var(--oy);
}

/* 1 proyecto — alineación horizontal de la imagen */
.home-row--one {
    display: flex;
    padding: 0;
}


.home-row--one.align-total-left  { padding-left: 0;  justify-content: flex-start; --ox: left; }
.home-row--one.align-left        { justify-content: flex-start; --ox: left; padding-left: calc(100vw / 12); }
.home-row--one.align-center      { justify-content: center; }
.home-row--one.align-right       { justify-content: flex-end; --ox: right; padding-right: calc(100vw / 12); }
.home-row--one.align-total-right { padding-right: 0; justify-content: flex-end; --ox: right; }

/* 2 proyectos — los dos bloques van juntos (pegados): cada <a>
   ajusta al tamaño de su imagen. project_1 llena el alto del row;
   project_2 va a media altura y se ancla Top/Bottom con align-self. */
.home-row--two {
    display: flex;
    padding: 0;
}

.home-row--two .home-project-1,
.home-row--two .home-project-2 {
    max-width: 40%;
}



.home-row--two .home-project-1 {
    height: 100%;
}


.home-row--two .home-project-2 {
    height: auto;
}

.home-row--two .home-project-2 img,
.home-row--two .home-project-2 video {
    width: 100%;
    max-height: var(--row-height);
    height: 100%;
}

/* Layout X solo alinea la pareja; el orden es siempre 1 → 2 */
.home-row--two.layout-x-left  { justify-content: flex-start; }
.home-row--two.layout-x-right { justify-content: flex-end; }

.home-row--two.layout-y-top    .home-project-2 { align-self: flex-start; }
.home-row--two.layout-y-bottom .home-project-2 { align-self: flex-end; }


/* ============================================================
   SINGLE — Project Images Row
   ============================================================ */

.project-rows {
    display: flex;
    flex-direction: column;
}

.home-row{
    height: 100%;
    max-height: var(--row-height);
    margin-bottom: var(--padb);
}

.project-row {
    height: var(--row-height);
    margin-bottom: var(--padb);
}




.project-rows .project-row:last-child {
    margin-bottom: 0;
}

/* Row seguido de un bloque de texto: sin margin-bottom
   (el texto ya aporta su propio padding) */
.project-row.before-text {
    margin-bottom: 0;
}

.project-image {
    height: 100%;
}

.project-image img,
.project-image video {
    height: 100%;
    object-fit: contain;
}


/* ============================================================
   MEDIA VIDEO — portada clicable con label Play/Pause
   ============================================================ */

.media-video {
    position: relative;
    cursor: pointer;
    /* aísla el blend del label para que haga difference contra
       la portada/vídeo (sin esto el blend se resuelve contra el
       fondo de la página y se ve blanco) */
    isolation: isolate;
}

/* La portada va EN FLUJO y dimensiona el bloque (es una imagen real,
   se comporta igual que un row de imágenes); el vídeo va absoluto
   debajo ocupando el mismo espacio */
.media-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sin portada: el vídeo queda en flujo y su aspect-ratio inline
   define el tamaño del bloque */
.media-video.no-poster video {
    position: static;
    height: auto;
}

.media-poster {
    position: relative;
    z-index: 1;
}

/* La portada rellena el bloque aunque no coincida con la proporción
   del vídeo (ideal: subir vídeo y portada con la misma proporción) */
.media-poster img {
    width: 100%;
    object-fit: cover;
}

/* visibility (no display) para que el bloque conserve su tamaño
   cuando la portada desaparece al reproducir */
.media-video.is-playing .media-poster {
    visibility: hidden;
}

.media-video-label {
    position: absolute;
    top: var(--pad);
    right: var(--pad);
    z-index: 2;
    color: var(--primary);
    mix-blend-mode: difference;
    pointer-events: none;
}

/* 1 imagen */
.project-row--one {
    display: flex;
    padding: 0;
    max-height: var(--row-height);
    height: 100%;
}



.project-row--one.align-total-left  { padding-left: 0;  justify-content: flex-start; }
.project-row--one.align-left        { padding-left: calc(100vw / 12);justify-content: flex-start; }
.project-row--one.align-center      { justify-content: center; }
.project-row--one.align-right       { padding-right: calc(100vw / 12);justify-content: flex-end; }
.project-row--one.align-total-right { padding-right: 0; justify-content: flex-end; }

/* 2 imágenes — mismo alto sin height fija: anchos repartidos
   proporcionales al aspect ratio de cada media (--ar inline desde PHP).
   h = (ancho - gap) / (ar1 + ar2) → idéntica para las dos. */
.project-row--two {
    display: flex;
    gap: var(--padh);
    padding: 0;
    height: auto;
    max-width: 90vw;
}

.project-row--two .project-image {
    /* flex: var(--ar, 1) 1 0; */
    min-width: 0;
    height: auto;
}

.project-row--two .media-video {
    height: auto;
}

.project-image img,
.project-image video {
    width: 100%;
    height: auto;
    max-height: var(--row-height);
}

/* Layout X solo alinea la pareja; el orden es siempre 1 → 2 */
.project-row--two.layout-x-left  { justify-content: flex-start; }
.project-row--two.layout-x-right { justify-content: flex-end; margin-left: auto; }

/* Texto centrado */
.project-row--text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padm) var(--pad);
    height: auto;
    margin-bottom:0;
}


/* ============================================================
   FOOTER — Represented By (contact)
   ============================================================ */

  .home #footer, 
.single #footer{
    padding:0;
}


#footer {
    padding: var(--pad);
}

.represented-by {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pad);
}


/* ============================================================
   FADE-IN — proyectos de la home al hacer scroll
   (la clase will-fade la añade JS: sin JS no se oculta nada)
   ============================================================ */

.home-row.will-fade .home-project {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.home-row.will-fade.in-view .home-project {
    opacity: 1;
}

/* El segundo proyecto entra con un pequeño delay */
.home-row.will-fade.in-view .home-project-2 {
    transition-delay: 0.25s;
}

/* ============================================================
   FADE-IN — medias de single al hacer scroll
   (misma mecánica que la home; en rows de 2 la segunda con delay)
   ============================================================ */

.project-row.will-fade .project-image,
.project-row.will-fade .project-text {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.project-row.will-fade.in-view .project-image,
.project-row.will-fade.in-view .project-text {
    opacity: 1;
}

.project-row.will-fade.in-view .project-image + .project-image {
    transition-delay: 0.25s;
}


/* ============================================================
   FADE-IN — items del overlay de categorías
   (delay incremental inline desde JS al abrir o filtrar)
   ============================================================ */

.cat-overlay .project-list-item {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.cat-overlay .project-list-item.stagger-in {
    opacity: 1;
}

/* ============================================================
   CONTACT — imagen central
   ============================================================ */

/* Ocupa el alto entre header y footer (ambos = --header de alto),
   así el represented-by del footer queda a --pad del bottom */
.contact-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--real100) - var(--header) * 2);
}

.contact-image img {
    width: 40%;
    height: auto;
}

/* ============================================================
   OVERLAY — cover en hover de los items del listado
   Alto fijo según orientación (Figma: 297px verticales / 239px
   horizontales sobre frame de 1080 → 27.5vh / 22vh), ancho por ratio.
   Va por debajo del listado; el texto invierte con difference.
   ============================================================ */

:root {
    --cover-v:  27.5vh;
    --cover-hz: 22vh;
}

.overlay-cover {
    /* JS escoge 1 / 1.5 / 2 al azar en cada hover */
    --cover-scale: 1;
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    height: calc(var(--cover-v) * var(--cover-scale));
    width: auto;
    max-width: none;
    z-index: 0;
    pointer-events: none;
}

.overlay-cover.is-horizontal {
    height: calc(var(--cover-hz) * var(--cover-scale));
}

.overlay-cover.visible {
    display: block;
}

.cat-overlay .overlay-filters {
    z-index: 2;
}

.cat-overlay .project-list {
    position: relative;
    z-index: 1;
    color: var(--primary);
    mix-blend-mode: difference;
}

/* ============================================================
   ROWS — el contenido nunca supera 90vw (desktop y mobile)
   ============================================================ */

.project-image img,
.project-image video,
.media-video,
.home-project img,
.home-project video {
    max-width: 90vw;
}