/* Tango-DO — site.css
   Component classes & layout primitives.
   Loads after assets/ds/styles.css (tokens already in scope). */

/* ─── Layout ──────────────────────────────────────────────────────────────── */

.site-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1;
}

.container {
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: var(--gutter-page);
}

/* ─── Wordmark ─────────────────────────────────────────────────────────────
   Usage: <span class="wordmark">TANGO<span class="wordmark__dash">—</span>DO</span>
   Stacked: add class "wordmark--stacked" to parent (flex-col)
   Tone:    add "wordmark--ocre" / "--crema" / "--pigment" / "--ruptura"
            Default dash colour: rojo-senal. */

.wordmark {
  font-family: var(--font-display);
  line-height: 0.92;
  color: var(--color-crema);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  font-weight: 400;
}

.wordmark__dash {
  color: var(--color-rojo-senal);
  padding: 0 0.05em;
}

.wordmark--stacked               { display: flex; flex-direction: column; }
.wordmark--ocre    .wordmark__dash { color: var(--color-ocre); }
.wordmark--crema   .wordmark__dash { color: var(--color-crema); }
.wordmark--pigment .wordmark__dash { color: var(--color-borravino-tint); }
.wordmark--ruptura .wordmark__dash { color: var(--color-azul-acero-tint); }

/* ─── Eyebrow ──────────────────────────────────────────────────────────────
   Base .eyebrow defined in ds/tokens/base.css (font-mono, uppercase, ocre).
   Tone modifiers added here. */

.eyebrow--crema   { color: var(--color-crema-3); }
.eyebrow--pigment { color: var(--color-borravino-tint); }
.eyebrow--senal   { color: var(--color-rojo-senal); }

/* ─── Tag ──────────────────────────────────────────────────────────────────
   Usage: <span class="tag tag--ocre tag--sm">novato</span> */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-crema-3);
  background: transparent;
  color: var(--color-crema);
  line-height: 1;
  white-space: nowrap;
  cursor: default;
  transition: color var(--dur-quick) var(--ease-out),
              border-color var(--dur-quick) var(--ease-out);
}
/* Sizes */
.tag--sm { padding: 2px 8px;  font-size: 10px; }
.tag--md { padding: 4px 10px; font-size: 11px; }
.tag--lg { padding: 5px 12px; font-size: 12px; }
/* Variants */
.tag--solid   { background: var(--color-crema);          color: var(--color-fondo);       border-color: var(--color-crema); }
.tag--pigment { background: var(--color-borravino);       color: var(--color-crema);       border-color: var(--color-borravino); }
.tag--ocre    { background: transparent;                  color: var(--color-ocre-tint);   border-color: var(--color-ocre); }
.tag--ruptura { background: var(--color-azul-acero);      color: var(--color-crema);       border-color: var(--color-azul-acero); }
.tag--senal   { background: transparent;                  color: var(--color-rojo-senal);  border-color: var(--color-rojo-senal); }

/* ─── Button ───────────────────────────────────────────────────────────────
   Usage: <a class="btn btn--pigment btn--lg" href="#">Explorar el archivo</a> */

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--radius-1);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-quick) var(--ease-out),
              color var(--dur-quick) var(--ease-out),
              transform var(--dur-quick) var(--ease-out),
              border-color var(--dur-quick) var(--ease-out);
}
.btn:active { transform: scale(var(--press-scale)); }
/* Sizes */
.btn--sm { padding: 7px 12px;  font-size: 11px; gap: 6px; }
.btn--md { padding: 11px 18px; font-size: 12px; gap: 8px; }
.btn--lg { padding: 14px 24px; font-size: 13px; gap: 10px; }
/* Variants */
.btn--solid   { background: var(--color-crema);          color: var(--color-fondo);       border-color: var(--color-crema); }
.btn--ghost   { background: transparent;                  color: var(--color-crema);       border-color: var(--color-crema-3); }
.btn--pigment { background: var(--color-borravino);       color: var(--color-crema);       border-color: var(--color-borravino); }
.btn--ruptura { background: transparent;                  color: var(--color-rojo-senal);  border-color: var(--color-rojo-senal); }

/* ─── Card ─────────────────────────────────────────────────────────────────
   Usage: <div class="card card--ink"> */

