/* ARRANXO · the trade pages: fontanero, pintor, albañil, limpieza y limpieza de comunidades (2026-10-21).
   On top of styles.css ("Planos del Atlántico"); loaded only by these five pages (link at the top of their content).
   Behaviour: assets/js/p-oficios.js on GSAP + ScrollTrigger (assets/js/vendor). Same rules as every page group:
   · everything is readable at once: without JS, with reduced motion and before any animation runs. The drawings show
     their FINISHED state by default; start states exist only behind .is-live (set by the script when motion is allowed)
     or are set at run time by GSAP, so a missing script never hides anything
   · motion = transform, opacity and stroke-dashoffset only (nothing moves the layout: CLS 0)
   · one green element per screen: the moving part of the page's drawing (the water, the roller, the newest brick, the
     sweeping path, the cleaning round) and, on the first screen, the accent of the hero drawing (.po-ac). Open answers,
     tiles and their small drawings are slate, never green
   · no style="" and no <style> (CSP style-src 'self'); text contrast as in styles.css (granite only on slate)
   · SVG states: classes go on the element that changes and rules select it by element + class (Chrome does not
     re-match "ancestor.class [pathLength]" rules when only the ancestor's class changes, playbook P65)
   Prefix po- = página de oficio. Pieces: .po-hero + .po-art (hero drawing .po-plano) · .po-flow (the scroll-linked drawing +
   its numbered legend) · .po-pick (jobs explorer; .po-mini = an answer's own drawing) · .po-aud (casa / comunidad /
   alquiler) · .po-rel (related links) · .po-cta (the closing call + form, on slate) ·
   .po-ronda (limpieza de comunidades: the cleaning round over the building of /comunidades, .bld + .xp of p-campana.css) */

@keyframes po-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes po-fade { from { opacity: 0; } }
@keyframes po-rise { from { opacity: 0; transform: translateY(.6rem); } }

/* ---------- hero: the trade's own drawing replaces the quiet trazado of .page-hero ---------- */
.po-hero::before { display: none; }
.po-hero-in { display: grid; grid-template-columns: minmax(0, 1fr); }
.po-hero-copy { position: relative; z-index: 1; min-width: 0; }
/* phones: top right under the crumbs, the heading overlaps only its faint construction lines (as on the home) */
.po-art { position: relative; z-index: 0; justify-self: end; width: min(56vw, 14rem); margin: -1rem -1.75rem -3rem 0;
  color: var(--paper); pointer-events: none; }
