/* En Armonía Studio — layout and components. Values come from tokens.css.
   R7 (2026-10-03): the brand lockup (A over "Studio") travels from the hero into the centre of the header;
   each stage is two zones, the person and an info column, so text never overlaps text. */

/* ========== Base ========== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
:root { --header-h: 64px; --paper-tex: url("../textures/paper003.jpg"); }
:root[data-paper="paper006"] { --paper-tex: url("../textures/paper006.jpg"); }
body {
  background: var(--paper) var(--paper-tex) center top / 1024px auto; color: var(--ink);
  font-family: var(--font-text); font-size: var(--t-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
:lang(zh), :lang(ja) { font-family: var(--font-cjk); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 300; color: var(--ink-2); }
h1:lang(zh), h2:lang(zh) { font-family: var(--font-cjk); font-weight: 400; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--ink-2); text-decoration-color: var(--line); text-underline-offset: .15em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.label { font-family: var(--font-text); font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
:lang(zh) .label, .label:lang(zh) { letter-spacing: .08em; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
main, .header, .explore, .lab { position: relative; z-index: 1; }

/* Seal: a square stamp in an area colour (Explore popover) */
.seal { --c: var(--seal-color, var(--accent)); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 5px;
  background: var(--c); color: var(--paper); font-size: 15px; line-height: 1; flex: none;
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--paper) 35%, transparent); }

/* Paper piece: lighter paper (Paper 001) carrying words, with a torn edge */
.piece {
  background: color-mix(in oklab, var(--paper) 80%, white) url("../textures/paper001.jpg") center / 600px auto;
  color: var(--ink); border-radius: 2px;
  clip-path: polygon(0 6%, 3% 0, 22% 3%, 41% 0, 60% 4%, 79% 1%, 100% 5%, 99% 55%, 100% 94%, 97% 100%, 78% 97%, 58% 100%, 39% 96%, 18% 100%, 0 96%, 1% 50%);
}

/* ========== Header: Explore left, ES/EN right; the centre belongs to the brand lockup ========== */
.header {
  --p: 0;
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--header-h);
  display: flex; align-items: center; gap: var(--s3); padding: 0 var(--gutter);
  background: color-mix(in oklab, var(--paper) calc(var(--p) * 92%), transparent);
  backdrop-filter: blur(calc(var(--p) * 10px));
  border-bottom: 1px solid color-mix(in oklab, var(--line) calc(var(--p) * 100%), transparent);
}
.header .spacer { flex: 1; }
.header .explore-toggle, .header .lang-toggle { opacity: var(--p); pointer-events: none; }
.header.is-on .explore-toggle, .header.is-on .lang-toggle { pointer-events: auto; }

.explore-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-chip); border: 1px solid var(--line); font-size: var(--t-small); background: var(--paper); }
.explore-toggle .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background var(--d-fast); }
.explore-toggle.is-active .dot { background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }
.explore-toggle[aria-expanded="true"] { background: var(--ink-2); color: var(--paper); border-color: var(--ink-2); }

.lang-toggle { display: flex; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-chip); padding: 2px; }
.lang-toggle button { padding: 3px 9px; border-radius: var(--r-chip); font-size: var(--t-label); letter-spacing: .08em; color: var(--muted); }
.lang-toggle button[aria-pressed="true"] { background: var(--ink-2); color: var(--paper); }

