/*
Theme Name: Mauris
Theme URI: https://mauris.ar
Author: Mauris
Author URI: https://mauris.ar
Description: Tema personal para publicar proyectos, notas y fotos. Papel gris claro, tinta oscura y cuatro acentos vivos. Incluye el tipo de contenido "Proyectos" y una portada con hero, grilla de proyectos y últimas notas.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mauris
Tags: blog, portfolio, one-column, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ---------- Tokens (Mauris Design System) ---------- */
:root{
  --hoja-100:#E4F0E8;--hoja-200:#C4DFCD;--hoja-300:#86BF9A;--hoja-500:#2F8F4E;--hoja-600:#24723E;--hoja-700:#1A5630;
  --petroleo-100:#DCEBEE;--petroleo-300:#79B3BD;--petroleo-500:#136A78;--petroleo-600:#0E5460;--petroleo-700:#0A3E47;
  --terracota-100:#FAE6DF;--terracota-300:#E9A188;--terracota-500:#D4552E;--terracota-600:#AF4324;--terracota-700:#83321B;
  --mostaza-100:#FBF0D5;--mostaza-300:#F0CE79;--mostaza-500:#E3A81C;--mostaza-600:#B98716;--mostaza-700:#8A6410;
  --paper-000:#FCFCFC;--paper-100:#F2F2F2;--paper-200:#E8E8E8;--paper-300:#D9D9D9;
  --ink-400:#9A9A9A;--ink-500:#6E6E6E;--ink-700:#414141;--ink-900:#1E1E1E;
  --rojo-500:#A62B22;

  --accent-1:var(--hoja-500);--accent-2:var(--petroleo-500);--accent-3:var(--terracota-500);--accent-4:var(--mostaza-500);
  --accent-1-ink:var(--hoja-600);--accent-2-ink:var(--petroleo-500);--accent-3-ink:var(--terracota-600);--accent-4-ink:var(--mostaza-700);
  --accent-1-soft:var(--hoja-100);--accent-2-soft:var(--petroleo-100);--accent-3-soft:var(--terracota-100);--accent-4-soft:var(--mostaza-100);

  --surface-page:var(--paper-100);--surface-card:var(--paper-000);--surface-sunken:var(--paper-200);
  --surface-accent-soft:var(--hoja-100);--surface-accent-strong:var(--hoja-600);--surface-accent-stronger:var(--hoja-700);
  --text-body:var(--ink-700);--text-strong:var(--ink-900);--text-muted:var(--ink-500);--text-faint:var(--ink-400);
  --text-inverse:var(--paper-000);--text-accent:var(--hoja-700);--text-link:var(--ink-900);--text-link-hover:var(--hoja-600);
  --line-soft:var(--paper-300);--line-strong:var(--ink-900);--line-accent:var(--hoja-500);

  --font-display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --font-body:"Karla","Helvetica Neue",sans-serif;
  --font-mono:"Space Mono","SFMono-Regular",monospace;
  --text-3xs:11px;--text-2xs:12px;--text-xs:13px;--text-sm:15px;--text-md:17px;--text-lg:20px;
  --text-xl:25px;--text-2xl:32px;--text-3xl:42px;--text-4xl:56px;--text-5xl:74px;
  --tracking-snug:-0.015em;--tracking-wide:0.08em;--tracking-caps:0.14em;

  --ease-out:cubic-bezier(.2,.7,.3,1);--dur-fast:110ms;--dur-base:180ms;
  --shadow-md:0 8px 18px rgba(30,30,30,.08);
  --ring-focus:0 0 0 3px var(--hoja-300);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);
  font:400 var(--text-md)/1.68 var(--font-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
img{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-strong);font-weight:700}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--line-soft);
  transition:color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
a:hover{color:var(--text-link-hover);border-color:currentColor}
:focus-visible{outline:2px solid var(--ink-900);outline-offset:2px;box-shadow:var(--ring-focus)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;left:24px;top:16px;z-index:100;width:auto;height:auto;clip:auto;
  background:var(--paper-000);padding:10px 16px;border:2px solid var(--ink-900);border-radius:999px}

.m-shell{max-width:1120px;margin:0 auto;padding:0 32px}
.m-shell--narrow{max-width:760px}
.m-mono{font:400 var(--text-2xs)/1.6 var(--font-mono);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-muted)}
.m-eyebrow{font:700 var(--text-2xs)/1 var(--font-mono);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--accent-1-ink)}