.po-art svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (min-width: 48em) {
  .po-hero-copy { max-width: 60%; }
  .po-art { position: absolute; z-index: 0; right: -3rem; top: 50%; width: min(44%, 24rem); margin: 0; translate: 0 -42%; }
}
@media (min-width: 64em) {
  .po-hero { display: grid; align-items: center; min-height: min(46rem, calc(100svh - var(--header-h))); }
  .po-hero-in { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
  .po-hero-in > nav { grid-column: 1 / -1; }
  .po-hero-copy { grid-column: 1; grid-row: 2; max-width: none; }
  .po-art { position: relative; right: auto; top: auto; translate: none; grid-column: 2; grid-row: 2; width: 100%; max-width: 31rem;
    margin: -1.5rem -1rem 0 0; justify-self: end; }
  .po-hero .hero-proof { max-width: 40rem; }
}
/* the 600 px hero drawing: the construction layer, then the trade's object in section or cutaway (.po-ob: lines .ob,
   hatches and fine parts .ob-fine), its dimensions (.po-dims, 45° ticks), 2–3 notes (.po-note) and ONE green accent
   (.po-ac: the drop, the fresh paint, the plumb line, the sweep, the round). Line widths follow the drawing's size, so
   the object lines are about 1.5 px on every screen (phones ~14rem wide = × .36, tablets ~20rem, desktop ~30rem) */
.po-plano .po-cons { fill: none; stroke: currentColor; stroke-width: 1.2; }
.po-plano .cl { stroke-opacity: .22; }
.po-plano .c1 { stroke-opacity: .38; }
.po-plano .c2 { stroke-opacity: .28; }
.po-plano .ax, .po-plano .ay { stroke-opacity: .2; }
.po-plano .tick { stroke-opacity: .55; }
.po-plano .dim { stroke-opacity: .45; }
.po-plano-label { fill: currentColor; fill-opacity: .6; stroke: none; font: 600 13px var(--font); letter-spacing: .14em; }
.po-plano .po-ob, .po-plano .po-dims { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.po-plano .ob { stroke-width: 4; }
.po-plano .ob-fine { stroke-width: 2.6; stroke-opacity: .55; }
.po-plano .ob-soft { stroke-width: 3; stroke-opacity: .75; }
.po-plano .ob-brick { stroke-width: 3.4; }
.po-plano .ob-dots { stroke-width: 4.5; stroke-opacity: .55; }
.po-plano .ob-swing { stroke-width: 2.4; stroke-opacity: .7; stroke-dasharray: 10 10; }   /* dashed: no pathLength */
.po-plano .ob-cl { stroke-width: 2; stroke-opacity: .5; stroke-dasharray: 28 10 6 10; }  /* centre line of the pipe */
.po-plano .dl { stroke-width: 1.8; stroke-opacity: .6; }
.po-plano .po-ac { fill: none; stroke: var(--green); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.po-plano .po-sweep, .po-plano .po-route { stroke-width: 5; }
.po-plano .po-drop { fill: var(--green); stroke: none; }
.po-plano .po-plumb { fill: var(--green); }
.po-art .po-plano-pint { overflow: hidden; }   /* the roller starts low: it never shows outside the drawing */
@media (min-width: 48em) {
  .po-plano .ob { stroke-width: 2.8; } .po-plano .ob-fine { stroke-width: 1.8; } .po-plano .ob-soft { stroke-width: 2.1; }
  .po-plano .ob-brick { stroke-width: 2.4; } .po-plano .ob-dots { stroke-width: 3.2; } .po-plano .ob-swing { stroke-width: 1.7; }
  .po-plano .ob-cl { stroke-width: 1.4; } .po-plano .dl { stroke-width: 1.4; }
  .po-plano .po-ac { stroke-width: 4.4; } .po-plano .po-sweep, .po-plano .po-route { stroke-width: 3.6; }
}
@media (min-width: 64em) {
  .po-plano .ob { stroke-width: 2; } .po-plano .ob-fine { stroke-width: 1.25; } .po-plano .ob-soft { stroke-width: 1.5; }
  .po-plano .ob-brick { stroke-width: 1.75; } .po-plano .ob-dots { stroke-width: 2.4; } .po-plano .ob-swing { stroke-width: 1.25; }
  .po-plano .ob-cl { stroke-width: 1; } .po-plano .dl { stroke-width: 1.1; }
  .po-plano .po-ac { stroke-width: 3.4; } .po-plano .po-sweep, .po-plano .po-route { stroke-width: 2.8; }
}
.po-note .leader { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-opacity: .75; }
.po-note .leader-dot { fill: currentColor; stroke: none; }
.po-note .lbl { fill: currentColor; fill-opacity: .82; font: 600 15px var(--font); letter-spacing: .12em; }
/* the notes and dimensions need the desktop size to be read: phones and tablets show the drawing and its green alone */
@media (max-width: 63.99em) { .po-plano .po-note, .po-plano .po-dims, .po-plano .dim, .po-plano-label { display: none; } }
/* the drawing draws itself once on load, in about one second: construction lines, the object, its dimensions, the green
   accent, the notes. The roller of /pintor climbs with its paint (same timing); the drop of /fontanero falls */
@media (prefers-reduced-motion: no-preference) {
  .js .po-plano .cl { stroke-dasharray: 1 2; animation: po-draw 900ms var(--ease-io) both; }
  .js .po-plano .c2 { animation-delay: 60ms; } .js .po-plano .c3 { animation-delay: 120ms; } .js .po-plano .c4 { animation-delay: 180ms; }
  .js .po-plano .ay { animation-delay: 90ms; }
  .js .po-plano .tick, .js .po-plano .dim, .js .po-plano-label { animation: po-fade 500ms var(--ease) 450ms both; }
  .js .po-plano .po-ob path[pathLength] { stroke-dasharray: 1 2; animation: po-draw 800ms var(--ease-io) 100ms both; }
  .js .po-plano .po-ob path:nth-child(3n+2) { animation-delay: 180ms; }
  .js .po-plano .po-ob path:nth-child(3n) { animation-delay: 260ms; }
  .js .po-plano .po-ob path:not([pathLength]) { animation: po-fade 500ms var(--ease) 500ms both; }
  .js .po-plano .po-dims { animation: po-fade 500ms var(--ease) 650ms both; }
  .js .po-plano .po-ac { stroke-dasharray: 1 2; animation: po-draw 600ms var(--ease-io) 600ms both; }
  .js .po-plano .po-paint { animation-duration: 650ms; animation-delay: 500ms; }
  .js .po-plano .po-roller { animation: po-roll 650ms var(--ease-io) 500ms both; }
  .js .po-plano .po-plumb { animation: po-draw 600ms var(--ease-io) 600ms both, po-fill 300ms var(--ease) 1100ms both; }
  .js .po-plano .po-drop { animation: po-drop 520ms var(--ease) 700ms both; }
  .js .po-plano .po-note { animation: po-fade 500ms var(--ease) 750ms both; }
}
@keyframes po-roll { from { transform: translateY(206px); } }   /* = the height of the paint line (450 → 244) */
@keyframes po-fill { from { fill-opacity: 0; } }
@keyframes po-drop { from { opacity: 0; transform: translateY(-18px); } }

/* ---------- the scroll-linked drawing: drawing + numbered legend (the order is the content: the site's one numbering
   system, drawn nodes on a line). Default = finished; .is-live (p-oficios.js) = the visitor's scroll draws it ---------- */
.po-sec { position: relative; }
.po-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem); align-items: center; }
.po-fig { position: relative; margin: 0; color: var(--slate); min-width: 0; }
.po-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (max-width: 29.99em) { .po-fig { margin-inline: calc(-.5 * var(--gutter)); } }   /* phones: a little more drawing */
@media (min-width: 56em) {
  .po-flow { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(2.5rem, 5vw, 5.5rem); }
  .po-fig { justify-self: center; width: 100%; max-width: 42rem; }
}

/* drawing layers (inline SVG: fill none, stroke currentColor) */
.po-d { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.po-d .st { stroke-width: 1.6; }                       /* structure: walls, floor, slabs */
.po-d .fx { stroke-width: 1.25; }                      /* fixtures, furniture, tools */
.po-d .fn { stroke-width: 1; stroke-opacity: .45; }    /* fine lines: hatches, guides, glass */
.po-d .gd { stroke-width: 1; stroke-opacity: .55; stroke-dasharray: 4 5; }   /* guide lines (level, plumb) */
.po-d .earth { stroke-width: .9; stroke-opacity: .45; }
.po-d text { fill: currentColor; stroke: none; font-family: var(--font); font-weight: 600; }
.po-d .lbl { font-size: 9.5px; letter-spacing: 1.2px; fill-opacity: .9; }
.po-d .leader { stroke-width: 1; stroke-opacity: .7; }
.po-d .leader-dot { fill: currentColor; stroke: none; }
/* parts that are gone once the job is done (tape, plastic, holes): hidden in the finished state, GSAP shows them while live */
.po-d .gone { opacity: 0; }
/* THE green element of the drawing */
.po-d .run { stroke: var(--green); stroke-width: 3.4; }
.po-d .run-thin { stroke: var(--green); stroke-width: 2.2; stroke-dasharray: 2 6; }
.po-d .ink { stroke-width: 3; }                         /* the slate counterpart (used water, laid mortar …) */
/* the numbered station marks in the drawing = the numbers of the legend */
.po-d .mk circle { fill: var(--paper); stroke: currentColor; stroke-width: 1.4; transition: fill 260ms var(--ease); }
.po-d .mk text { font-size: 15px; font-weight: 700; text-anchor: middle; dominant-baseline: central; transition: fill 260ms var(--ease); }
.sheet .po-d .mk circle { fill: var(--paper); }
.section-alt .po-d .mk circle { fill: var(--paper-2); }
.po-d circle.mk-c.is-on { fill: var(--slate); }
.po-d text.mk-t.is-on { fill: var(--paper); }
.po-d circle.mk-c.is-wait:not(.is-on) { stroke-dasharray: 3 3; }
/* mouse on a legend item: its number in the drawing steps forward */
.po-d g.mk { transform-box: fill-box; transform-origin: center; transition: transform 260ms var(--ease); }
.po-d g.mk.is-hl { transform: scale(1.3); }
.po-legend > li { transition: color 200ms var(--ease); }
/* desktop: technical labels next to the parts (phones read the numbers and the legend under the drawing) */
@media (max-width: 55.99em) { .po-d .po-lbls { display: none; } }

/* ticks (a room or zone is done): shown in the finished state; while the drawing is live they wait for their moment */
.po-flow path.ck { transition: opacity 300ms var(--ease); }
.po-flow path.ck.is-wait:not(.is-on) { opacity: 0; }

/* the legend: numbered nodes on one line; the node fills when the drawing reaches it */
.po-legend { list-style: none; counter-reset: po; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.po-legend > li { position: relative; counter-increment: po; padding-left: 3.6rem; min-height: 2.6rem; }
.po-legend > li::before { content: counter(po); position: absolute; left: 0; top: -.15rem; z-index: 1; display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border: 1.5px solid var(--slate); border-radius: 50%; background: var(--paper); color: var(--slate);
  font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background-color 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease); }
.section-alt .po-legend > li::before { background: var(--paper-2); }
.po-legend > li:not(:last-child)::after { content: ""; position: absolute; left: calc(1.3rem - .75px); top: 2.45rem; bottom: -1.55rem;
  width: 1.5px; background: var(--slate); opacity: .35; }
.po-legend h3 { margin: .2rem 0 .3rem; font-size: clamp(1.15rem, 1.08rem + .35vw, 1.3rem); }
.po-legend p { margin: 0; color: var(--muted); }
.po-legend > li.is-wait:not(.is-on)::before { border-style: dashed; color: var(--granite-ink); }
.po-flow .po-legend > li.is-on::before { background: var(--slate); color: var(--paper); }

/* ---------- 1 · fontanería: the water runs from the llave de paso to every tap, the used water down to the bajante ---------- */
.po-agua .fix-glass { stroke-width: 1; stroke-opacity: .5; }
.po-agua .pipe-d { stroke-width: 7; stroke-opacity: .13; }
.po-agua path.valve { fill: var(--paper); }

/* ---------- 2 · pintura: protect, prepare, the roller paints the wall, clean up ---------- */
.po-pint path.paint { fill: var(--slate); fill-opacity: .085; stroke: none; }
.po-pint .tape { stroke-width: 2.4; stroke-opacity: .5; stroke-dasharray: 7 3; }
.po-pint .sheetline { stroke-width: 1.2; stroke-opacity: .55; }
.po-pint .hole { stroke-width: 1.4; }
.po-pint .patch { fill: var(--slate); fill-opacity: .14; stroke-width: 1.1; }
.po-pint .roller-sleeve { fill: var(--green); stroke: none; }
.po-pint .roller-frame { stroke-width: 2.2; }
.po-pint .roller-grip { fill: var(--slate); stroke: none; }

/* ---------- 3 · albañilería: the wall rises course by course; the newest brick is the green one ---------- */
.po-obra .brick { fill: var(--sheet); stroke-width: 1.2; transition: stroke 200ms var(--ease), fill 200ms var(--ease); }
.section-alt .po-obra .brick { fill: var(--paper-2); }
.po-obra path.brick.is-cur { stroke: var(--green); stroke-width: 2.2; }
.po-obra .plaster { fill: var(--sheet); stroke-width: 1.2; }
.po-obra .bob { fill: var(--slate); stroke: none; }

/* ---------- 4 · limpieza: the sweeping path runs through the flat and ends at the door; the dust goes ---------- */
.po-limp .wall { stroke-width: 5; stroke-linecap: square; }
.po-limp .iwall { stroke-width: 3; stroke-linecap: square; }
.po-limp .win { stroke-width: 1; }
.po-limp .swing { stroke-width: 1; stroke-opacity: .55; stroke-dasharray: 3 4; }
.po-limp circle.dust { fill: currentColor; stroke: none; opacity: 0; transition: opacity 500ms var(--ease); }   /* finished = clean */
.po-limp circle.dust.is-wait:not(.is-on) { opacity: .6; }
.po-limp .room-lbl { font-size: 9px; letter-spacing: 1.1px; fill-opacity: .72; text-anchor: middle; }
.po-limp .ck { stroke-width: 2; }

/* ---------- the explorer of jobs: tiles = disclosure buttons; side by side (≥ 56em) one answer is always open and a wire
   runs from the open tile to it; phones: accordion. Without JS every answer is shown under its tile ---------- */
.po-pick { display: grid; gap: .5rem; }
.po-pick-tile {
  position: relative; display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 4.5rem; padding: .8rem 3.25rem .8rem 1rem;
  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);
}
.po-pick-tile::before { /* a small drawn node: hollow, filled when this answer is the one shown */
  content: ""; flex: none; width: .7rem; height: .7rem; border: 1.5px solid currentColor; border-radius: 50%;
  transition: background-color 220ms var(--ease); }
.po-pick-tile[aria-expanded="true"]::before { background: currentColor; }
.po-pick-label { display: grid; gap: .2rem; min-width: 0; }
.po-pick-s { font-size: .9375rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.po-pick-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); }
.po-pick-tile[aria-expanded="true"]::after { transform: rotate(180deg); background-size: 100% 2px, 2px 0; }
.po-pick-tile:active { transform: scale(.985); }
.po-pick-tile[aria-expanded="true"] { background: var(--slate); color: var(--paper); border-color: var(--slate); --focus: var(--slate); }
.po-pick-tile[aria-expanded="true"] .po-pick-s { color: rgb(242 240 236 / .82); }
@media (hover: hover) and (pointer: fine) {
  .po-pick-tile:hover { border-color: var(--slate); }
  .po-pick-tile:not([aria-expanded="true"]):hover { background: #fff; }
}
.po-pick-panel { padding: 1.4rem 1.1rem 1.6rem; background: var(--sheet); border: 1px solid var(--line-strong); border-radius: var(--r); }
.js .po-pick-panel:not(.is-open) { display: none; }
.js .po-pick-panel { border-top: 0; border-radius: 0 0 var(--r) var(--r); margin-top: -.5rem; }
.po-pick-panel h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); letter-spacing: -.03em; margin-bottom: .55em; }
.po-pick-panel p { color: var(--slate); }
.po-pick-body > :last-child { margin-bottom: 0; }
/* the answer's own drawing (the job's 48-grid icon × 3.4 on the construction circles, as on /electricista-a-coruna):
   beside the text from 56em; phones read the text alone */