.card {
  background: var(--surface-card);
  border: 1px solid var(--color-fondo-line);
  border-radius: var(--radius-2);
  padding: 24px;
  color: var(--text-body);
}
.card--sm      { padding: 16px; }
.card--lg      { padding: 32px; }
.card--none    { padding: 0; }
.card--ink     { border-color: var(--color-crema-3); }
.card--pigment { border-color: var(--color-borravino); }
.card--ruptura { border-color: var(--color-azul-acero); }
.card--senal   { border-color: var(--color-rojo-senal); }

/* ─── FichaRow + Ficha ─────────────────────────────────────────────────────
   Usage:
   <div class="ficha-row ficha-row--4">
     <div class="ficha">
       <div class="ficha__label">parada</div>
       <div class="ficha__value">cruzada · empeine</div>
     </div>
   </div> */

.ficha-row {
  display: grid;
  column-gap: 24px;
  row-gap: 0;
  border-top: 1px solid var(--color-crema-3);
}
.ficha-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ficha-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ficha-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ficha {
  padding: 12px 16px 14px 0;
  border-top: 1px solid var(--color-fondo-line);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ficha__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-crema-3);
}

.ficha__value {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0;
  line-height: 1;
  color: var(--color-crema);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.ficha__value--senal   { color: var(--color-rojo-senal); }
.ficha__value--ocre    { color: var(--color-ocre-tint); }
.ficha__value--pigment { color: var(--color-borravino-tint); }

.ficha__suffix {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-crema-3);
}

/* ─── Meter ────────────────────────────────────────────────────────────────
   Usage: <div class="meter meter--ocre">
            <div class="meter__track"><div class="meter__fill" style="width:62%"></div></div>
          </div> */

.meter {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meter__track {
  position: relative;
  height: 4px;
  background: var(--color-fondo-line);
  border-radius: 1px;
  overflow: hidden;
}

.meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--color-rojo-senal); /* default: senal */
  transition: width var(--dur-slow) var(--ease-out);
}
.meter--ocre    .meter__fill { background: var(--color-ocre); }
.meter--pigment .meter__fill { background: var(--color-borravino-tint); }
.meter--ruptura .meter__fill { background: var(--color-azul-acero); }
.meter--crema   .meter__fill { background: var(--color-crema); }

.meter__value {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-crema-3);
}

/* ─── RevealImage ──────────────────────────────────────────────────────────
   Two-layer stack: flat (lines) below, impasto (oil) above.
   Default state: impasto visible. Hover → flat surfaces.
   Usage:
   <div class="reveal-img">
     <img class="reveal-img__flat"    src="…-flat.webp"    alt="…">
     <img class="reveal-img__impasto" src="…-impasto.webp" aria-hidden="true">
   </div>
   When only flat available, repeat src for both + add class "reveal-img--sim". */

.reveal-img {
  position: relative;
  background: var(--color-fondo-3);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow-inset-frame);
}

.reveal-img__flat,
.reveal-img__impasto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reveal-img__impasto {
  opacity: 1;
  transition: opacity var(--dur-reveal) var(--ease-reveal);
  will-change: opacity;
}

/* Simulated impasto: boost saturation/contrast on the same image */
.reveal-img--sim .reveal-img__impasto {
  filter: saturate(1.18) contrast(1.10) brightness(1.06);
}

/* Hover: impasto fades out, flat surfaces */
.reveal-img:hover .reveal-img__impasto {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-img__impasto { transition: none; }
}

/* ─── YeiteCard ────────────────────────────────────────────────────────────
   Usage:
   <a class="yeite-card" href="/yeite/plegaria">
     <div class="reveal-img …">…</div>
     <div class="yeite-card__caption">…</div>
   </a> */

.yeite-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.yeite-card__caption {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.yeite-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.yeite-card__name {
  font-family: var(--font-display);
  font-size: 40px;
  color: var(--color-crema);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.yeite-card__parada {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-crema-3);
  font-style: italic;
}

.yeite-card__meters {
  display: grid;
  grid-template-columns: 70px 1fr 36px;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.yeite-card__meter-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-crema-3);
}

.yeite-card__meter-val {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-crema);
  text-align: right;
}

/* ─── Navigation ───────────────────────────────────────────────────────────
   Sticky top nav: brand left, links + version tag right. */

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--gutter-page);
  border-bottom: 1px solid var(--color-fondo-line);
  background: var(--surface-page);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.site-nav__brand {
  text-decoration: none;
  flex-shrink: 0;
}

.site-nav__links {
  display: flex;
  gap: 28px;
  align-items: center;
}

/* wp_nav_menu outputs <ul class="site-nav__menu"><li>…</li></ul> */
.site-nav__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 28px;
  align-items: center;
}
.site-nav__menu li { list-style: none; }

