/* ARRANXO · manitas pages: manitas (hub), montaje de muebles, montar armario, colgar la tele, cambiar el bombín, cinta
   de persiana. On top of styles.css (tokens, .page-hero, .band, .faq, .btn, .ico); behaviour in p-manitas.js.
   Text never animates in: only strokes draw and drawn parts move (transform, opacity, stroke-dashoffset). Without JS,
   with reduced motion and before p-manitas.js runs, every drawing is finished and every answer is readable.
   One green per screen: the hero drawing's accent · on paper, the selected chooser tile's slash (or the full checklist
   line) · on the call band, the phone's waves.
   Drawing classes (inline SVG, class "pm-ill"): k = construction line · o = part · t = thin part · h = hidden part
   (dashed, fades in) · g = THE green stroke · gf = green fill · fs = filled in front (hides what is behind) ·
   lbl = annotation (hidden on phones) · lbl-l = its leader · d1–d9 = draw order. Every drawn path has pathLength="1". */

/* ---------- drawing basics ---------- */
.pm-ill { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: currentColor;
  stroke-linecap: round; stroke-linejoin: round; }
.pm-ill .k { stroke-width: calc(var(--sw, 2) * .6); stroke-opacity: .24; }
.pm-ill .o { stroke-width: var(--sw, 2); }
.pm-ill .t { stroke-width: calc(var(--sw, 2) * .62); }
.pm-ill .h { stroke-width: calc(var(--sw, 2) * .6); stroke-dasharray: 5 6; stroke-opacity: .62; }
.pm-ill .g { stroke: var(--green); }
.pm-ill .gf { fill: var(--green); stroke: none; }
.pm-ill .fs { fill: var(--pm-bg, var(--slate)); }
.pm-ill .dot { stroke-width: calc(var(--sw, 2) * 1.6); }
.pm-ill .lbl { fill: currentColor; fill-opacity: .78; stroke: none; font: 600 12px var(--font); letter-spacing: .14em; }
.pm-ill .lbl-big { font-size: 22px; font-weight: 700; letter-spacing: .02em; fill-opacity: 1; }
.pm-ill .lbl-l { stroke-width: 1; stroke-opacity: .5; }
.pm-ill .s22 { stroke-width: calc(var(--sw, 2) / 2.2); }   /* an icon scaled ×2.2 keeps the drawing's stroke */
.pm-ill .s09 { stroke-width: calc(var(--sw, 2) * .82 / .9); }
.pm-ill .mv { transform-box: view-box; }

@keyframes pm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pm-fade { from { opacity: 0; } }
@keyframes pm-rise { from { opacity: 0; transform: translateY(.6rem); } }
@keyframes pm-drop { from { opacity: 0; transform: translateY(-34px); } 35% { opacity: 1; } }
@keyframes pm-up { from { transform: translateY(var(--pm-y, 30px)); } }
@keyframes pm-in-x { from { opacity: 0; transform: translateX(var(--pm-x, -28px)); } 30% { opacity: 1; } }
@keyframes pm-slide { from { transform: translateX(var(--pm-x, -96px)); } }
@keyframes pm-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pm-raise { from { transform: rotate(-90deg); } }
@keyframes pm-out { from { opacity: 0; transform: translate(var(--tx, 0px), var(--ty, 0px)); } 40% { opacity: 1; } }

/* ---------- 1 · hero with its drawing ---------- */
.pm-hero::before { display: none; }   /* the page's own drawing replaces the quiet construction circles */
.pm-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr); }
.pm-art { --sw: 3.6; --pm-bg: var(--slate); justify-self: end; width: min(60vw, 15rem); margin: -.75rem -.5rem .5rem 0;
  color: var(--paper); pointer-events: none; }
