/* ============================================================
   MAYAZORD v2.2 — Main Stylesheet
   ============================================================ */

@font-face {
  font-family: 'CreatoDisplay';
  src: url('../fonts/CreatoDisplay-BlackItalic.otf') format('opentype');
  font-weight: 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'CreatoDisplay';
  src: url('../fonts/CreatoDisplay-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:            #ffffff;
  --fg:            #1a1a18;
  --muted:         rgba(26,26,24,0.32);
  --line:          rgba(26,26,24,0.09);
  --font-title:    'CreatoDisplay', Georgia, serif;
  --font-body:     'CreatoDisplay', Georgia, serif;
  --ticker-color:  #1a1a18;
  --ticker-size:   24px;
  --strip-h:       54px;
  --strip-h-mob:   42px;
  --textos-color:  #1a1a18;
  --strip-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(0,0,0,0.05),
    0 2px 18px -4px rgba(0,0,0,0.08),
    0 1px 3px -1px rgba(0,0,0,0.05);
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-weight: 400;
  overflow-x: hidden; cursor: none;
}

/* ── CURSOR ── */
.mz-cursor {
  position: fixed; width: 7px; height: 7px;
  background: var(--fg); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .18s ease, height .18s ease, background .18s ease, border .18s ease;
  mix-blend-mode: multiply;
}
.mz-cursor.hover { width:22px; height:22px; background:transparent; border:1px solid var(--fg); }
.mz-cursor.grab  { width:14px; height:14px; opacity:.55; }
@media (hover:none) { .mz-cursor { display:none; } body { cursor:auto; } }

/* ── GIF FLOTANTE ── */
.mz-gif {
  position:fixed; right:8vw; top:28vh; z-index:9000;
  width:110px; cursor:grab; user-select:none; -webkit-user-select:none;
  filter:drop-shadow(0 3px 14px rgba(0,0,0,.15)); transition:filter .2s;
}
.mz-gif:active { cursor:grabbing; filter:drop-shadow(0 7px 26px rgba(0,0,0,.25)); }
.mz-gif img    { width:100%; display:block; pointer-events:none; border-radius:2px; }
.mz-gif-hint {
  position:absolute; bottom:-22px; left:50%; transform:translateX(-50%);
  font-family:var(--font-body); font-size:8px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; opacity:0; transition:opacity .3s;
}
.mz-gif:hover .mz-gif-hint { opacity:1; }

/* ── HEADER ── */
.mz-header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding:18px 28px 0;
  mix-blend-mode: multiply;
}
.mz-logo {
  font-family:var(--font-title); font-weight:400;
  font-size:clamp(13px,1.5vw,19px); letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg); text-decoration:none;
  display:flex; align-items:center; justify-content: flex-start;
}
.mz-logo img, .mz-logo .custom-logo { height:26px; width:auto; display:block; }

/* ── BOTÓN TEXTOS — LIQUID GLASS ── */
.mz-textos-btn {
  justify-self: center;
  font-family:    var(--font-body);
  font-size:      9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--textos-color);
  background:     rgba(255,255,255,0.18);
  border:         1px solid color-mix(in srgb, var(--textos-color) 28%, transparent);
  border-radius:  100px;
  padding:        7px 20px 6px;
  cursor:         pointer;
  backdrop-filter:         blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 2px 14px -3px rgba(0,0,0,0.10);
  transition: background .22s ease, box-shadow .22s ease, transform .15s ease;
  white-space: nowrap;
}
.mz-textos-btn:hover {
  background:  rgba(255,255,255,0.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(0,0,0,0.06),
    0 4px 20px -4px rgba(0,0,0,0.14);
  transform: translateY(-1px);
}
.mz-textos-btn:active { transform: translateY(0); }

/* ── NAV ── */
.mz-nav {
  display:flex; gap:30px; align-items:center;
  justify-content: flex-end;
}
.mz-nav a {
  font-family:var(--font-body); font-size:8px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg); text-decoration:none; opacity:.4; transition:opacity .2s;
}
.mz-nav a:hover { opacity:1; }

