/* ============================================================================
   Puertas: five ways to work with Jesús, as a pile of index cards with side
   tabs (separadores). The visitor names their situation on a tab and that
   card rises to the front of the pile.

   The base rules are the no-JS column: five complete cards, one under another.
   The deck only exists under .doors.is-deck, a class the module adds, so a
   script that fails still leaves every door readable.
   ========================================================================== */

.doors {
  --edge: var(--rule);
  --dotc: color-mix(in oklab, var(--sc-ink) 24%, transparent);
  --ray: color-mix(in oklab, var(--accent-deep) 30%, transparent);
  --peek: 3rem;
  --peek-r: 2.75rem;
  overflow-x: clip;
}
:root[data-theme="night"] .doors {
  --edge: color-mix(in oklab, var(--sc-ink) 19%, transparent);
  --dotc: color-mix(in oklab, var(--sc-ink) 18%, transparent);
  --ray: color-mix(in oklab, var(--sc-ink) 16%, transparent);
}

/* ------------------------------------------------------------- heading -- */
.doors__h { max-width: none; }
/* two short sentences: break between them, not after "a" with "tu caso." hanging */
.doors__lede { text-wrap: balance; }

/* ------------------------------------------------ deck (column fallback) -- */
.doors__deck {
  position: relative;
  margin-top: clamp(2.5rem, 6vh, 4.25rem);
  display: grid; gap: 1.5rem;
  max-width: 46rem;
}
.doors__table { display: none; }
.doors__pile { display: grid; gap: 1.5rem; }
.doors__tabs[hidden] { display: none; }

/* --------------------------------------------------------------- a card -- */
.doors__card { position: relative; border-radius: var(--sc-r-md); }
.doors__sheet {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  background: var(--sc-surface);
  border: 1px solid var(--edge);
  border-radius: inherit;
  box-shadow: var(--sc-e2), var(--sc-edge);
  overflow: hidden;
  transition: background-color var(--theme-dur) var(--ease-out), border-color var(--theme-dur) var(--ease-out);
}
/* distance: cards deeper in the pile sit in a little less light */
.doors__sheet::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  border-radius: inherit;
  background: var(--sc-canvas);
  opacity: var(--shade, 0);
  transition: opacity 380ms var(--ease-out);
}
/* reduced motion: the new card is set under a half veil with no transition,
   then the veil lifts over the 380ms above */
.doors__card.is-veiled .doors__sheet::after { transition: none; }