.po-pick-art { display: none; }
.po-mini { display: block; width: 100%; height: auto; overflow: visible; color: var(--slate); }
.po-mini .po-mc { fill: none; stroke: currentColor; stroke-width: 1; stroke-opacity: .25; }
.po-mini .po-mini-ico { fill: none; stroke: currentColor; stroke-width: .72; stroke-linecap: round; stroke-linejoin: round; }   /* × 3.4 */
.po-tip { position: relative; padding: .9rem 1rem .9rem 1.1rem; margin: 1.25rem 0; border: 1px dashed var(--line-strong);
  border-radius: var(--r); font-size: 1rem; line-height: 1.55; color: var(--slate); }
.po-tip strong { display: block; margin-bottom: .2rem; }
.po-more { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }
@media (prefers-reduced-motion: no-preference) {
  .js .po-pick-panel.is-open .po-pick-body > * { animation: po-rise 300ms var(--ease) both; }   /* an answer: UI speed, readable at once */
  .js .po-pick-panel.is-open .po-pick-body > :nth-child(2) { animation-delay: 40ms; }
  .js .po-pick-panel.is-open .po-pick-body > :nth-child(3) { animation-delay: 80ms; }
  .js .po-pick-panel.is-open .po-pick-body > :nth-child(n+4) { animation-delay: 120ms; }
  /* its drawing draws itself when the answer opens (element selectors, not [pathLength]: playbook P65 above) */
  .js .po-pick-panel.is-open .po-mini path, .js .po-pick-panel.is-open .po-mini circle { stroke-dasharray: 1 2; animation: po-draw 800ms var(--ease-io) both; }
  .js .po-pick-panel.is-open .po-mini .po-mini-ico path { animation-duration: 700ms; animation-delay: 200ms; }
}
@media (min-width: 56em) {
  .js .po-pick { grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); grid-template-rows: repeat(6, auto) 1fr; column-gap: 2.75rem;
    row-gap: .6rem; align-items: start; }
  .js .po-pick-tile { grid-column: 1; min-height: 5rem; padding: .95rem 1.25rem; }
  .js .po-pick-tile:nth-of-type(1) { grid-row: 1; } .js .po-pick-tile:nth-of-type(2) { grid-row: 2; }
  .js .po-pick-tile:nth-of-type(3) { grid-row: 3; } .js .po-pick-tile:nth-of-type(4) { grid-row: 4; }
  .js .po-pick-tile:nth-of-type(5) { grid-row: 5; } .js .po-pick-tile:nth-of-type(6) { grid-row: 6; }
  .js .po-pick-tile::after { right: auto; left: 100%; top: 50%; width: 2.75rem; height: 1.5px; margin: -.75px 0 0; background: var(--slate);
    transform: scaleX(0); transform-origin: 0 50%; transition: transform 420ms var(--ease); }
  .js .po-pick-tile[aria-expanded="true"]::after { transform: scaleX(1); background-size: auto; }
  .js .po-pick-panel { grid-column: 2; grid-row: 1 / -1; align-self: stretch; margin: 0; border-top: 1px solid var(--line-strong);
    border-radius: var(--r); padding: clamp(1.75rem, 1rem + 2vw, 2.75rem); position: relative; }
  .js .po-pick-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; }
  /* the first answer already shows until the script opens it (no reflow at load) */
  .js .po-pick:not(:has(.po-pick-panel.is-open)) > .po-pick-panel:first-of-type { display: block; }
  /* the answer sits in the middle of the tall sheet (six tiles beside it), its drawing on the right: no empty box */
  .js .po-pick-panel.is-open, .js .po-pick:not(:has(.po-pick-panel.is-open)) > .po-pick-panel:first-of-type { display: grid; align-content: center; }
}
@media (min-width: 56em) {
  .po-pick-in { display: grid; grid-template-columns: minmax(0, 1fr) clamp(9rem, 2.5rem + 10vw, 14rem); gap: clamp(1.5rem, 3vw, 2.75rem); align-items: center; }
  .po-pick-art { display: block; grid-column: 2; grid-row: 1; }
  .po-pick-body { grid-column: 1; grid-row: 1; }
}
@media (min-width: 75em) { .js .po-pick-tile { min-height: 5.25rem; } }