/* ---------- Header ---------- */
.m-header{position:sticky;top:0;z-index:50;background:rgba(242,242,242,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.m-header__in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;flex-wrap:wrap;padding:12px 0}
.m-brand{border-bottom:0;display:flex;align-items:center;gap:12px}
.m-brand img{height:34px;width:auto;display:block}
.m-brand__text{font:700 var(--text-lg)/1 var(--font-display);color:var(--text-strong)}
.m-nav ul{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0}
.m-nav li{position:relative}
.m-nav a{display:block;border:1px solid transparent;border-radius:999px;padding:9px 14px;border-bottom:1px solid transparent;
  font:700 var(--text-2xs)/1 var(--font-mono);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-body)}
.m-nav a:hover{background:var(--surface-accent-soft);color:var(--text-accent);border-color:transparent}
.m-nav .current-menu-item>a,.m-nav .current_page_item>a,.m-nav .current-menu-parent>a,.m-nav .m-nav__current>a{
  background:var(--paper-000);border-color:var(--line-soft);color:var(--text-strong)}
.m-nav ul ul{display:none;position:absolute;left:0;top:100%;min-width:190px;flex-direction:column;
  background:var(--paper-000);border:1px solid var(--line-soft);border-radius:18px;padding:8px}
.m-nav li:hover>ul,.m-nav li:focus-within>ul{display:flex}

/* ---------- Buttons ---------- */
.m-btn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;border-radius:999px;
  padding:15px 26px;font:700 var(--text-md)/1 var(--font-body);background:transparent;color:var(--text-strong);
  border:2px solid var(--line-accent);transition:background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.m-btn:hover{background:var(--surface-accent-soft);border-color:var(--text-link-hover);color:var(--text-accent)}
.m-btn:active{transform:translateY(1px)}
.m-btn--ghost{border-color:transparent;color:var(--text-body)}
.m-btn--accent{background:var(--surface-accent-strong);border-color:var(--surface-accent-strong);color:var(--text-inverse)}
.m-btn--accent:hover{background:var(--surface-accent-stronger);border-color:var(--surface-accent-stronger);color:var(--text-inverse)}
.m-btn--sm{padding:8px 15px;font-size:var(--text-xs)}
.m-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Hero ---------- */
.m-hero{display:grid;grid-template-columns:1.25fr .75fr;gap:64px;align-items:center;padding:96px 0 64px}
.m-hero h1{font-size:clamp(40px,7vw,74px);line-height:1.04;letter-spacing:-.03em;margin:16px 0 0}
.m-hero__lede{max-width:48ch;margin:20px 0 0}
.m-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.m-hero__mark{width:100%;max-width:300px;justify-self:center}
@media(max-width:860px){.m-hero{grid-template-columns:1fr;gap:32px;padding:48px 0 32px}.m-hero__mark{display:none}}

/* ---------- Section head ---------- */
.m-section{padding:0 0 96px}
.m-sechead{border-top:2px solid var(--line-strong);padding-top:16px;display:flex;flex-wrap:wrap;
  align-items:flex-end;justify-content:space-between;gap:16px}
.m-sechead h1,.m-sechead h2{font-size:var(--text-2xl);line-height:1.18;letter-spacing:var(--tracking-snug);margin:0}
.m-sechead p{margin:8px 0 0;max-width:64ch}

/* ---------- Cards ---------- */
.m-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}
@media(max-width:1023px){.m-grid{grid-template-columns:1fr}}
.m-card{display:flex;flex-direction:column;gap:14px;background:var(--surface-card);border:1px solid var(--line-soft);
  border-radius:18px;padding:24px;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
a.m-card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-md);color:inherit}
.m-card__img{aspect-ratio:16/10;border-radius:10px;background:var(--surface-sunken);border:1px dashed var(--line-soft);
  overflow:hidden;display:flex;align-items:center;justify-content:center}
