/* ============================================================
   Migue — Marca Personal · CSS del sistema
   Complementa theme.json. Todo lo tokenizable ya vive como
   variables --wp--preset--* / --wp--custom--*. Aquí va lo que
   theme.json no cubre: la grilla-reveal, primitivas y detalles.
   ============================================================ */

:root {
  --migue-ease-vida: var(--wp--custom--motion--easing-vida, cubic-bezier(0.34, 1.16, 0.64, 1));
  --migue-cell-dur: var(--wp--custom--motion--duration-cell, 620ms);
}

/* Selección de texto en la paleta de marca */
::selection {
  background: var(--wp--preset--color--accent-red);
  color: var(--wp--preset--color--cream);
}

/* Etiqueta técnica mono (labels tipo DESIGN & STRATEGY / asset IDs) */
.migue-label {
  font-family: var(--wp--preset--font-family--mono);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.6875rem;
  color: var(--wp--preset--color--grey-2);
  display: inline-block;
}

/* ---------- MÁSCARA FRACTAL — el tratamiento de foto que revela ----------
   La foto va a sangre como fondo del contenedor. reveal.js coloca encima
   rectángulos irregulares (±25%) de carbón que cubren ~65%, dejando ~35% de
   "ventanas" a la foto (rostro ≥70% visible). El motion abre las ventanas en
   orden aleatorio (el rompecabezas que revela al sujeto) y florecen ~5% de
   acentos. Sin líneas: los rectángulos van a sangre (se solapan 0.2%). */
.migue-mask {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center top;
  background-color: var(--wp--preset--color--base);
  border-radius: var(--wp--custom--radius--soft);
  overflow: hidden;
}

.migue-mask__rect {
  position: absolute;
  background-color: var(--wp--preset--color--base);
  transition:
    opacity var(--migue-cell-dur) var(--migue-ease-vida),
    background-color var(--migue-cell-dur) var(--migue-ease-vida);
}

/* Estado resuelto: las ventanas de foto se abren; los acentos florecen. */
.migue-mask.is-revealed .migue-mask__rect[data-state="photo"] { opacity: 0; }
.migue-mask.is-revealed .migue-mask__rect[data-state="red"]   { background-color: var(--wp--preset--color--accent-red); }
.migue-mask.is-revealed .migue-mask__rect[data-state="amber"] { background-color: var(--wp--preset--color--accent-amber); }

/* Movimiento reducido: sin transición (estado final directo, lo pone el JS). */
@media (prefers-reduced-motion: reduce) {
  .migue-mask__rect { transition: none; }
}

/* ---------- Primitivas geométricas sueltas (decorativas) ---------- */
.migue-primitive { display: inline-block; vertical-align: middle; }
.migue-primitive--square { width: 14px; height: 14px; background: var(--wp--preset--color--accent-red); }
.migue-primitive--circle { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--wp--preset--color--accent-amber); }
.migue-primitive--x { position: relative; width: 14px; height: 14px; }
.migue-primitive--x::before,
.migue-primitive--x::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px;
  background: var(--wp--preset--color--cream);
}
.migue-primitive--x::before { transform: rotate(45deg); }
.migue-primitive--x::after  { transform: rotate(-45deg); }

/* Tratamiento de foto humana: grayscale de tono cálido (nunca azulado).
   Solo en fotos de personas (blog); los proyectos van en color. */
.migue-photo img,
figure.migue-photo img {
  filter: grayscale(1) sepia(0.12) contrast(1.05) brightness(0.98);
}

/* ---------- Tarjetas de proyecto (bloque dinámico del plugin) ---------- */
.migue-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--wp--preset--spacing--50, 32px);
}
.migue-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--wp--preset--color--cream);
  border: 1px solid var(--wp--preset--color--surface);
  border-radius: var(--wp--custom--radius--soft);
  padding: var(--wp--preset--spacing--40, 24px);
  transition:
    border-color 0.2s var(--migue-ease-vida),
    transform 0.2s var(--migue-ease-vida);
}
.migue-card:hover {
  border-color: var(--wp--preset--color--accent-amber);
  transform: translateY(-2px);
}
.migue-card__media {
  display: block;
  border-radius: var(--wp--custom--radius--soft);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.migue-card__media img,
.migue-card__img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.migue-card__label { margin-top: 16px; }
.migue-card__title {
  font-family: var(--wp--preset--font-family--archivo);
  font-weight: 900; text-transform: uppercase;
  font-size: 1.35rem; line-height: 1.05; letter-spacing: -0.3px;
  margin-top: 8px;
}
.migue-card__excerpt {
  color: var(--wp--preset--color--grey-1);
  font-size: 0.9375rem; margin-top: 10px;
}

/* ---------- Media dentro de la ficha de proyecto ---------- */
.migue-proyecto-cta { margin: 24px 0; }
.migue-proyecto-video {
  width: 100%; display: block;
  border-radius: var(--wp--custom--radius--soft);
}