.pm-art .lbl, .pm-art .lbl-l { display: none; }   /* phones: annotations would be too small to read */
.pm-art .lbl.lbl-big { display: inline; }   /* except the big letters of a measure (bombín A / B) */
.pm-art .cam { transform-origin: 240px 300px; }
@media (min-width: 52em) {
  .pm-hero .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-rows: repeat(7, auto) 1fr;
    column-gap: clamp(2rem, 4vw, 5rem); }
  .pm-hero .wrap > * { grid-column: 1; }
  .pm-hero .pm-art { --sw: 2; grid-column: 2; grid-row: 1 / -1; align-self: center; justify-self: stretch; width: auto;
    max-width: 36rem; margin: 0 -1rem 0 0; }
  .pm-art .lbl, .pm-art .lbl-l { display: inline; }
  .pm-hero h1 { font-size: clamp(2.35rem, .9rem + 3.3vw, 4.1rem); }
  .pm-hero .hero-proof { max-width: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* on load, once: construction lines, then the part, then notes; at last the one movement of each drawing */
  .js .pm-art [pathLength] { stroke-dasharray: 1; animation: pm-draw 1s var(--ease-io) both; }
  .js .pm-art .k[pathLength] { animation-duration: 1.2s; }
  .js .pm-art .h, .js .pm-art .lbl, .js .pm-art .lbl-l, .js .pm-art .gf { animation: pm-fade .6s var(--ease) 1.15s both; }
  .js .pm-art .d1 { animation-delay: .1s; } .js .pm-art .d2 { animation-delay: .2s; } .js .pm-art .d3 { animation-delay: .3s; }
  .js .pm-art .d4 { animation-delay: .4s; } .js .pm-art .d5 { animation-delay: .5s; } .js .pm-art .d6 { animation-delay: .6s; }
  .js .pm-art .d7 { animation-delay: .7s; } .js .pm-art .d8 { animation-delay: .8s; } .js .pm-art .d9 { animation-delay: .9s; }
  .js .pm-art .mv-drop { animation: pm-drop .9s var(--ease) 1.25s both; }
  .js .pm-art .mv-up { animation: pm-up 1s var(--ease) 1.1s both; }
  .js .pm-art .lift { --pm-y: -38px; animation-timing-function: cubic-bezier(.5, 0, .2, 1.15); }
  .js .pm-art .mv-key { animation: pm-in-x .9s var(--ease) 1.1s both; }
  .js .pm-art .mv-slide { animation: pm-slide 1.1s var(--ease) 1.35s both; }
  .js .pm-art .mv-bub { animation: pm-slide 1.3s cubic-bezier(.34, 1.4, .64, 1) 2.25s both; --pm-x: 11px; }
  .js .pm-art .mv-lvl { animation: pm-fade .5s var(--ease) 2.05s both; }
  .js .pm-art .mv-spin { animation: pm-spin 1.3s var(--ease-io) 1.9s both; }
  .js .pm-art .n { animation: pm-out .9s var(--ease) both; }
  .js .pm-art .n1 { --tx: 0px; --ty: 42px; animation-delay: .55s; }
  .js .pm-art .n2 { --tx: -40px; --ty: 13px; animation-delay: .67s; }
  .js .pm-art .n3 { --tx: -25px; --ty: -34px; animation-delay: .79s; }
  .js .pm-art .n4 { --tx: 25px; --ty: -34px; animation-delay: .91s; }
  .js .pm-art .n5 { --tx: 40px; --ty: 13px; animation-delay: 1.03s; }
}

/* ---------- 2 · choosers (one answer open at a time; the same pattern as the home picker) ---------- */
.pm-pick { display: grid; gap: .5rem; }
.pm-tile {
  position: relative; display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 4rem; padding: .6rem 3.25rem .6rem .85rem;
  background: var(--sheet); color: var(--slate); border: 1px solid var(--line-strong); border-radius: var(--r);
  font: 700 1.0625rem/1.25 var(--font); letter-spacing: -.01em; text-align: left; cursor: pointer;
  transition: background-color 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease), transform 160ms var(--ease);
}
.pm-tile .ico { width: 2.4rem; height: 2.4rem; stroke-width: 2; }
.pm-tile .ico path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.pm-tile::after { /* plus → minus */
  content: ""; position: absolute; right: 1.1rem; top: 50%; width: .9rem; height: .9rem; margin-top: -.45rem;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform 300ms var(--ease); }