.m-card__img img{width:100%;height:100%;object-fit:cover;display:block}
.m-card__ph{font:400 var(--text-2xs)/1 var(--font-mono);color:var(--text-faint)}
.m-card__meta{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.m-idx{font:700 var(--text-lg)/1 var(--font-display)}
.m-card__meta .m-mono{font-weight:700;letter-spacing:var(--tracking-wide)}
.m-card h2,.m-card h3{font-size:var(--text-xl);line-height:1.15;letter-spacing:var(--tracking-snug);margin:0}
.m-card p{font-size:var(--text-sm);line-height:1.5;color:var(--text-muted);margin:0}
.m-idx--1{color:var(--accent-1-ink)}.m-idx--2{color:var(--accent-2-ink)}
.m-idx--3{color:var(--accent-3-ink)}.m-idx--4{color:var(--accent-4-ink)}

/* ---------- Notas (rows) ---------- */
.m-band{background:var(--surface-sunken);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:64px 0}
.m-band .m-sechead{border-top-color:var(--line-strong)}
.m-rows{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line-soft)}
.m-rows li{border-bottom:1px solid var(--line-soft)}
.m-rows a{display:flex;gap:24px;align-items:baseline;justify-content:space-between;padding:20px 0;border-bottom:0;flex-wrap:wrap}
.m-rows a:hover .m-row__t{color:var(--text-link-hover)}
.m-row__t{font:700 var(--text-lg)/1.3 var(--font-display);color:var(--text-strong);transition:color var(--dur-base) var(--ease-out)}
.m-row__m{flex:0 0 auto}

/* ---------- Tags / badges ---------- */
.m-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.m-tag{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-soft);border-radius:999px;
  padding:5px 12px;background:var(--paper-000);border-bottom:1px solid var(--line-soft);
  font:700 var(--text-3xs)/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-body)}
.m-badge{display:inline-flex;padding:4px 10px;border-radius:6px;background:var(--surface-accent-soft);color:var(--text-accent);
  font:700 var(--text-3xs)/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:var(--tracking-wide)}

/* ---------- Article / prose ---------- */
.m-article{padding:64px 0 96px}
.m-article__head{border-top:2px solid var(--line-strong);padding-top:20px}
.m-article h1{font-size:clamp(34px,5.2vw,56px);line-height:1.06;letter-spacing:-.03em;margin:12px 0 0}
.m-article__meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
.m-cover{margin:32px 0 0;border-radius:18px;overflow:hidden;border:1px solid var(--line-soft)}
.m-cover img{display:block;width:100%}
.m-prose{margin-top:32px}
.m-prose>p,.m-prose>ul,.m-prose>ol,.m-prose>dl,.m-prose>blockquote,
.m-prose>h1,.m-prose>h2,.m-prose>h3,.m-prose>h4,.m-prose>h5,.m-prose>h6{max-width:64ch}
.m-prose p,.m-prose li{font-size:var(--text-md);line-height:1.68}
.m-prose h2{font-size:var(--text-2xl);line-height:1.18;letter-spacing:var(--tracking-snug);margin:48px 0 12px}
.m-prose h3{font-size:var(--text-lg);margin:32px 0 8px}
.m-prose img,.m-prose figure{border-radius:18px;max-width:100%}
.m-prose figure{margin:32px 0}
.m-prose figcaption{font:400 var(--text-2xs)/1.6 var(--font-mono);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-muted);margin-top:8px}
.m-prose blockquote{margin:32px 0;padding:24px;background:var(--paper-000);border:2px solid var(--ink-900);
  border-radius:18px;box-shadow:4px 4px 0 var(--ink-900);font:700 var(--text-lg)/1.4 var(--font-display);color:var(--text-strong)}
.m-prose blockquote p{margin:0;font:inherit}
.m-prose code,.m-prose kbd{font:400 var(--text-sm)/1.5 var(--font-mono);background:var(--paper-200);padding:2px 6px;border-radius:6px}
.m-prose pre{background:var(--paper-000);border:1px solid var(--line-soft);border-radius:18px;padding:24px;overflow:auto}
.m-prose pre code{background:transparent;padding:0}
.m-prose hr{border:0;border-top:1px solid var(--line-soft);margin:48px 0}
.m-prose table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.m-prose th,.m-prose td{border-bottom:1px solid var(--line-soft);padding:10px 8px;text-align:left}
.alignwide{max-width:1120px}
.alignfull{max-width:none;width:100%}
.aligncenter{margin-left:auto;margin-right:auto}
.alignright{float:right;margin:0 0 24px 24px}
.alignleft{float:left;margin:0 24px 24px 0}
.m-prose .wp-block-image,.m-prose .wp-block-gallery{margin:32px 0}

/* ---------- Pagination / navegación ---------- */
.m-pag{display:flex;gap:8px;flex-wrap:wrap;margin-top:48px}
.m-pag .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;padding:8px 12px;
  border:1px solid var(--line-soft);border-radius:999px;background:var(--paper-000);border-bottom:1px solid var(--line-soft);
  font:700 var(--text-xs)/1 var(--font-mono);color:var(--text-body)}