/* ========== Brand lockup (positioned every frame by site.js) ========== */
.brand { position: fixed; left: 0; top: 0; z-index: 21; width: 0; height: 0; text-decoration: none; pointer-events: none; opacity: 0; }
.brand.is-ready { opacity: 1; }
.brand.is-docked { pointer-events: auto; }
.brand-a, .brand-studio { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; }
.brand-a { display: block; color: var(--accent); overflow: visible; }
.brand-a path { stroke-width: var(--sw, 2.2); }
.brand-studio { white-space: nowrap; line-height: 1; color: var(--ink-2); font-family: var(--font-title); }
.brand:focus-visible { outline: none; }
.brand:focus-visible .brand-a { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
html.brand-live .hero-a-slot svg, html.brand-live .hero-studio { opacity: 0; }   /* the lockup stands in for them */

/* ========== Explore popover (opens under the Explore button, top left) ========== */
.explore {
  position: fixed; top: calc(var(--header-h) + 8px); left: var(--gutter); z-index: 19; width: min(320px, calc(100vw - 2 * var(--gutter)));
  padding: var(--s4); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-tile);
  box-shadow: 0 12px 40px color-mix(in oklab, var(--ink) 18%, transparent); display: grid; gap: var(--s4);
}
.explore[hidden] { display: none; }
.explore-group { display: grid; gap: var(--s2); }
.explore-areas, .explore-langs { display: flex; flex-wrap: wrap; gap: var(--s2); }
.explore-areas button { --c: var(--area-color); display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 8px; border: 1px solid var(--line); font-size: var(--t-small); background: var(--paper); }
.explore-areas button .seal { width: 20px; height: 20px; }
.explore-areas button[aria-pressed="true"] { border-color: var(--c); background: color-mix(in oklab, var(--c) 12%, var(--paper)); }
.explore-langs button { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line); font-size: var(--t-small); background: var(--paper); }
.explore-langs button[aria-pressed="true"] { border-color: var(--ink-2); background: var(--ink-2); color: var(--paper); }
.explore-media { justify-self: start; font-size: var(--t-small); color: var(--ink-2); padding-top: var(--s3); border-top: 1px solid var(--line); width: 100%; text-decoration: none; }
.explore-clear { justify-self: start; font-size: var(--t-small); color: var(--muted); text-decoration: underline; text-underline-offset: .15em; }

/* ========== Hero ========== */
.hero { min-height: 74svh; display: grid; place-items: center; text-align: center; padding: calc(var(--header-h) + var(--s5)) var(--gutter) var(--s7); }
.hero-inner { max-width: var(--measure); }
.hero-a-slot { display: block; width: 96px; height: 96px; margin: 0 auto var(--s6); color: var(--accent); }
.hero-a-slot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero h1 { font-family: var(--font-title); font-size: var(--t-display); line-height: 1.02; letter-spacing: .005em; font-weight: 400; }
.hero .rule { width: 48px; height: 1px; background: var(--accent-2); margin: var(--s6) auto; }
.hero-line { font-family: var(--font-display); font-size: clamp(1.15rem, 3.2vw, 1.5rem); color: var(--ink); font-style: italic; }
.hero-line:empty { display: none; }
.scroll-hint { margin-top: var(--s6); color: var(--muted); }
.scroll-hint::after { content: ""; display: block; width: 1px; height: 40px; margin: var(--s3) auto 0; background: linear-gradient(var(--accent), transparent); animation: drift var(--d-drift) var(--ease) infinite; }
@keyframes drift { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(8px); opacity: .4; } }