.pm-tile[aria-expanded="true"]::after { transform: rotate(180deg); background-size: 100% 2px, 2px 0; }
.pm-tile:active { transform: scale(.985); }
.pm-tile[aria-expanded="true"] { background: var(--slate); color: var(--paper); border-color: var(--slate); }
.pm-tile[aria-expanded="true"]::before { /* the isotipo's green bar: THE green mark of this screen */
  content: ""; position: absolute; top: .55rem; right: 2.6rem; width: 1.15rem; height: .3rem; background: var(--green);
  transform: rotate(-52deg); border-radius: 1px; }
@media (hover: hover) and (pointer: fine) {
  .pm-tile:hover { border-color: var(--slate); }
  .pm-tile:not([aria-expanded="true"]):hover { background: #fff; }
}
@media (prefers-reduced-motion: no-preference) {
  .pm-tile[aria-expanded="true"] .ico path { animation: pm-draw 700ms var(--ease-io) both; }
  @media (hover: hover) and (pointer: fine) { .pm-tile:hover .ico path { animation: pm-draw 700ms var(--ease-io) both; } }
}
.pm-panel { padding: 1.4rem 1.15rem 1.6rem; background: var(--sheet); border: 1px solid var(--line-strong); border-radius: var(--r);
  --pm-bg: var(--sheet); --sw: 2.2; }
.js .pm-panel:not(.is-open) { display: none; }
.js .pm-panel { border-top: 0; border-radius: 0 0 var(--r) var(--r); margin-top: -.5rem; }
.pm-panel h3 { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2.1rem); letter-spacing: -.03em; margin-bottom: .5em; }
.pm-panel p { color: var(--slate); }
.pm-panel .pm-ill { max-width: 30rem; margin: .25rem 0 1.25rem; color: var(--slate); }
.pm-note { padding: .9rem 1rem .9rem 1.1rem; margin: 1.25rem 0 1.4rem; border: 1px dashed var(--line-strong); border-radius: var(--r);
  font-size: .9688rem; line-height: 1.55; }
.pm-note strong { display: block; margin-bottom: .2rem; }
.pm-prep { list-style: none; margin: 1rem 0 1.4rem; padding: 0; border-top: 1px solid var(--line); }
.pm-prep li { position: relative; padding: .7rem 0 .7rem 2rem; border-bottom: 1px solid var(--line); font-size: 1rem; line-height: 1.5; }
.pm-prep li::before { content: ""; position: absolute; left: .2rem; top: 1.05rem; width: .9rem; height: .45rem;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.pm-prep-h { margin: 1.25rem 0 0; font: var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--granite-ink); }
.pm-panel .cta-row { margin: 1.25rem 0 1rem; }
.pm-panel .link-arrow { margin-top: .25rem; }
@media (prefers-reduced-motion: no-preference) {   /* only when the visitor opens an answer: it settles in, its drawing draws */
  .pm-panel.is-drawing > * { animation: pm-rise 460ms var(--ease) both; }
  .pm-panel.is-drawing > :nth-child(2) { animation-delay: 40ms; }
  .pm-panel.is-drawing > :nth-child(3) { animation-delay: 80ms; }
  .pm-panel.is-drawing > :nth-child(n+4) { animation-delay: 120ms; }
  .pm-panel.is-drawing .pm-ill path:not(.h):not(.lbl-l) { stroke-dasharray: 1; animation: pm-draw 900ms var(--ease-io) 120ms both; }
  .pm-panel.is-drawing .pm-ill .h, .pm-panel.is-drawing .pm-ill .lbl, .pm-panel.is-drawing .pm-ill .lbl-l { animation: pm-fade 500ms var(--ease) 700ms both; }
}
/* wide screens (only with JS: without it every answer stays open as a list): tiles left, the open answer right */
@media (min-width: 56em) {
  .js .pm-pick { grid-template-columns: minmax(0, .95fr) minmax(0, 1.45fr); column-gap: 1.25rem; align-items: start; }
  .js .pm-pick[data-n="4"] { grid-template-rows: repeat(4, auto) 1fr; }
  .js .pm-pick[data-n="6"] { grid-template-rows: repeat(6, auto) 1fr; }
  .js .pm-pick[data-n="7"] { grid-template-rows: repeat(7, auto) 1fr; }
  .js .pm-tile { grid-column: 1; min-height: 4.4rem; }
  .js .pm-panel { grid-column: 2; grid-row: 1 / -1; margin: 0; border-top: 1px solid var(--line-strong); border-radius: var(--r);
    padding: clamp(1.75rem, 1rem + 2vw, 2.75rem); position: relative; }
  .js .pm-panel::before { /* drawing-sheet corner marks */
    content: ""; position: absolute; inset: .6rem; pointer-events: none; opacity: .5;
    background:
      linear-gradient(var(--slate), var(--slate)) 0 0 / .9rem 1.5px no-repeat, linear-gradient(var(--slate), var(--slate)) 0 0 / 1.5px .9rem no-repeat,
      linear-gradient(var(--slate), var(--slate)) 100% 100% / .9rem 1.5px no-repeat, linear-gradient(var(--slate), var(--slate)) 100% 100% / 1.5px .9rem no-repeat; }
}