/* Both hardcoded fallback links and wp_nav_menu anchors */
.site-nav__link,
.site-nav__menu a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-crema-3);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-quick) var(--ease-out),
              border-color var(--dur-quick) var(--ease-out);
}

.site-nav__link:hover,
.site-nav__link--active,
.site-nav__menu a:hover,
.site-nav__menu .current-menu-item > a,
.site-nav__menu .current_page_item > a {
  color: var(--color-crema);
  border-bottom-color: var(--color-rojo-senal);
  text-decoration: none;
}

/* ─── Footer ───────────────────────────────────────────────────────────────
   4-col grid: brand + tagline · archivo · manual · pipeline */

.site-footer {
  margin-top: var(--space-12);
  padding: var(--space-10) var(--gutter-page) var(--space-8);
  border-top: 1px solid var(--color-fondo-line);
  background: var(--surface-page);
}

.site-footer__grid {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--space-8);
}

.site-footer__tagline {
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-crema-3);
  max-width: 240px;
  line-height: var(--leading-body);
}

.site-footer__col-heading {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ocre);
  margin-bottom: 14px;
}

.site-footer__col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer__col-list a {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-crema-2);
  text-decoration: none;
}

.site-footer__col-list a:hover {
  color: var(--color-crema);
  text-decoration-color: transparent;
}

.site-footer__bottom {
  max-width: var(--layout-max-width);
  margin: 40px auto 0;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--color-crema-4);
  text-transform: uppercase;
}

/* ─── Tag — interactive variant ────────────────────────────────────────────
   Filter buttons in the archive use <button class="tag …">. */

button.tag {
  cursor: pointer;
  background: transparent;
}

/* ─── Home page ─────────────────────────────────────────────────────────────
   Sections: hero · filters · grid · manifesto.
   Mirrors the layout of Home.jsx / index.html from the design system. */

.home-page {
  padding-top: var(--space-10);
  padding-bottom: var(--space-7);
}

/* Hero — 2-col: headline left (1.2fr) + body right (1fr) */
.home-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-10);
  align-items: end;
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--color-crema-3);
}

.home-hero__h1 {
  font-family: var(--font-display);
  font-size: var(--type-display-xl);
  line-height: 0.88;
  letter-spacing: -0.015em;
  color: var(--color-crema);
  text-transform: uppercase;
  margin: 0;
}

.home-hero__body-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.home-hero__body {
  font-family: var(--font-body);
  font-size: var(--type-body-xl);
  color: var(--color-crema);
  line-height: 1.35;
  max-width: 460px;
  margin: 0;
}

.home-hero__note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--type-body-md);
  color: var(--color-crema-3);
  max-width: 460px;
  margin: 0;
}

.home-hero__actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

/* Filters — label + pill buttons left; count right */
.home-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-7) 0 var(--space-6);
}

.home-filters__left {
  display: flex;
  gap: 10px;
  align-items: center;
}

.home-filters__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-crema-3);
  margin-right: 8px;
  user-select: none;
}

.home-filters__right {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-crema-3);
}

/* Grid — 3 columns */
.home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter-column) var(--gutter-column);
  padding: var(--space-5) 0 var(--space-11);
}

/* Manifesto strip — eyebrow left (1fr) + text right (2fr) */
.home-manifesto {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-10);
  border-top: 1px solid var(--color-fondo-line);
  padding: var(--space-10) 0 var(--space-8);
}

.home-manifesto__body {
  font-family: var(--font-body);
  font-size: var(--type-body-xl);
  color: var(--color-crema);
  line-height: 1.35;
  max-width: 720px;
}

.home-manifesto__note {
  color: var(--color-crema-3);
  font-style: italic;
}

/* ─── Responsive ───────────────────────────────────────────────────────────
   S1 goal: nav/footer degrade correctly on mobile.
   S2 additions: home hero/grid/manifesto. */

@media (max-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .home-hero         { grid-template-columns: 1fr 1fr; }
  .home-grid         { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .site-nav__links { gap: 16px; }
  .site-nav__links .tag { display: none; }
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .site-footer__bottom {
    flex-direction: column;
    gap: 8px;
  }

  .home-hero {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .home-hero__body,
  .home-hero__note { max-width: 100%; }
  .home-hero__actions { flex-wrap: wrap; }
  .home-filters {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .home-grid { grid-template-columns: 1fr; }
  .home-manifesto { grid-template-columns: 1fr; }
}