/* ── TICKER SECTION ── */
.mz-ticker-section { padding-top:60px; }

/* ── TIRA LIQUID LED ── */
.mz-strip {
  width:100%; height:var(--strip-h); overflow:hidden;
  border-top:1px solid var(--line);
  position:relative; display:flex; align-items:center;
  cursor:grab; -webkit-user-select:none; user-select:none;
  background-size:cover; background-position:center;
  box-shadow:var(--strip-shadow); transition:box-shadow .3s ease;
}
.mz-strip:last-child  { border-bottom:1px solid var(--line); }
.mz-strip.is-dragging { cursor:grabbing; }
.mz-strip::before, .mz-strip::after {
  content:''; position:absolute; top:0; bottom:0;
  width:clamp(36px,5vw,72px); z-index:10; pointer-events:none;
}
.mz-strip::before { left:0;  background:linear-gradient(to right, var(--bg), transparent); }
.mz-strip::after  { right:0; background:linear-gradient(to left,  var(--bg), transparent); }

/* ── TICKER TRACK ── */
.mz-track { display:flex; align-items:center; white-space:nowrap; will-change:transform; }
.mz-track.mz-left  { animation:mz-left  28s linear infinite; }
.mz-track.mz-right { animation:mz-right 34s linear infinite; }
.mz-track.mz-slow  { animation-duration:44s; }
.mz-track.mz-right.mz-slow { animation-duration:52s; }
@keyframes mz-left  { 0%{transform:translateX(0)}    100%{transform:translateX(-50%)} }
@keyframes mz-right { 0%{transform:translateX(-50%)} 100%{transform:translateX(0)}    }

/* ── TICKER ITEM ── */
.mz-item {
  display:inline-flex; align-items:center; gap:12px;
  padding:0 20px; height:var(--strip-h);
  cursor:pointer; flex-shrink:0; transition:opacity .2s;
}
.mz-item:hover { opacity:.55; }
.mz-item .mz-title {
  font-family:var(--font-title); font-weight:900; font-style:italic;
  font-size:var(--ticker-size); color:var(--ticker-color);
  letter-spacing:-.01em; line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.05), 0 0 30px rgba(0,0,0,.03);
}
.mz-item .mz-year {
  font-family:var(--font-body); font-size:8px; color:var(--muted);
  letter-spacing:.14em; text-transform:uppercase; margin-top:2px;
}
.mz-sep { display:inline-block; width:4px; height:4px; background:var(--muted); border-radius:50%; flex-shrink:0; margin:0 4px; }