/* ---------- 3 · así lo hacemos: one line that draws with the scroll; each step switches on when it arrives ---------- */
.pm-steps-in { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
.pm-steps-in .section-head { margin-bottom: 0; }
.pm-steps { position: relative; --pm-bg: var(--paper-2); }
.pm-steps-ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.pm-steps-line { position: absolute; left: calc(1.5rem - .75px); top: 1.5rem; bottom: 1.5rem; width: 1.5px; background: var(--slate);
  transform-origin: 50% 0; }
.pm-steps-dot { position: absolute; left: calc(1.5rem - .4rem); top: calc(1.5rem - .4rem); width: .8rem; height: .8rem; border-radius: 50%;
  background: var(--slate); box-shadow: 0 0 0 .3rem var(--pm-bg); display: none; }
.pm-steps.is-live .pm-steps-dot { display: block; }
.pm-step { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1.1rem; align-items: start; }
.pm-node { position: relative; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  border: 1.5px solid var(--slate); background: var(--slate); color: var(--paper); font-weight: 700; font-size: 1rem;
  font-variant-numeric: tabular-nums; transition: background-color 300ms var(--ease), color 300ms var(--ease); }
.pm-step p { margin: 0; padding-top: .55rem; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.5; color: var(--slate); max-width: 34rem; }
.pm-step p strong { font-weight: 700; }
.pm-step a { font-weight: 700; }
.pm-steps.is-live .pm-step:not(.is-on) .pm-node { background: var(--pm-bg); color: var(--granite-ink); border-style: dashed; }
@media (min-width: 56em) {
  .pm-steps-in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(2rem, 5vw, 6rem); }
  .pm-steps-in .section-head { position: sticky; top: calc(var(--header-h) + 2.5rem); }
  .pm-steps-ol { gap: 2.25rem; }
  .pm-steps-line { left: calc(1.75rem - .75px); top: 1.75rem; bottom: 1.75rem; }
  .pm-steps-dot { left: calc(1.75rem - .4rem); top: calc(1.75rem - .4rem); }
  .pm-step { grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1.5rem; }
  .pm-node { width: 3.5rem; height: 3.5rem; font-size: 1.0625rem; }
  .pm-step p { padding-top: .75rem; }
}

/* ---------- 4 · lo que traemos / lo que debes saber: drawn icons ---------- */
.pm-know { display: grid; gap: 2.5rem; }
.pm-know h3 { margin: 0 0 1rem; font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); }
.pm-know ul { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--slate); }
.pm-know li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1.1rem; align-items: start; padding: 1.15rem 0;
  border-bottom: 1px solid var(--line-strong); }