/* ---------- casa / comunidad / alquiler (the .aud-item blocks of the home) ---------- */
.po-aud { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
.po-aud .aud-item .ico [pathLength] { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
@media (min-width: 56em) { .po-aud { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 3.5vw, 3.5rem); } }

/* ---------- related links: drawn icon, label, arrow (the icon draws itself again on hover) ---------- */
.po-rel { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1.5px solid var(--slate); }
.po-rel a { display: flex; align-items: center; gap: 1rem; min-height: 4.25rem; padding: .8rem .25rem; border-bottom: 1px solid var(--line-strong);
  font-weight: 700; font-size: 1.0625rem; line-height: 1.3; text-decoration: none; transition: padding 300ms var(--ease); }
.po-rel a > span { flex: 1 1 auto; }
.po-rel .ico { width: 2.25rem; height: 2.25rem; stroke-width: 1.9; }
.po-rel .i-arrow { transition: transform 260ms var(--ease); }
.po-rel-after { margin-top: clamp(2.75rem, 2rem + 2.5vw, 4.5rem); }
@media (hover: hover) and (pointer: fine) {
  .po-rel a:hover { padding-left: .75rem; }
  .po-rel a:hover .i-arrow { transform: translateX(5px); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .po-rel a:hover .ico [pathLength] { stroke-dasharray: 1 2; animation: po-draw 700ms var(--ease-io) both; }
}
@media (min-width: 48em) { .po-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }

/* ---------- the closing call + form, on slate (styles.css .cta-final / .split / .form-wrap; .on-dark .form-wrap keeps the
   form a light sheet with slate text, borders and focus ring) ---------- */
.po-cta .lead { max-width: 34rem; }
.po-cta .cta-row { margin: 1.5rem 0 0; }
.po-cta .note { margin: 1.5rem 0 0; max-width: 34rem; }
.po-cta .note .link-arrow { margin-left: .15rem; }
.po-cta.on-dark .note .link-arrow { color: var(--paper); }

/* ---------- limpieza de comunidades: the cleaning round over the building (.bld + .xp from p-campana.css) ---------- */
.po-ronda .bld path.route { stroke: var(--green); stroke-width: 3; }
.po-ronda .bld circle.rn { fill: var(--pin-bg, var(--paper)); stroke: currentColor; stroke-width: 1.4; transition: fill 260ms var(--ease); }
.po-ronda .bld circle.rn.is-on { fill: var(--slate); }
.po-ronda .bld circle.rn.is-wait:not(.is-on) { stroke-dasharray: 2 2.4; }
.po-ronda .bld path.ck { stroke-width: 2; transition: opacity 300ms var(--ease); }
.po-ronda .bld path.ck.is-wait:not(.is-on) { opacity: 0; }
.po-ronda .bld path.spk { stroke-width: 1.2; }
.po-ronda .bld path.bin { fill: var(--pin-bg, var(--paper)); }
.po-ronda .bld .ghost { stroke-opacity: .38; }
.po-ronda .bld path.glass { stroke-width: 1; stroke-opacity: .7; }
.po-freq .card h3 { margin-bottom: .35em; }
/* two weeks as two rows of days: a filled day = a cleaning day */
.po-cal { display: block; width: 9.5rem; height: auto; margin: 0 0 1.4rem; overflow: visible; color: var(--slate); }
.po-cal circle { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-opacity: .4; }
.po-cal circle.on { fill: currentColor; stroke-opacity: 1; }
.po-cal circle.ring { stroke-opacity: .9; stroke-dasharray: 2 2.6; }
.po-freq .card p { color: var(--muted); }

/* ---------- reduced motion: final states only (styles.css stops every animation and transition) ---------- */
@media (prefers-reduced-motion: reduce) {
  .po-art svg, .po-plano .po-cons { transform: none !important; }
}