/* the index-card header: the door is a file, like everything on this page */
.doors__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 2.6rem;
  padding: 0.72rem 1.1rem 0.72rem 1.4rem;
  border-bottom: 1px solid color-mix(in oklab, var(--sc-accent) 62%, transparent);
}
.doors__path { font: 400 0.74rem/1 var(--sc-font-mono); letter-spacing: 0.02em; color: var(--sc-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doors__path b { font-weight: 500; color: var(--sc-ink); }

.doors__body {
  flex: 1;
  display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 1.75rem;
  padding: 1.4rem 1.6rem 1.35rem 1.4rem;
}

/* The plate: an arched doorway framed like a banknote vignette. By day a sun
   with fine engraved rays stands behind the scene; by night a crescent and
   thin rain. The engraving itself is an alpha mask inked by theme. */
.doors__plate {
  --arch: 7.75rem;
  /* where the sun (or the moon) stands in the arch. Each engraving has its
     own silhouette, so each door places its light where the drawing leaves
     sky; measured on the rendered masks, never on top of the ink.
       --sun-x     where the light stands across the arch
       --sun-rest  how low it stands when the drawing leaves room for it
       --orb-r     the sun's radius (the moon is smaller and shares its centre)
       --ar        the mask's width over its height
       --t         how high the ink reaches under the light, as a fraction of
                   the mask's height (0 is its top edge), read on the 640px
                   mask over the light's columns, +-0.15 of the mask's width
       --engr-w    how much of the plate's width the drawing may take (a
                   fraction); a low, wide drawing takes more so that its
                   furniture stands as tall as the others'
     The drawings are no longer all low, wide objects: a table with a wheeled
     display and a stage with its wide screen rise into the sky. So the light
     is lifted to stand a gap above the ink, wherever the plate is wide or tall,
     and a drawing that would leave no room for it is stood a little smaller
     (see the end of the masks, below). Without container units the light
     rests at --sun-rest, tuned for the desktop plate. */
  --sun-x: 50%;
  --sun-rest: 27%;
  --sun-y: var(--sun-rest);
  --orb-r: 1.65rem;
  --sun-gap: 0.75rem;
  --ar: 1;
  --t: 0.1;
  --engr-w: 0.9;
  --engr-cap: 74%;
  --engr-h: var(--engr-cap);
  --ray-rx: 8rem;
  --ray-ry: 5.3rem;
  position: relative; margin: 0; min-height: 18rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--arch) var(--arch) var(--sc-r-sm) var(--sc-r-sm);
  background: linear-gradient(180deg, color-mix(in oklab, var(--sc-accent) 17%, var(--sc-surface)) 0%, var(--sc-surface) 74%);
  overflow: hidden; isolation: isolate;
}
.doors__plate::after {
  content: ""; position: absolute; inset: 5px; z-index: 4; pointer-events: none;
  border: 1px solid var(--rule);
  border-radius: calc(var(--arch) - 5px) calc(var(--arch) - 5px) 1px 1px;
}
/* same box as the orb (inset 0), so a percentage means the same point in both */
.doors__sky {
  position: absolute; inset: 0; z-index: 0;
  background: repeating-conic-gradient(from 0deg at var(--sun-x) var(--sun-y), var(--ray) 0deg 0.55deg, transparent 0.55deg 5deg);
  -webkit-mask: radial-gradient(ellipse var(--ray-rx) var(--ray-ry) at var(--sun-x) var(--sun-y), transparent 0 24%, #000 32%, transparent 100%);
          mask: radial-gradient(ellipse var(--ray-rx) var(--ray-ry) at var(--sun-x) var(--sun-y), transparent 0 24%, #000 32%, transparent 100%);
  transform-origin: var(--sun-x) var(--sun-y);
  translate: calc(var(--px, 0) * 3px) 0;
}
.doors__orb {
  position: absolute; z-index: 1; left: var(--sun-x); top: var(--sun-y);
  width: calc(var(--orb-r) * 2); height: calc(var(--orb-r) * 2);
  margin: calc(var(--orb-r) * -1) 0 0 calc(var(--orb-r) * -1); border-radius: 50%;
  background: color-mix(in oklab, var(--sc-accent) 80%, var(--sc-surface));
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--sc-accent) 15%, transparent);
  translate: calc(var(--px, 0) * 6px) calc(var(--py, 0) * 5px);
}
.doors__engr {
  position: absolute; z-index: 2;
  left: calc((1 - var(--engr-w)) * 50%); right: calc((1 - var(--engr-w)) * 50%);
  bottom: 6%; height: var(--engr-h);
  --engr-ink: var(--sc-ink);
  /* Masks are set here, relative to this stylesheet: an inline --src:url()
     resolves against css/core.css (where var() is read) and 404s. */
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center bottom; mask-position: center bottom;
  /* used only by the doors whose mask is laid twice (see density, below) */
  -webkit-mask-composite: source-over, source-in;
          mask-composite: add, intersect;
  translate: calc(var(--px, 0) * -7px) calc(var(--py, 0) * -4px);
}
/* The masks are requested only when the chapter is a couple of screens away
   (.is-near, set by doors.js) or when there is no script at all; the page's
   first screens never wait on them. */
/* Density. The five drawings do not come out with the same stroke: uno-a-uno
   and equipos are drawn thin and grey, charlas keeps its weight in a few
   dense strokes and large soft tones, a-medida is the darkest. The target is
   the weight of a-medida as it comes, which is also where equipos (k = 0.9,
   kept from the earlier set) lands: p95 of the ink alpha about 0.8 and its
   mean about 0.4, measured on each mask as rendered (221px wide, average of
   1x and 2x). A door below it lays its mask twice, the second copy tempered
   by a flat layer of alpha k: alpha becomes a + k*a*(1-a), which lifts the
   dense strokes without thickening the fine hatching. Mean / p95, unboosted
   then at the k below: a-medida 0.40 / 0.82, no boost; uno-a-uno 0.30 / 0.65,
   k = 0.75 gives 0.40 / 0.81; taller 0.38 / 0.72, k = 0.3 gives 0.40 / 0.78;
   equipos 0.27 / 0.58, k = 0.9 gives 0.41 / 0.79; charlas 0.30 / 0.70,
   k = 0.5 gives 0.35 / 0.80. Charlas is matched on p95 only: a third of its
   ink is under 0.16 alpha (the platform, the blank screen), and lifting that
   to the mean would grey the stage, at night a slab of light. */
:is(html:not(.js), .doors.is-near) [data-door="uno-a-uno"] .doors__engr {
  -webkit-mask-image: url(../../assets/doors/door-uno-a-uno.webp), linear-gradient(rgb(0 0 0 / 0.75), rgb(0 0 0 / 0.75)), url(../../assets/doors/door-uno-a-uno.webp);
          mask-image: url(../../assets/doors/door-uno-a-uno.webp), linear-gradient(rgb(0 0 0 / 0.75), rgb(0 0 0 / 0.75)), url(../../assets/doors/door-uno-a-uno.webp);
}
:is(html:not(.js), .doors.is-near) [data-door="a-medida"] .doors__engr { -webkit-mask-image: url(../../assets/doors/door-a-medida.webp); mask-image: url(../../assets/doors/door-a-medida.webp); }
:is(html:not(.js), .doors.is-near) [data-door="equipos"] .doors__engr {
  -webkit-mask-image: url(../../assets/doors/door-equipos.webp), linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9)), url(../../assets/doors/door-equipos.webp);
          mask-image: url(../../assets/doors/door-equipos.webp), linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9)), url(../../assets/doors/door-equipos.webp);
}
:is(html:not(.js), .doors.is-near) [data-door="taller"] .doors__engr {
  -webkit-mask-image: url(../../assets/doors/door-taller.webp), linear-gradient(rgb(0 0 0 / 0.3), rgb(0 0 0 / 0.3)), url(../../assets/doors/door-taller.webp);
          mask-image: url(../../assets/doors/door-taller.webp), linear-gradient(rgb(0 0 0 / 0.3), rgb(0 0 0 / 0.3)), url(../../assets/doors/door-taller.webp);
}
:is(html:not(.js), .doors.is-near) [data-door="charlas"] .doors__engr {
  -webkit-mask-image: url(../../assets/doors/door-charlas.webp), linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5)), url(../../assets/doors/door-charlas.webp);
          mask-image: url(../../assets/doors/door-charlas.webp), linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5)), url(../../assets/doors/door-charlas.webp);
}
/* Each drawing's light. --ar and --t are read off the masks (see the plate).
   a-medida: the arm and its gripper stand in the middle, the open sky is to
   the right, so the sun moves there. taller: the wheeled screen rises on
   the right, so the sun stands left of centre, over the table. The rest have
   their sky above them, at the centre of the arch.
   charlas: the stage is a low, wide drawing (640 x 501, ink from 0.05 down,
   the screen's top edge slopes down to the right, so the highest ink under
   the light is 0.064 down), so it takes 95% of the plate's width and stands
   about as tall as the others' furniture: 164px of ink on a 248px plate, next
   to 168 (uno-a-uno), 187, 130 and 202. */