.m-pag .page-numbers:hover{background:var(--surface-accent-soft);color:var(--text-accent)}
.m-pag .page-numbers.current{background:var(--surface-accent-strong);border-color:var(--surface-accent-strong);color:var(--text-inverse)}
.m-postnav{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--line-soft);margin-top:64px;padding-top:24px}

/* ---------- Search / formularios ---------- */
.m-search{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.m-search input[type=search]{font:400 var(--text-sm)/1 var(--font-body);padding:13px 16px;border-radius:10px;
  border:1px solid var(--line-soft);background:var(--paper-000);color:var(--text-strong);min-width:220px}
.m-search input[type=search]:focus{outline:none;border:2px solid var(--ink-900);box-shadow:var(--ring-focus)}

/* ---------- Empty state ---------- */
.m-empty{margin-top:32px;font-size:var(--text-md);color:var(--text-muted)}

/* ---------- Footer ---------- */
.m-footer{border-top:1px solid var(--line-soft);padding:48px 0;margin-top:0}
.m-footer__in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.m-footer img{height:40px;width:auto;display:block}
.m-footer__links{display:flex;gap:16px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.m-footer__links a{font:700 var(--text-2xs)/1 var(--font-mono);text-transform:uppercase;letter-spacing:var(--tracking-wide);
  color:var(--text-body);border-bottom:1px solid transparent}
.m-footer__links a:hover{color:var(--text-accent);border-color:currentColor}
@media(max-width:600px){.m-shell{padding:0 20px}.m-section{padding-bottom:64px}.m-article{padding:40px 0 64px}}

/* ---------- Compatibilidad con los estilos globales de WordPress ----------
 * Con theme.json activo, WP imprime reglas :where(...) que ponen margin:0 en
 * párrafos, títulos y bloques. Acá se reponen los espacios del sistema con
 * especificidad suficiente para ganarles (:root + clase + etiqueta).
 * ------------------------------------------------------------------------- */
:root .m-prose > * + *{margin-top:24px}
:root .m-prose p,:root .m-prose ul,:root .m-prose ol,:root .m-prose dl,
:root .m-prose .wp-block-embed,:root .m-prose .wp-block-table{margin-top:24px;margin-bottom:0}
:root .m-prose h2{margin-top:48px;margin-bottom:12px}
:root .m-prose h3{margin-top:32px;margin-bottom:8px}
:root .m-prose h4{margin-top:24px;margin-bottom:8px}
:root .m-prose figure,:root .m-prose .wp-block-image,:root .m-prose .wp-block-gallery,
:root .m-prose blockquote,:root .m-prose pre,:root .m-prose .wp-block-quote{margin-top:32px;margin-bottom:0}
:root .m-prose hr,:root .m-prose .wp-block-separator{margin-top:48px;margin-bottom:48px}
:root .m-prose > :first-child{margin-top:0}
:root .m-prose ul,:root .m-prose ol{padding-left:22px}
:root .m-prose li + li{margin-top:8px}
:root .m-prose li{margin-top:0}
:root .m-prose figcaption{margin-top:8px}

/* Los mismos huecos para el contenido del editor de bloques. */
:root .m-prose .wp-block-group,:root .m-prose .wp-block-columns{margin-top:32px}
:root .m-prose .wp-block-column > * + *{margin-top:24px}

/* Estructura: repone paddings/márgenes que los estilos globales pueden aplanar. */
:root .m-shell{padding-left:32px;padding-right:32px;margin-left:auto;margin-right:auto}
:root .m-hero{padding-top:96px;padding-bottom:64px}
:root .m-section{padding-bottom:96px}
:root .m-band{padding-top:64px;padding-bottom:64px}
:root .m-article{padding-top:64px;padding-bottom:96px}
:root .m-footer{padding-top:48px;padding-bottom:48px}
:root .m-card{padding:24px;gap:14px}
:root .m-grid{gap:24px;margin-top:32px}
:root .m-rows{margin-top:24px;padding-left:0;list-style:none}
:root .m-rows a{padding-top:20px;padding-bottom:20px}
:root .m-hero h1{margin:16px 0 0}
:root .m-hero__lede{margin:20px 0 0}
:root .m-article h1{margin:12px 0 0}
:root .m-sechead h1,:root .m-sechead h2,:root .m-card h2,:root .m-card h3,:root .m-card p{margin:0}
:root .m-actions{margin-top:28px;gap:12px}
:root .m-eyebrow,:root .m-mono{margin:0}
@media(max-width:860px){:root .m-hero{padding-top:48px;padding-bottom:32px}}
@media(max-width:600px){:root .m-shell{padding-left:20px;padding-right:20px}}