/* ========== Stream: shared ground + a thread behind the stages ========== */
.stream { position: relative; padding: 0 0 var(--s9); }
.stream .thread { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.stream .thread path { fill: none; stroke: var(--accent-2); stroke-width: 1.5; opacity: .85; stroke-dasharray: 5 7; }
.stages { position: relative; z-index: 1; display: grid; gap: var(--s7); padding: 0 var(--gutter); max-width: 620px; margin: 0 auto; }
.no-results { text-align: center; padding: var(--s6) var(--gutter) 0; }

/* ========== Stage: two zones in one grid row ==========
   media (the person) spans the full width, behind; the info column sits on the side the person faces, in front.
   The row is as tall as whichever is taller, so the column can never spill onto anything else.
   Layers inside a stage (it's isolated): glow -1 · media 0 · person button 1 · info 3. */
.stage {
  --c: var(--area-color, var(--accent)); --c2: var(--area-color-2, var(--c));
  --info-w: 56%; --px: 39%;
  container-type: inline-size; position: relative; isolation: isolate;
  display: grid; grid-template-columns: 1fr var(--info-w); align-items: start;
  scroll-margin-top: calc(var(--header-h) + 16px); transition: opacity var(--d-base) var(--ease);
}
.stage[data-facing="left"] { grid-template-columns: var(--info-w) 1fr; --px: 61%; }
.stage.is-hidden { display: none; }

/* the person: floating a little, with a ground shadow and a faint glow of the area colour */
.stage .media { grid-row: 1; grid-column: 1 / -1; position: relative; height: min(100cqi, 600px); animation: hover 7s ease-in-out infinite; }
.stage:nth-child(even) .media { animation-duration: 8.5s; animation-delay: -3s; }
@keyframes hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.stage .media::before { content: ""; position: absolute; inset: 20% 0 -6% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(42% 42% at var(--px) 72%, color-mix(in oklab, var(--c) 26%, transparent), transparent 72%); }
.stage .media::after { content: ""; position: absolute; left: var(--px); bottom: -6px; width: 40%; height: 18px; transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in oklab, var(--ink) 18%, transparent), transparent); }
.stage video, .stage .poster { position: absolute; bottom: 0; width: 78%; height: 100%; object-fit: contain; object-position: bottom; }
.stage[data-facing="right"] video, .stage[data-facing="right"] .poster { left: 0; }
.stage[data-facing="left"]  video, .stage[data-facing="left"]  .poster { right: 0; }
.stage video { opacity: 0; transition: opacity var(--d-slow) var(--ease); }
.stage[data-load="light"] video, .stage[data-load="full"] video { opacity: 1; }
.stage .poster { transition: opacity var(--d-slow) var(--ease); }
.stage[data-load="light"] .poster, .stage[data-load="full"] .poster { opacity: 0; }
.stage .haze { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: color-mix(in oklab, var(--paper) 22%, transparent);
  -webkit-mask-image: radial-gradient(70% 75% at 50% 60%, #000 40%, transparent 100%); mask-image: radial-gradient(70% 75% at 50% 60%, #000 40%, transparent 100%); }

/* the person as a button, for keyboards and screen readers; pointer clicks anywhere on the stage open it too */
.stage .person { position: absolute; inset: 0; z-index: 1; }
.stage .person:focus-visible { outline-offset: -4px; }

/* ---------- the info column: name → indicator → languages → line → contacts, all in normal flow ---------- */
.stage .info { grid-row: 1; grid-column: 2; position: relative; z-index: 3; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: var(--s4);
  padding: 7cqi 5cqi 6cqi 0;
  transform: translateY(calc(var(--sy, 0) * -10px)); transition: transform var(--d-base) var(--ease); }
.stage[data-facing="left"] .info { grid-column: 1; align-items: flex-start; text-align: left; padding: 7cqi 0 6cqi 5cqi; }

/* name: sized by the stage's own width, so it always fits its column */
.stage .name { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.7rem, 12.5cqi, 3.4rem); line-height: .95; letter-spacing: -.01em;
  color: var(--ink-2); max-width: 100%; overflow-wrap: anywhere; text-shadow: 0 0 .35em color-mix(in oklab, var(--paper) 85%, transparent); }
.stage .name span { position: relative; display: block; }
.stage .name .first { font-style: italic; }
/* treatment "both": a ghost outline in the area colour + a roll-on entrance (tracking/blur, works for any face) */
:root[data-type="both"] .stage .name span::before { content: attr(data-text); content: attr(data-text) / ""; position: absolute; inset: 0; z-index: -1;
  color: transparent; -webkit-text-stroke: 1px var(--c); transform: translate(6px, 5px); opacity: .7; text-shadow: none; }
:root[data-type="both"] .stage .name span { opacity: 0; filter: blur(6px); letter-spacing: .08em; transform: translateY(6px);
  transition: opacity .9s var(--ease), filter .9s var(--ease), letter-spacing 1.1s var(--ease), transform .9s var(--ease); }
:root[data-type="both"] .stage .name .last { transition-delay: .12s; }
:root[data-type="both"] .stage.is-seen .name span { opacity: 1; filter: blur(0); letter-spacing: -.01em; transform: none; }

/* discipline indicator (lab → Indicador): graphic and label side by side with a fixed gap, never touching */
.stage .indicator { display: flex; align-items: center; gap: var(--s3); max-width: 100%; }
.stage[data-facing="right"] .indicator { flex-direction: row-reverse; }
.stage .indicator > * { display: none; }
.stage .ind-label { min-width: 0; font-family: var(--font-text); font-size: .74rem; letter-spacing: .12em; line-height: 1.35; text-transform: uppercase; color: var(--ink-2); }
:root:is([data-ind="seal"], [data-ind="object"]) .stage .ind-label { display: block; }
/* Sello: one stamp with the area glyph */
:root[data-ind="seal"] .stage .ind-seal { display: grid; }
.stage .ind-seal { place-items: center; flex: none; width: 46px; height: 46px; border-radius: 8px; background: var(--seal-color); color: var(--paper); font-size: 24px; line-height: 1;
  transform: rotate(-4deg); box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--paper) 35%, transparent), 0 8px 16px color-mix(in oklab, var(--ink) 24%, transparent); }