[data-door="uno-a-uno"] .doors__plate { --ar: 1.185; --t: 0.05; }
[data-door="a-medida"] .doors__plate { --ar: 1.077; --t: 0.2; --sun-x: 76%; --sun-rest: 25%; }
[data-door="equipos"] .doors__plate { --ar: 1.517; --t: 0.06; }
[data-door="taller"] .doors__plate { --ar: 1; --t: 0.3; --sun-x: 42%; }
[data-door="charlas"] .doors__plate { --ar: 1.277; --t: 0.064; --engr-w: 0.95; }
/* The light follows the drawing whatever the plate's proportions (the plate
   is wider or shorter at every breakpoint). The drawing is drawn in a box
   that is a cap tall (--engr-cap) and --engr-w (90%) wide, so the mask's
   rendered height is the smaller of the two, its width over --ar; the light
   stands a gap above the ink under it and never lower than --sun-rest. When the arch is
   too short to hold the light and the drawing at its full height, the
   drawing takes the difference (this part needs no container units).
   Only the width of the plate is a container: the plate's height is
   stretched by the grid, and container units on a stretched, size-contained
   box come out as 0 in Chromium once the row is sized by min-height. */
.doors__plate {
  --engr-h: min(var(--engr-cap), calc((94% - var(--orb-r) * 2 - var(--sun-gap) - 0.85rem) / (1 - var(--t))));
}
@supports (width: 1cqw) {
  .doors__plate {
    container-type: inline-size;
    --mask-h: min(var(--engr-h), calc(var(--engr-w) * 100cqw / var(--ar)));
    --sun-y: min(var(--sun-rest), calc(94% - var(--mask-h) * (1 - var(--t)) - var(--orb-r) - var(--sun-gap)));
  }
}
:root[data-theme="night"] .doors__plate {
  background: linear-gradient(180deg, color-mix(in oklab, var(--sc-ink) 5%, var(--sc-surface)) 0%, var(--sc-surface) 78%);
}
:root[data-theme="night"] .doors__sky {
  background: repeating-linear-gradient(104deg, transparent 0 9px, var(--ray) 9px 10px);
  -webkit-mask: linear-gradient(180deg, #000 0%, transparent 72%);
          mask: linear-gradient(180deg, #000 0%, transparent 72%);
}
:root[data-theme="night"] .doors__orb {
  width: 2.7rem; height: 2.7rem; margin: -1.35rem 0 0 -1.35rem;
  background: transparent;
  box-shadow: inset -0.62rem 0.22rem 0 0 var(--sc-accent);
  rotate: -18deg;
}

/* the text side of the card */
.doors__text { display: flex; flex-direction: column; min-width: 0; padding-top: 0.3rem; }
.doors__situ {
  margin-bottom: 0.7rem;
  font: 500 0.78rem/1.3 var(--sc-font-mono); letter-spacing: 0.02em; color: var(--accent-deep);
}
.doors__situ::before { content: "> "; color: var(--sc-ink-soft); }
.doors__title { font-size: clamp(1.8rem, 1.3rem + 0.8vw, 2.3rem); line-height: 1.04; }
.doors__tagline {
  margin-top: 0.6rem;
  font: 450 1.06rem/1.42 var(--sc-font-text); letter-spacing: -0.005em; color: var(--sc-ink);
  text-wrap: balance;
}
.doors__desc { font-size: 0.94rem; line-height: 1.56; color: var(--sc-ink-soft); max-width: 46ch; }

/* The little schematic: the offer drawn instead of read. */
.doors__dg { display: block; width: 100%; max-width: 23rem; height: auto; margin: 1.15rem 0 1.05rem; overflow: visible; }
.doors__dg .ln { fill: none; stroke: var(--sc-ink-soft); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.doors__dg .soft, .doors__dg .ln.soft { stroke: var(--rule-strong); }
.doors__dg .dash { stroke-dasharray: 3 3; }
.doors__dg .hol { fill: var(--sc-surface); stroke: var(--sc-ink-soft); stroke-width: 1.1; }
.doors__dg .acc { fill: var(--sc-accent); stroke: var(--accent-deep); stroke-width: 1; }
.doors__dg .run { fill: var(--signal); stroke: none; }
.doors__dg .ring { fill: none; stroke: var(--accent-deep); stroke-width: 1; opacity: 0.55; }
.doors__dg .tick { fill: none; stroke: var(--sc-accent-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.doors__dg text { font-family: var(--sc-font-mono); font-size: 11px; letter-spacing: 0.01em; fill: var(--sc-ink-soft); }

/* footer: the one action, and the practical note */
.doors__foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem 1.4rem;
  padding: 1rem 1.4rem 1.05rem;
  border-top: 1px solid var(--edge);
  background: color-mix(in oklab, var(--sc-canvas) 40%, var(--sc-surface));
}
.doors__note { display: inline-flex; align-items: center; gap: 0.55rem; font: 400 0.86rem/1.4 var(--sc-font-text); color: var(--sc-ink-soft); }
.doors__note svg { width: 1rem; height: 1rem; flex: none; color: var(--accent-deep); }

/* ================================================================ deck == */
.doors.is-deck .doors__deck {
  max-width: none;
  grid-template-columns: clamp(15.5rem, 23vw, 20.5rem) minmax(0, 47rem);
  gap: 0; align-items: start;
  isolation: isolate;
}
.doors.is-deck .doors__situ { display: none; }

/* the desk the pile lies on: a faint dot grid, fading at its edges */
.doors.is-deck .doors__table {
  display: block; position: absolute; z-index: 0; pointer-events: none;
  left: 11rem; right: -4rem; top: -2.5rem; bottom: -4.5rem;
  background-image: radial-gradient(circle, var(--dotc) 1.25px, transparent 1.9px);
  background-size: 22px 22px; background-position: 11px 11px;
  -webkit-mask: radial-gradient(ellipse 62% 64% at 62% 50%, #000 45%, transparent 100%);
          mask: radial-gradient(ellipse 62% 64% at 62% 50%, #000 45%, transparent 100%);
}

/* side tabs. The list itself never forms a stacking context, so each tab
   layers against the pile: the chosen one sits on top and joins its card,
   the rest tuck in behind the card's edge. */
.doors.is-deck .doors__tabs {
  display: flex; flex-direction: column; gap: 0.45rem;
  padding-top: calc(var(--peek) + 1.9rem);
}
.doors__tab {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 0.5rem minmax(0, 1fr); column-gap: 0.85rem; row-gap: 0.32rem; align-items: center;
  width: calc(100% + 1px); min-height: 4.55rem; margin: 0;
  padding: 0.8rem 1.35rem 0.8rem 1.15rem;
  font: inherit; text-align: left; color: var(--sc-ink-soft); cursor: pointer;
  background: var(--ground-2);
  border: 1px solid var(--edge); border-right: 0;
  border-radius: var(--sc-r-md) 0 0 var(--sc-r-md);
  box-shadow: var(--sc-e1);
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 200ms var(--ease-out), color 200ms var(--ease-out),
    translate 520ms var(--ease-out), opacity 420ms var(--ease-out), scale 120ms var(--ease-out);
  transition-delay: 0ms, 0ms, calc(var(--i, 0) * 60ms + 240ms), calc(var(--i, 0) * 60ms + 240ms), 0ms;
}
.doors.is-settled .doors__tab { transition-delay: 0ms; }
.doors.is-settled .doors__tab { transition-duration: 200ms, 200ms, 220ms, 220ms, 120ms; }
.doors.is-deck:not(.is-dealt) .doors__tab { opacity: 0; translate: 2.25rem 0; }

.doors__tab-dot {
  grid-row: 1 / span 2; align-self: start; margin-top: 0.42rem;
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  border: 1px solid var(--rule-strong); background: var(--sc-canvas);
  transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.doors__tab-say { font: 450 0.98rem/1.28 var(--sc-font-text); letter-spacing: -0.005em; text-wrap: balance; }
.doors__tab-name { font: 400 0.72rem/1.2 var(--sc-font-mono); letter-spacing: 0.02em; color: var(--sc-ink-soft); transition: color 200ms var(--ease-out); }

.doors__tab.is-active {
  z-index: 20;
  background: var(--sc-surface); color: var(--sc-ink);
  box-shadow: var(--sc-e2), var(--sc-edge);
  clip-path: inset(-2.5rem 0 -2.5rem -2.5rem);
}
.doors__tab.is-active .doors__tab-say { font-weight: 520; }
.doors__tab.is-active .doors__tab-dot {
  background: var(--sc-accent); border-color: var(--accent-deep);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc-accent) 24%, transparent);
}
.doors__tab.is-active .doors__tab-name { color: var(--accent-deep); }
@media (hover: hover) and (pointer: fine) {
  .doors.is-dealt .doors__tab:not(.is-active):hover {
    translate: -6px 0; color: var(--sc-ink);
    background: color-mix(in oklab, var(--ground-2) 45%, var(--sc-surface));
  }
  .doors__tab:not(.is-active):hover .doors__tab-dot { border-color: var(--sc-ink-soft); }
}
.doors__tab:active { scale: 0.99; }
/* focus: the global ring (ink outline) is kept as is. Only its offset moves
   inside the tab, because the active tab is clipped at its right edge
   (clip-path) and would lose that side of an outside ring. */
.doors__tab:focus-visible { outline-offset: -5px; }

/* the pile */
.doors.is-deck .doors__pile {
  position: relative; z-index: 5;
  gap: 0;
  padding: var(--peek) var(--peek-r) 0 0;
}
.doors.is-deck .doors__card {
  grid-area: 1 / 1;
  transform-origin: 50% 0;
  will-change: transform;
  translate: 0 var(--lift, 0px);
  transition: translate 260ms var(--ease-out);
}
.doors.is-deck .doors__card:not(.is-front) { cursor: pointer; }
.doors.is-deck .doors__card:not(.is-front) .doors__sheet { box-shadow: var(--sc-e1), var(--sc-edge); }
.doors.is-deck .doors__card.is-front .doors__sheet { box-shadow: var(--sc-e3), var(--sc-edge); transform-origin: 0% 50%; }
/* a card in the pile shows clean paper at its edge, not half-cut letters */
.doors.is-deck .doors__bar > * { transition: opacity 240ms var(--ease-out); }
.doors.is-deck .doors__card:not(.is-front) .doors__bar > * { opacity: 0; transition-duration: 120ms; }
/* preview from a tab (or a hovered edge): the card rises out of the pile far
   enough that its strip reads as a file, puertas/taller.md, in full light */
.doors.is-deck .doors__card.is-peek:not(.is-front) { --lift: -22px; }
.doors.is-deck .doors__card.is-peek:not(.is-front) .doors__sheet::after { opacity: 0; transition-duration: 200ms; }
.doors.is-deck .doors__card.is-peek:not(.is-front) .doors__bar > * { opacity: 1; transition-duration: 200ms; }
@media (hover: hover) and (pointer: fine) {
  .doors.is-deck .doors__card:not(.is-front):hover { --lift: -22px; }
  .doors.is-deck .doors__card:not(.is-front):hover .doors__sheet::after { opacity: 0; transition-duration: 200ms; }
  .doors.is-deck .doors__card:not(.is-front):hover .doors__bar > * { opacity: 1; transition-duration: 200ms; }
}

/* the schematic draws itself when its card lands in front */
.doors.is-deck .doors__dg { clip-path: inset(-4px 100% -4px 0); }
.doors.is-deck .doors__card.is-live .doors__dg { clip-path: inset(-4px -4px -4px 0); transition: clip-path 900ms var(--ease-out) 40ms; }
.doors.is-deck .doors__dg .pop { opacity: 0; scale: 0.55; transform-box: fill-box; transform-origin: center; }
.doors.is-deck .doors__card.is-live .doors__dg .pop {
  opacity: 1; scale: 1;
  transition: opacity 260ms var(--ease-out), scale 360ms var(--ease-out);
  transition-delay: calc(160ms + var(--i, 0) * 55ms);
}
@keyframes doors-run { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.doors.is-deck .doors__card.is-live .doors__dg .run { animation: doors-run 2.6s ease-in-out 1.2s infinite; }
.doors.is-deck.is-away .doors__card.is-live .doors__dg .run { animation-play-state: paused; }

/* Opening a door: when its card lands, the sun climbs into its place in the
   arch from behind the scene and the engraved rays settle by a few degrees.
   By night the crescent comes down and the teal rain starts falling. The
   rest pose is set without a transition, so a card leaving the front resets
   while it is already covered by the one arriving. Transform only: the
   pointer parallax owns the separate translate property. */
.doors.is-deck .doors__card:not(.is-live) .doors__orb { opacity: 0; transform: translateY(46%) scale(0.92); }
.doors.is-deck .doors__card:not(.is-live) .doors__sky { opacity: 0; transform: rotate(-3.5deg); }
:root[data-theme="night"] .doors.is-deck .doors__card:not(.is-live) .doors__orb { transform: translateY(-44%) scale(0.92); }
:root[data-theme="night"] .doors.is-deck .doors__card:not(.is-live) .doors__sky { transform: translateY(-14px); }
.doors.is-deck .doors__card.is-live .doors__orb {
  transition: transform 760ms cubic-bezier(0.2, 0.9, 0.25, 1) 40ms, opacity 360ms var(--ease-out) 40ms;
}
.doors.is-deck .doors__card.is-live .doors__sky {
  transition: transform 1100ms var(--ease-out) 90ms, opacity 640ms var(--ease-out) 90ms;
}

/* ----------------------------------------------------------- responsive -- */
@media (min-width: 1600px) {
  .doors.is-deck .doors__deck { grid-template-columns: clamp(20.5rem, 19vw, 23rem) minmax(0, 54rem); }
  .doors__body { grid-template-columns: 17.5rem minmax(0, 1fr); gap: 2.1rem; padding: 1.6rem 1.9rem 1.5rem 1.6rem; }
  .doors__plate { --arch: 8.75rem; min-height: 20rem; --ray-rx: 9rem; --ray-ry: 6rem; --orb-r: 1.85rem; }
  :root[data-theme="night"] .doors__orb { width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; box-shadow: inset -0.7rem 0.25rem 0 0 var(--sc-accent); }
  .doors__tagline { font-size: 1.12rem; }
  .doors__desc { font-size: 0.98rem; }
  .doors__dg { max-width: 25rem; }
}
@media (max-width: 1360px) {
  .doors__body { grid-template-columns: 12.5rem minmax(0, 1fr); gap: 1.4rem; }
  .doors__plate { --arch: 6.25rem; min-height: 16rem; }
}
/* laptops: the longest situation still fits on one line */
@media (max-width: 1420px) {
  .doors__tab { padding-right: 0.8rem; }
  .doors__tab-say { font-size: 0.92rem; }
}
@media (max-width: 900px) {
  .doors { --peek: 2rem; --peek-r: 1.5rem; }
  .doors.is-deck .doors__deck { grid-template-columns: minmax(0, 1fr); }
  .doors.is-deck .doors__tabs { padding-top: 0; margin-bottom: 1.5rem; gap: 0.4rem; }
  .doors__tab { width: 100%; min-height: 3.6rem; border-right: 1px solid var(--edge); border-radius: var(--sc-r-md); }
  .doors__tab.is-active { clip-path: none; }
  .doors.is-deck .doors__table { left: 0; }
  .doors.is-deck .doors__pile { scroll-margin-top: calc(var(--chrome-h) + 0.5rem); }
  .doors__body { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding: 1.1rem 1.1rem 1.2rem; }
  .doors__plate { --arch: 5.5rem; min-height: 12.5rem; width: min(100%, 15rem); }
  .doors__plate { --sun-rest: 18%; --orb-r: 1.2rem; --engr-cap: 64%; --ray-rx: 6.6rem; --ray-ry: 4.2rem; }
  [data-door="a-medida"] .doors__plate { --sun-x: 70%; --sun-rest: 20%; }
  :root[data-theme="night"] .doors__orb { width: 2.1rem; height: 2.1rem; margin: -1.05rem 0 0 -1.05rem; box-shadow: inset -0.5rem 0.18rem 0 0 var(--sc-accent); }
  .doors__bar { padding-left: 1.1rem; }
  .doors__foot { padding: 0.9rem 1.1rem 1rem; }
}

/* 320px phones: "Automatizaciones" at the full title size ends 14px inside
   the card's right padding (4px from the card edge); at 1.6rem it fits. From
   about 335px up the full size fits on its own. */
@media (max-width: 334px) {
  .doors__title { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .doors__tab { transition-duration: 200ms, 200ms, 0ms, 220ms, 0ms; }
  .doors.is-deck:not(.is-dealt) .doors__tab { translate: none; }
  .doors.is-deck .doors__card { transition: none; }
  .doors.is-deck .doors__card.is-peek:not(.is-front), .doors.is-deck .doors__card:not(.is-front):hover { --lift: 0px; }
  /* the door still opens, in light only: no climb, no turn, no fall */
  :root[data-theme] .doors.is-deck .doors__card:not(.is-live) .doors__orb,
  :root[data-theme] .doors.is-deck .doors__card:not(.is-live) .doors__sky { transform: none; }
  .doors.is-deck .doors__card.is-live .doors__orb,
  .doors.is-deck .doors__card.is-live .doors__sky { transition: opacity 360ms var(--ease-out); }
  .doors.is-deck .doors__dg, .doors.is-deck .doors__card.is-live .doors__dg { clip-path: none; transition: none; }
  .doors.is-deck .doors__dg .pop { scale: 1; }
  .doors.is-deck .doors__card.is-live .doors__dg .pop { transition: opacity 220ms var(--ease-out); transition-delay: 0ms; }
  .doors.is-deck .doors__card.is-live .doors__dg .run { animation: none; }
  .doors__sky, .doors__orb, .doors__engr { translate: none; }
}