.pm-know .ico { width: 2.75rem; height: 2.75rem; stroke-width: 1.8; }
.pm-know li p { margin: 0; padding-top: .3rem; color: var(--slate); }
.pm-know li p strong { display: block; }
@media (min-width: 48em) { .pm-know { grid-template-columns: 1fr 1fr; gap: 2.5rem clamp(2rem, 5vw, 5rem); } }
/* side by side the two columns share their rows: heading beside heading, each point beside its counterpart, every
   rule at one height (subgrid; room for up to 6 points per column; without subgrid the columns simply stack their rows) */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 48em) {
    .pm-know { grid-template-rows: auto repeat(6, auto); row-gap: 0; }
    .pm-know > div { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; }
    .pm-know > div > h3 { align-self: end; }
    .pm-know > div > ul { grid-row: 2 / -1; display: grid; grid-template-rows: subgrid; }
  }
}

/* ---------- 5 · antes de que lleguemos: a checklist you can tick (montar armario) ---------- */
.pm-check-in { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
.pm-list { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--slate); }
.pm-list li { border-bottom: 1px solid var(--line-strong); }
.pm-list label { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; align-items: start;
  padding: 1.1rem .25rem; cursor: pointer; }
.pm-cb { position: absolute; left: .25rem; top: 1.1rem; width: 2.25rem; height: 2.25rem; margin: 0; opacity: 0; cursor: pointer; }
.pm-box { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1.5px solid var(--slate); border-radius: var(--r);
  background: #fff; color: var(--paper); transition: background-color 200ms var(--ease); }
.pm-box svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pm-box path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 380ms var(--ease) 60ms; }
.pm-cb:checked + .pm-box { background: var(--slate); }
.pm-cb:checked + .pm-box path { stroke-dashoffset: 0; }
.pm-cb:focus-visible + .pm-box { outline: 3px solid var(--slate); outline-offset: 3px; }
.pm-txt { padding-top: .2rem; color: var(--slate); }
.pm-txt strong { display: block; font-size: 1.0938rem; }
.pm-txt span { display: block; margin-top: .2rem; color: var(--muted); font-size: .9688rem; }
.pm-cb:checked ~ .pm-txt strong { color: var(--granite-ink); }
.pm-meter { position: relative; height: 3px; margin: 1.5rem 0 .75rem; background: var(--line-strong); overflow: hidden; }
.pm-meter i { position: absolute; inset: 0; background: var(--slate); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 500ms var(--ease), background-color 300ms var(--ease); }
.pm-check.is-done .pm-meter i { background: var(--green); }   /* everything ready: THE green of this screen */
.pm-count { margin: 0 0 1.25rem; font-weight: 700; color: var(--slate); }
html:not(.js) .pm-meter, html:not(.js) .pm-count { display: none; }
.pm-check .cta-row { margin-top: .5rem; }
.pm-rot { margin: 0; color: var(--slate); --pm-bg: var(--paper); --sw: 2.4; }
.pm-rot figcaption { margin-top: 1rem; font-size: .9375rem; color: var(--muted); max-width: 30rem; }
.pm-rot .mv-raise { transform-origin: 300px 360px; }
@media (min-width: 56em) { .pm-check-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pm-rot { --sw: 2; position: sticky; top: calc(var(--header-h) + 2rem); } }