/* Objeto: one cut-paper object of their practice */
:root[data-ind="object"] .stage .ind-obj { display: block; }
.stage .ind-obj { flex: none; width: 54px; height: 54px; overflow: visible; fill: var(--c); filter: drop-shadow(0 6px 8px color-mix(in oklab, var(--ink) 22%, transparent)); }
.stage .ind-obj.clean path { stroke: color-mix(in oklab, var(--paper) 70%, white); stroke-width: 2; paint-order: stroke fill; }
.stage .ind-obj.torn path { stroke: color-mix(in oklab, var(--paper) 55%, white); stroke-width: 3; paint-order: stroke fill; stroke-linejoin: round; }
.stage .ind-obj.torn { filter: url(#torn) drop-shadow(0 6px 8px color-mix(in oklab, var(--ink) 22%, transparent)); }
/* Etiqueta: a paper tag with the area and the practices */
:root[data-ind="tag"] .stage .ind-tag { display: block; }
.stage .ind-tag { max-width: 100%; padding: 9px 12px 10px; border-left: 4px solid var(--c); border-radius: 2px 8px 8px 2px; text-align: left;
  background: color-mix(in oklab, var(--paper) 80%, white) url("../textures/paper001.jpg") center / 400px auto; color: var(--ink); font-size: var(--t-small); line-height: 1.3;
  box-shadow: 0 6px 14px color-mix(in oklab, var(--ink) 18%, transparent); }
.stage .ind-tag b { display: block; margin-bottom: 3px; font-family: var(--font-text); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c); }

/* languages: translucent paper ("vellum") on the nearer layer */
.stage .langs { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.stage[data-facing="right"] .langs { justify-content: flex-end; }
.stage .langs li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 6px;
  font-size: .82rem; letter-spacing: .06em; line-height: 1.2; color: var(--ink-2);
  background: color-mix(in oklab, var(--paper) 72%, transparent); border: 1px solid color-mix(in oklab, white 60%, transparent);
  box-shadow: 0 4px 12px color-mix(in oklab, var(--ink) 12%, transparent); }
.stage .langs li:lang(zh), .stage .langs li:lang(ja) { letter-spacing: 0; }
.stage .langs li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lc, var(--ink-2)); }

/* reveal: the line and the contacts. Phones: the column grows to make room (tap).
   Desktop: the room is always reserved, so hovering never moves anything. */
.stage .reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-base) var(--ease); max-width: 100%; }
.stage .reveal-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: var(--s3);
  padding: 4px 6px 14px; margin: -4px -6px -14px;           /* room for shadows inside the clip */
  opacity: 0; visibility: hidden; transition: opacity var(--d-base) var(--ease), visibility 0s linear var(--d-base); }