/* ── GALERÍAS INFO ── */
.mz-info-galleries-section {
  display:flex; flex-wrap:wrap; gap:48px 56px;
  padding:52px 28px 56px;
  max-width:1280px; margin:0 auto; align-items:flex-start;
  border-top:1px solid var(--line);
}
.mz-info-gallery { flex:0 0 auto; width:100%; max-width:100%; }
.mz-ig-label {
  font-family:var(--font-body); font-size:8px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px;
}
.mz-ig-frame { position:relative; overflow:hidden; line-height:0; background:#f0f0ee; cursor:pointer; }
.mz-ig-frame.is-natural img { display:block; width:100%; height:auto; max-height:72vh; object-fit:contain; }
.mz-ig-frame:not(.is-natural) img { width:100%; height:100%; object-fit:cover; display:block; }
.mz-ig-slide { display:none; position:relative; animation:mz-fade-in .3s ease; }
.mz-ig-slide.active { display:block; }
@keyframes mz-fade-in { from{opacity:.4} to{opacity:1} }
.mz-ig-prev, .mz-ig-next {
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  background:none; border:none; cursor:pointer;
  font-family:var(--font-body); font-size:13px; color:var(--fg);
  padding:12px 14px; opacity:0; transition:opacity .2s; mix-blend-mode:multiply;
}
.mz-ig-frame:hover .mz-ig-prev,
.mz-ig-frame:hover .mz-ig-next { opacity:.55; }
.mz-ig-prev:hover, .mz-ig-next:hover { opacity:1!important; }
.mz-ig-prev { left:0; } .mz-ig-next { right:0; }
.mz-ig-footer { display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.mz-ig-dots { display:flex; gap:6px; align-items:center; }
.mz-ig-dot {
  width:5px; height:5px; border-radius:50%; background:var(--muted);
  border:none; cursor:pointer; padding:0; opacity:.35; transition:opacity .2s, transform .2s;
}
.mz-ig-dot.active { opacity:1; transform:scale(1.4); }
.mz-ig-dot:hover  { opacity:.7; }
.mz-ig-count { font-family:var(--font-body); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* ── ACERCA DE ── */
.mz-info-section {
  border-top:1px solid var(--line);
  padding:72px 28px 52px;
  max-width:1280px; margin:0 auto;
}
.mz-info-section .mz-info-block { max-width:660px; }
.mz-info-block h2 {
  font-family:var(--font-body); font-size:8px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:20px;
}
.mz-info-block p {
  font-family:var(--font-body); font-size:clamp(14px,1.4vw,16px); line-height:1.88; opacity:.82;
}
.mz-info-block a { color:var(--fg); text-decoration:none; border-bottom:1px solid rgba(26,26,24,.22); transition:border-color .2s; }
.mz-info-block a:hover { border-color:var(--fg); }

/* ── CONTACTO — celda separada ── */
.mz-contact-section {
  border-top:1px solid var(--line);
  padding:52px 28px 100px;
}
.mz-contact-inner {
  max-width:1280px; margin:0 auto;
}
.mz-contact-section h2 {
  font-family:var(--font-body); font-size:8px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:20px;
}
.mz-contact-section h2 a { color:var(--muted); text-decoration:none; border-bottom:1px solid rgba(26,26,24,.2); transition:color .2s, border-color .2s; }
.mz-contact-section h2 a:hover { color:var(--fg); border-color:var(--fg); }
.mz-contact-section p {
  font-family:var(--font-body); font-size:clamp(14px,1.4vw,16px); line-height:1.88; opacity:.82;
}
.mz-contact-section a { color:var(--fg); text-decoration:none; border-bottom:1px solid rgba(26,26,24,.22); transition:border-color .2s; }
.mz-contact-section a:hover { border-color:var(--fg); }

/* ── FOOTER ── */
.mz-footer {
  border-top:1px solid var(--line); padding:20px 28px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
}
.mz-footer span { font-family:var(--font-body); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* ══════════════════════════════════════════════════════════
   PROJECT OVERLAY — Galería estilo Cargo
══════════════════════════════════════════════════════════ */
.mz-overlay {
  position:fixed; inset:0; z-index:500;
  background:var(--bg); opacity:0; pointer-events:none;
  transition:opacity .35s ease; overflow-y:auto; overscroll-behavior:contain;
}
.mz-overlay.active { opacity:1; pointer-events:all; }

.mz-overlay-header {
  position:sticky; top:0; background:var(--bg); z-index:10;
  padding:18px 28px; display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--line);
}
.mz-overlay-title {
  font-family:var(--font-title); font-weight:900; font-style:italic;
  font-size:clamp(20px,2.8vw,34px); color:var(--ticker-color);
}
.mz-overlay-close {
  font-family:var(--font-body); font-size:8px; letter-spacing:.14em; text-transform:uppercase;
  background:none; border:none; cursor:pointer; color:var(--fg); opacity:.35; transition:opacity .2s; padding:6px;
}
.mz-overlay-close:hover { opacity:1; }

/* Galería centrada */
.mz-gallery {
  position:relative; width:100%; padding:40px 60px 20px;
  display:flex; justify-content:center; align-items:center; min-height:50vh;
}
.mz-gal-slides { display:flex; justify-content:center; align-items:center; width:100%; max-width:820px; }
.mz-slide { display:none; width:100%; text-align:center; }
.mz-slide.active { display:block; }
.mz-slide img { display:block; margin:0 auto; max-width:100%; max-height:68vh; width:auto; height:auto; object-fit:contain; }
.mz-slide-placeholder {
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; height:44vh; background:#f2f2f0;
  font-family:var(--font-body); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.mz-gal-prev, .mz-gal-next {
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  background:none; border:none; cursor:pointer;
  font-family:var(--font-body); font-size:14px; color:var(--fg);
  padding:14px 16px; opacity:.28; transition:opacity .2s;
}
.mz-gal-prev:hover, .mz-gal-next:hover { opacity:.9; }
.mz-gal-prev { left:0; } .mz-gal-next { right:0; }
.mz-gal-count { position:absolute; bottom:0; right:28px; font-family:var(--font-body); font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* Contenido del proyecto — respeta HTML del editor */
.mz-proj-body { padding:28px 60px 70px; max-width:760px; }
.mz-proj-meta { display:flex; gap:32px; margin-bottom:24px; flex-wrap:wrap; }
.mz-meta-item  { display:flex; flex-direction:column; gap:5px; }
.mz-meta-label { font-family:var(--font-body); font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.mz-meta-value { font-family:var(--font-body); font-size:14px; }

/* Rich content — todo lo que genera el editor de WordPress */
.mz-rich-content {
  font-family:var(--font-body); font-size:clamp(14px,1.45vw,17px);
  line-height:1.82; opacity:.82; color:var(--fg);
}
.mz-rich-content p   { margin-bottom:1.2em; }
.mz-rich-content h1, .mz-rich-content h2, .mz-rich-content h3 {
  font-family:var(--font-title); font-weight:900; font-style:italic;
  margin-bottom:.6em; margin-top:1.4em; opacity:1;
}
.mz-rich-content h1 { font-size:1.8em; }
.mz-rich-content h2 { font-size:1.4em; }
.mz-rich-content h3 { font-size:1.15em; }
.mz-rich-content a  { color:var(--fg); text-decoration:underline; text-underline-offset:3px; opacity:.7; transition:opacity .2s; }
.mz-rich-content a:hover { opacity:1; }
.mz-rich-content ul, .mz-rich-content ol { padding-left:1.4em; margin-bottom:1em; }
.mz-rich-content li { margin-bottom:.4em; }
.mz-rich-content strong, .mz-rich-content b { font-weight:900; }
.mz-rich-content em, .mz-rich-content i    { font-style:italic; }
.mz-rich-content blockquote {
  border-left:2px solid var(--fg); padding-left:1.2em; margin:1.4em 0;
  font-style:italic; opacity:.65;
}
.mz-rich-content img {
  max-width:100%; height:auto; display:block; margin:1.4em 0; border-radius:1px;
}
.mz-rich-content figure { margin:1.4em 0; }
.mz-rich-content figcaption { font-size:.8em; color:var(--muted); margin-top:.5em; letter-spacing:.08em; }
.mz-rich-content hr { border:none; border-top:1px solid var(--line); margin:2em 0; }

/* ══════════════════════════════════════════════════════════
   TEXTOS OVERLAY — Lista de entradas de WordPress
══════════════════════════════════════════════════════════ */
.mz-textos-overlay .mz-overlay-title {
  color: var(--textos-color);
}
.mz-textos-list {
  padding: 40px 28px 80px;
  max-width: 900px;
}
/* Cada entrada */
.mz-post-item {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  text-decoration: none;
  color: var(--fg);
  transition: opacity .2s;
}
.mz-post-item:first-child { border-top: 1px solid var(--line); }
.mz-post-item:hover { opacity: .5; }
.mz-post-item:hover .mz-post-arrow { opacity: 1; transform: translateX(4px); }

.mz-post-title {
  font-family:    var(--font-title);
  font-weight:    900;
  font-style:     italic;
  font-size:      clamp(22px, 3.2vw, 42px);
  letter-spacing: -.01em;
  line-height:    1.05;
  color:          var(--ticker-color);
  flex:           1;
}
.mz-post-year {
  font-family:    var(--font-body);
  font-size:      8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--muted);
  flex-shrink:    0;
}
.mz-post-arrow {
  font-family:  var(--font-body);
  font-size:    13px;
  color:        var(--fg);
  opacity:      0;
  transition:   opacity .2s, transform .2s;
  flex-shrink:  0;
}

/* Mensaje si no hay entradas */
.mz-no-posts {
  font-family: var(--font-body);
  font-size:   15px; opacity:.45;
  padding:     40px 0;
}

/* ── SINGLE fallback ── */
.mz-single-wrap { padding:88px 28px 70px; max-width:720px; margin:0 auto; }
.mz-back-link   { font-family:var(--font-body); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg); text-decoration:none; opacity:.4; transition:opacity .2s; }
.mz-back-link:hover { opacity:1; }
.mz-single-title { font-family:var(--font-title); font-weight:900; font-style:italic; font-size:clamp(26px,4vw,44px); margin:28px 0 24px; }
.mz-single-content { font-family:var(--font-body); font-size:16px; line-height:1.82; opacity:.82; }

/* ── ADMIN BAR ── */
.admin-bar .mz-header { top:32px; }
@media screen and (max-width:782px) { .admin-bar .mz-header { top:46px; } }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .mz-gallery   { padding:32px 48px 16px; }
  .mz-proj-body { padding:24px 48px 60px; }
}

@media (max-width:700px) {
  :root { --strip-h:var(--strip-h-mob); --ticker-size:clamp(16px,5vw,22px); }
  .mz-header  { padding:14px 18px 0; grid-template-columns:1fr auto 1fr; gap:8px; }
  .mz-nav     { gap:18px; }
  .mz-textos-btn { font-size:8px; padding:6px 14px 5px; }
  .mz-gif     { width:76px; }
  .mz-strip::before, .mz-strip::after { width:26px; }
  .mz-item    { padding:0 14px; gap:9px; }
  .mz-gallery { padding:24px 40px 12px; min-height:36vh; }
  .mz-slide img { max-height:52vh; }
  .mz-proj-body { padding:22px 18px 52px; }
  .mz-proj-meta { gap:18px; }
  .mz-overlay-header { padding:16px 18px; }
  .mz-info-section   { padding:52px 18px 36px; }
  .mz-contact-section { padding:36px 18px 72px; }
  .mz-info-galleries-section { padding:36px 18px 40px; gap:36px; }
  .mz-info-gallery { max-width:100%!important; }
  .mz-ig-frame.is-natural img { max-height:58vh; }
  .mz-footer  { padding:18px; }
  .mz-textos-list { padding:28px 18px 60px; }
  .mz-post-title  { font-size:clamp(18px,6vw,28px); }
}

@media (prefers-reduced-motion:reduce) { .mz-track { animation:none!important; } }

/* ══════════════════════════════════════════════════════════
   POST CONTENT OVERLAY
══════════════════════════════════════════════════════════ */
.mz-post-overlay .mz-overlay-title {
  color: var(--ticker-color);
}
.mz-post-overlay-actions {
  display:     flex;
  align-items: center;
  gap:         20px;
}
.mz-post-permalink {
  font-family:    var(--font-body);
  font-size:      8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--fg);
  text-decoration: none;
  opacity:        .3;
  transition:     opacity .2s;
  white-space:    nowrap;
}
.mz-post-permalink:hover { opacity: .9; }

.mz-post-body {
  padding:   40px 60px 80px;
  max-width: 720px;
}
.mz-post-byline {
  font-family:    var(--font-body);
  font-size:      8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  36px;
}

@media (max-width: 700px) {
  .mz-post-body { padding: 24px 18px 60px; }
  .mz-post-overlay-actions { gap: 12px; }
}