/* ---------- 6 · call block (dark band) ---------- */
.pm-cta .band-in { align-items: center; }
.pm-cta .ico { width: 4.25rem; height: 4.25rem; stroke-width: 1.5; margin-bottom: 1.25rem; color: var(--paper); }
.pm-cta .ico .ac { stroke: var(--green); }
.pm-call { display: inline-grid; gap: .3rem; color: var(--paper); text-decoration: none; }
.pm-call-l { font-size: clamp(1.125rem, 1.05rem + .4vw, 1.375rem); font-weight: 600; color: rgb(242 240 236 / .88); }
.pm-call-n { font-size: clamp(2rem, 1.15rem + 3.8vw, 3.75rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.05;
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; justify-self: start;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; padding-bottom: .12em; transition: background-size 420ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .pm-call:hover .pm-call-n { background-size: 100% 2px; } }
/* phones: the number may wrap instead of being clipped (WCAG 1.4.12 text spacing), like .big-phone in styles.css */
@media (max-width: 47.99em) { .pm-call, .pm-call-n { max-width: 100%; white-space: normal; overflow-wrap: break-word; } }
.pm-cta-btns { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; max-width: none; }
.pm-cta-btns .btn { flex: 1 1 12rem; }
@media (min-width: 30em) { .pm-cta-btns .btn { flex: 0 0 auto; min-width: 12rem; } }
.pm-cta .note { margin-top: 1.25rem; }

/* ---------- 7 · FAQ and related pages ---------- */
.pm-faq { display: grid; gap: 2rem; }
@media (min-width: 56em) {
  .pm-faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 4vw, 5rem); align-items: start; }
  .pm-faq h2 { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.pm-rel { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 40em) { .pm-rel { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
/* /manitas has six related links: two even rows of three on wide screens (auto-fit gave 4 + 2); the long-tail pages
   (3 or 4 links) keep auto-fit */
@media (min-width: 64em) { [data-page="manitas-a-coruna"] .pm-rel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pm-rel a { display: flex; align-items: center; gap: 1rem; min-height: 5.25rem; padding: 1rem 1.1rem; background: var(--sheet);
  border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--slate); text-decoration: none; font-weight: 700;
  font-size: 1.125rem; letter-spacing: -.01em; line-height: 1.25;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease), transform 160ms var(--ease); }
.pm-rel .ico { width: 2.6rem; height: 2.6rem; stroke-width: 1.8; }
.pm-rel .ico path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.pm-rel .i-arrow { margin-left: auto; transition: transform 260ms var(--ease); }
.pm-rel a:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .pm-rel a:hover { border-color: var(--slate); background: #fff; }
  .pm-rel a:hover .i-arrow { transform: translateX(5px); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pm-rel a:hover .ico path { animation: pm-draw 700ms var(--ease-io) both; }
}

/* ---------- 8 · below the fold: drawings draw once when they come into view (p-manitas.js arms them; in view at
   load = already finished, so nothing ever disappears in front of the visitor) ---------- */
/* select by element + class, never [pathLength], in rules that switch on a class, an attribute or :hover: Chrome's style
   invalidation compares the lowercased selector with SVG's camelCase pathLength and leaves the drawing unstyled */
@media (prefers-reduced-motion: no-preference) {
  .pm-armed:not(.pm-in) .ico path, .pm-armed:not(.pm-in) .pm-ill path:not(.h):not(.lbl-l) { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .pm-armed:not(.pm-in) .pm-ill .h, .pm-armed:not(.pm-in) .pm-ill .lbl, .pm-armed:not(.pm-in) .pm-ill .lbl-l,
  .pm-armed:not(.pm-in) .pm-ill .late { opacity: 0; }
  .pm-armed.pm-in .ico path, .pm-armed.pm-in .pm-ill path:not(.h):not(.lbl-l) { stroke-dasharray: 1; animation: pm-draw 900ms var(--ease-io) both; }
  .pm-armed.pm-in .pm-ill .h, .pm-armed.pm-in .pm-ill .lbl, .pm-armed.pm-in .pm-ill .lbl-l { animation: pm-fade 600ms var(--ease) 900ms both; }
  .pm-armed.pm-in li:nth-child(2) .ico path { animation-delay: 120ms; }
  .pm-armed.pm-in li:nth-child(3) .ico path { animation-delay: 240ms; }
  .pm-armed.pm-in li:nth-child(4) .ico path { animation-delay: 360ms; }
  .pm-armed.pm-in li:nth-child(5) .ico path { animation-delay: 480ms; }
  /* montar armario: assembled lying down, then raised; its top corner draws the arc that has to clear the ceiling */
  .pm-armed:not(.pm-in) .mv-raise { transform: rotate(-90deg); }
  .pm-armed.pm-in .mv-raise { animation: pm-raise 1.6s var(--ease-io) .9s both; }
  .pm-armed.pm-in .pm-ill .arc { animation: pm-draw 1.6s var(--ease-io) .9s both; }
  .pm-armed.pm-in .pm-ill .late { animation: pm-fade 600ms var(--ease) 2.5s both; }
}