.stage[data-facing="right"] .reveal-inner { align-items: flex-end; }
.stage[data-facing="left"]  .reveal-inner { align-items: flex-start; }
.stage.is-open .reveal { grid-template-rows: 1fr; }
.stage.is-open .reveal-inner { opacity: 1; visibility: visible; transition: opacity var(--d-base) var(--ease), visibility 0s; }
@media (hover: hover) {
  .stage .reveal { grid-template-rows: 1fr; }
  .stage.is-hover .reveal-inner { opacity: 1; visibility: visible; transition: opacity 1.1s var(--ease), visibility 0s; }
}
.stage .line { max-width: 100%; padding: 10px 14px; font-family: var(--font-display); font-style: italic; font-size: 1.02rem; line-height: 1.35; color: var(--ink-2); }
.stage .contacts { display: flex; flex-wrap: wrap; gap: var(--s2); max-width: 100%; }
.stage[data-facing="right"] .contacts { justify-content: flex-end; }
.stage .contact { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 15px; border-radius: var(--r-chip);
  font-size: .95rem; line-height: 1.2; color: var(--ink-2); text-decoration: none;
  background: color-mix(in oklab, var(--paper) 72%, transparent); border: 1px solid color-mix(in oklab, white 60%, transparent);
  box-shadow: 0 4px 12px color-mix(in oklab, var(--ink) 12%, transparent); transition: border-color var(--d-fast), background var(--d-fast); }
.stage .contact:hover { border-color: var(--c); background: color-mix(in oklab, var(--paper) 88%, transparent); }
.stage .contact .ico { font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--c); }

/* ========== Scenes (lab → Escena): Cuadrícula (default) / Carrusel (desktop) ========== */
@media (min-width: 820px) {
  .stages { max-width: 1180px; grid-template-columns: 1fr 1fr; column-gap: var(--s7); row-gap: var(--s7); align-items: start; }
  .stage:nth-child(even) { margin-top: var(--s9); }
}
@media (min-width: 1280px) {
  .stages { grid-template-columns: repeat(3, 1fr); max-width: 1400px; }
  .stage:nth-child(n) { margin-top: 0; }
  .stage:nth-child(3n+2) { margin-top: var(--s8); }
}
@media (min-width: 820px) {
  :root[data-scene="carousel"] .stages { display: flex; align-items: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; gap: 0;
    max-width: none; padding: var(--s6) 30vw var(--s8); scrollbar-width: none; }
  :root[data-scene="carousel"] .stages::-webkit-scrollbar { display: none; }
  :root[data-scene="carousel"] .stage { flex: 0 0 40vw; max-width: 560px; scroll-snap-align: center; margin: 0;
    --d: 0; opacity: calc(1 - var(--d) * .5); filter: blur(calc(var(--d) * 1.2px));
    transition: transform .35s var(--ease), opacity .35s var(--ease), filter .35s var(--ease); }
  :root[data-scene="carousel"] .stage:nth-child(n) { margin: 0; transform: scale(calc(1 - var(--d) * .2)) translateY(calc(var(--d) * 14px)); }
  :root[data-scene="carousel"] .stream .thread { display: none; }
}

/* ========== Footer ========== */
.footer { text-align: center; padding: var(--s8) var(--gutter) var(--s9); color: var(--muted); font-size: var(--t-small); }
.footer .mark { display: block; width: 32px; height: 32px; margin: 0 auto var(--s4); color: var(--accent); overflow: visible; }

/* ========== Lab (review-time switches; removed before launch) ========== */
.lab { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 30; }
.lab-toggle { width: 44px; height: 44px; border-radius: 50%; background: var(--ink-2); color: var(--paper); display: grid; place-items: center; font-size: 20px; box-shadow: 0 6px 20px color-mix(in oklab, var(--ink) 25%, transparent); }
.lab-panel { position: absolute; right: 0; bottom: 54px; width: 240px; padding: var(--s4); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-tile); display: none; gap: var(--s3); }
.lab.is-open .lab-panel { display: grid; }
.lab-panel label { display: grid; gap: 4px; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lab-panel select { font: inherit; font-size: var(--t-small); padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); letter-spacing: 0; text-transform: none; }

/* ========== Reduced motion ========== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-hint::after { animation: none; }
  .brand { opacity: 0 !important; }
  .brand.is-docked { opacity: 1 !important; }
  .stage .media { animation: none; }
  .stage video { display: none; }
  .stage .poster { opacity: 1 !important; }
  .stage .info { transform: none; }
  .stage .reveal, .stage .reveal-inner, .stage .name span { transition: none !important; }
}