/* ARRANXO · the electrical pages: electricista, urgencias 24 h, poner un enchufe nuevo, salta el diferencial.
   On top of styles.css ("Planos del Atlántico"); loaded only by these four pages (link at the top of their content).
   Same rules as the home:
   · everything is readable at once: without JS, with reduced motion and before any animation runs. Hidden start states
     exist only behind html.js + prefers-reduced-motion: no-preference (CSS) or are set at run time by GSAP
     (assets/js/p-electricidad.js), 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 accent of the hero drawing, the slash of the open choice, the "24 h" of a call band
   · no style="" and no <style> (CSP style-src 'self'); text contrast as in styles.css (granite only on slate)
   Prefix pe- = página eléctrica. Pieces: .pe-hero + .pe-art (hero drawing) · .pe-plano (600 px drawing) · .pe-clock /
   .pe-dial (live 24 h dial) · .pe-pick (choosers) · .pe-know (icon list) · .pe-safe (safety cards) · .pe-steps (numbered
   steps with cuadro diagrams) · .pe-scale · .pe-ways (cable drawings) · .pe-call (call band) · .pe-rel (related links). */

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

.pe-sec { position: relative; }
.pe-sec-tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }

/* ---------- hero: the page's own drawing replaces the quiet trazado of .page-hero ---------- */
.pe-hero::before { display: none; }
.pe-hero-in { display: grid; grid-template-columns: minmax(0, 1fr); }
.pe-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) */
.pe-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; }
.pe-art svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (min-width: 48em) {
  .pe-hero-copy { max-width: 60%; }
  .pe-art { position: absolute; z-index: 0; right: -3rem; top: 50%; width: min(44%, 24rem); margin: 0; translate: 0 -42%; }
}
@media (min-width: 64em) {
  .pe-hero { display: grid; align-items: center; min-height: min(46rem, calc(100svh - var(--header-h))); }
  .pe-hero-in { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
  .pe-hero-in > nav { grid-column: 1 / -1; }
  .pe-hero-copy { grid-column: 1; grid-row: 2; max-width: none; }
  .pe-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; }
  .pe-hero .hero-proof { max-width: 40rem; }
}

/* ---------- the 600 px drawings (construction layer + object + notes) ---------- */
.pe-plano { color: var(--paper); }
.pe-plano .pe-cons { fill: none; stroke: currentColor; stroke-width: 1.2; }
.pe-plano .cl { stroke-opacity: .22; }
.pe-plano .c1 { stroke-opacity: .38; }
.pe-plano .c2 { stroke-opacity: .28; }
.pe-plano .ax, .pe-plano .ay { stroke-opacity: .2; }
.pe-plano .tick { stroke-opacity: .55; }
.pe-plano .dim { stroke-opacity: .45; }
.pe-plano .rail { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-opacity: .35; }
.pe-plano-label { fill: currentColor; fill-opacity: .6; stroke: none; font: 600 13px var(--font); letter-spacing: .14em; }
.pe-plano .ob { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pe-plano .ob-body { fill: var(--slate); }
.pe-plano .ob-soft { stroke-width: 2; stroke-opacity: .7; }
.pe-plano .ob-ghost { stroke-width: 2; stroke-opacity: .42; }
.pe-plano .pe-rays { stroke-width: 2.5; stroke-opacity: .8; }
.pe-plano .pe-bolt { fill: var(--green); }
.pe-plano .pe-ring { fill: none; stroke: var(--green); stroke-width: 6; }
.pe-plano .pe-lever-body { fill: var(--green); }
.pe-plano .pe-lever { transform: translateY(44px); }           /* final state: the diferencial has tripped */
.pe-plano .pe-trip { fill: none; stroke: currentColor; stroke-width: 2; stroke-opacity: .6; stroke-linecap: round; stroke-linejoin: round; }
.pe-plano .pe-bolt { transform-box: fill-box; transform-origin: 50% 50%; }
.pe-note .leader { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-opacity: .75; }
.pe-note .leader-dot { fill: currentColor; stroke: none; }
.pe-note .lbl { fill: currentColor; fill-opacity: .82; font: 600 15px var(--font); letter-spacing: .12em; }
/* the notes need the desktop size to be read (and the room beside the copy): phones and tablets show the drawing alone */
@media (max-width: 63.99em) { .pe-plano .pe-note, .pe-plano .dim, .pe-plano-label { display: none; } }
@media (min-width: 48em) { .pe-plano .ob { stroke-width: 2.5; } }

/* the drawing draws itself once on load: construction lines, the object, the notes, the green accent last (≈ 2 s) */
@media (prefers-reduced-motion: no-preference) {
  .js .pe-plano .cl { stroke-dasharray: 1; animation: pe-draw 1000ms var(--ease-io) both; }
  .js .pe-plano .c2 { animation-delay: 70ms; } .js .pe-plano .c3 { animation-delay: 140ms; } .js .pe-plano .c4 { animation-delay: 210ms; }
  .js .pe-plano .ay { animation-delay: 100ms; }
  .js .pe-plano .tick, .js .pe-plano .dim, .js .pe-plano-label { animation: pe-fade 600ms var(--ease) 650ms both; }
  .js .pe-plano .ob { stroke-dasharray: 1; animation: pe-draw 1300ms var(--ease-io) 250ms both; }
  .js .pe-plano .ob-soft { animation-delay: 520ms; }
  .js .pe-plano .ob-ghost { animation-delay: 700ms; }
  .js .pe-plano .pe-rays { animation: pe-draw 700ms var(--ease-io) 1500ms both; }
  .js .pe-plano .pe-note { animation: pe-fade 700ms var(--ease) 1250ms both; }
  .js .pe-plano .pe-bolt { animation: pe-bolt 760ms var(--ease) 1150ms both; }
  .js .pe-plano .pe-ring { stroke-dasharray: 1; animation: pe-draw 1000ms var(--ease-io) 1100ms both; }
  .js .pe-plano .pe-lever { animation: pe-trip 1700ms var(--ease) 700ms both; }
  .js .pe-plano .pe-trip { stroke-dasharray: 1; animation: pe-draw 520ms var(--ease-io) 1700ms both; }
}
@keyframes pe-bolt { from { opacity: 0; transform: translate(6%, -10%) scale(.92); } }
@keyframes pe-trip { 0% { opacity: 0; transform: none; } 22%, 45% { opacity: 1; transform: none; } 72% { transform: translateY(50px); }
  86% { transform: translateY(40px); } 100% { opacity: 1; transform: translateY(44px); } }

/* ---------- urgencias: the live 24 h dial as the hero drawing (markup and .dial styles from the home) ---------- */
.pe-clock { background-color: var(--slate-deep); transition: background-color 600ms var(--ease); }
.pe-clock.is-night { background-color: var(--slate-night); }
.pe-art.pe-dial { justify-self: end; width: min(42vw, 10.5rem); margin: -1rem -.25rem .25rem 0; }
.pe-clock:not(.is-ready) .dial .hand, .pe-clock:not(.is-ready) .dial .sec { visibility: hidden; }   /* no JS: no fake time */
.pe-clock .dial .hub { fill: var(--slate-deep); transition: fill 600ms var(--ease); }
.pe-clock.is-night .dial .hub { fill: var(--slate-night); }
.pe-clock.is-night .dial .night-arc { stroke-opacity: .2; }
.pe-clock.is-night .dial-legend::before { background: rgb(242 240 236 / .3); }
@media (max-width: 47.99em) { .pe-dial .dial-legend { display: none; } }
@media (min-width: 48em) { .pe-art.pe-dial { width: min(38%, 22rem); right: -1rem; } }
@media (min-width: 64em) { .pe-art.pe-dial { width: 100%; max-width: 27rem; margin: 0; justify-self: center; } }
/* the live line: two lines that never wrap, so the time arriving after load never moves anything */
.pe-now { margin: 0 0 1.1rem; max-width: none; font-size: min(1.75rem, 5.2vw); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: var(--paper); }
.pe-now > span { display: block; white-space: nowrap; }
.pe-now time { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .js .pe-dial .ring[pathLength] { stroke-dasharray: 1; animation: pe-draw 1200ms var(--ease-io) both; }
  .js .pe-dial .r-in { animation-delay: 220ms; }
  .js .pe-dial .night-arc { stroke-dasharray: 1; animation: pe-draw 1000ms var(--ease-io) 480ms both; }
  .js .pe-dial .t, .js .pe-dial .r-dash, .js .pe-dial .hl, .js .pe-dial .hub { animation: pe-fade 700ms var(--ease) 600ms both; }
  .js .pe-dial .t-major { animation-delay: 380ms; }
}

/* ---------- choosers: explorer (electricista), ¿dónde lo quieres? (enchufe), troubleshooting path (diferencial) ---------- */
.pe-pick { display: grid; gap: .5rem; }
.pe-pick-tile {
  position: relative; display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 4.5rem; padding: .8rem 3.25rem .8rem .9rem;
  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);
}
.pe-pick-tile .ico { width: 2.5rem; height: 2.5rem; stroke-width: 2; }
.pe-pick-tile .ico [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; }
.pe-pick-label { display: grid; gap: .2rem; min-width: 0; }
.pe-pick-s { font-size: .9375rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.pe-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); }
.pe-pick-tile[aria-expanded="true"]::after { transform: rotate(180deg); background-size: 100% 2px, 2px 0; }
.pe-pick-tile:active { transform: scale(.985); }
.pe-pick-tile[aria-expanded="true"] { background: var(--slate); color: var(--paper); border-color: var(--slate); --focus: var(--slate); }
.pe-pick-tile[aria-expanded="true"] .pe-pick-s { color: rgb(242 240 236 / .82); }
.is-picked > .pe-pick-tile[aria-expanded="true"]::before { /* the isotipo's green bar: THE green mark of this screen, once the
  visitor has chosen (the answer open by default never adds a second green mark next to the hero's) */
  content: ""; position: absolute; top: .55rem; right: 2.6rem; width: 1.15rem; height: .3rem; background: var(--green);
  transform: rotate(-52deg); border-radius: 1px; }
.pe-pick-urgent { border-left: 4px solid var(--slate); }
@media (hover: hover) and (pointer: fine) {
  .pe-pick-tile:hover { border-color: var(--slate); }
  .pe-pick-tile:not([aria-expanded="true"]):hover { background: #fff; }
}
.pe-pick-panel { padding: 1.4rem 1.1rem 1.6rem; background: var(--sheet); border: 1px solid var(--line-strong); border-radius: var(--r); }
.js .pe-pick-panel:not(.is-open) { display: none; }
.js .pe-pick-panel { border-top: 0; border-radius: 0 0 var(--r) var(--r); margin-top: -.5rem; }
.pe-pick-panel h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); letter-spacing: -.03em; margin-bottom: .55em; }
.pe-pick-panel p, .pe-pick-panel li { color: var(--slate); }
.pe-pick-art { display: none; }                 /* phones: the tile's own icon is the drawing */
.pe-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: .9688rem; line-height: 1.55; color: var(--slate); }
.pe-tip strong { display: block; margin-bottom: .2rem; }
.pe-tip-wide { max-width: 46rem; margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0; }
.pe-more { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
/* numbered actions inside an answer (the order is the content: the site's one numbering system, drawn nodes) */
.pe-do { list-style: none; counter-reset: pe-do; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .85rem; }
.pe-do > li { position: relative; counter-increment: pe-do; padding: .15rem 0 0 2.6rem; min-height: 1.9rem; }
.pe-do > li::before { content: counter(pe-do); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  border: 1.5px solid var(--slate); border-radius: 50%; font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pe-mini { display: block; width: 100%; height: auto; overflow: visible; color: var(--slate); }
.pe-mini .pe-cons { fill: none; stroke: currentColor; stroke-width: 1; stroke-opacity: .25; }
.pe-mini .pe-mini-ico { fill: none; stroke: currentColor; stroke-width: .72; stroke-linecap: round; stroke-linejoin: round; }   /* icon × 3.4 */
@media (prefers-reduced-motion: no-preference) {
  .js .pe-pick-tile[aria-expanded="true"] .ico [pathLength] { animation: pe-draw 700ms var(--ease-io) both; }
  .js .pe-pick-panel.is-open .pe-pick-body > * { animation: pe-rise 520ms var(--ease) both; }
  .js .pe-pick-panel.is-open .pe-pick-body > :nth-child(2) { animation-delay: 50ms; }
  .js .pe-pick-panel.is-open .pe-pick-body > :nth-child(3) { animation-delay: 100ms; }
  .js .pe-pick-panel.is-open .pe-pick-body > :nth-child(n+4) { animation-delay: 150ms; }
  .js .pe-pick-panel.is-open .pe-mini [pathLength] { stroke-dasharray: 1; animation: pe-draw 1000ms var(--ease-io) both; }
  .js .pe-pick-panel.is-open .pe-mini .pe-mini-ico [pathLength] { animation-duration: 900ms; animation-delay: 250ms; }
}
/* side by side (only with JS: without it every answer stays open as a list): tiles left, the open answer right, joined
   by a wire from the open tile (the tile's plus/minus becomes that wire) */
@media (min-width: 56em) {
  .js .pe-pick { grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); grid-template-rows: repeat(4, auto) 1fr; column-gap: 2.75rem;
    row-gap: .6rem; align-items: start; }
  .js .pe-pick-tile { grid-column: 1; min-height: 5.25rem; padding: .95rem 1.25rem; }
  .js .pe-pick-tile:nth-of-type(1) { grid-row: 1; } .js .pe-pick-tile:nth-of-type(2) { grid-row: 2; }
  .js .pe-pick-tile:nth-of-type(3) { grid-row: 3; } .js .pe-pick-tile:nth-of-type(4) { grid-row: 4; }
  .js .is-picked > .pe-pick-tile[aria-expanded="true"]::before { right: 1.1rem; }
  .js .pe-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 .pe-pick-tile[aria-expanded="true"]::after { transform: scaleX(1); background-size: auto; }
  .js .pe-pick-panel { grid-column: 2; grid-row: 1 / span 5; 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 .pe-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 .pe-pick:not(:has(.pe-pick-panel.is-open)) > .pe-pick-panel:first-of-type { display: block; }
  .pe-pick-in { display: grid; grid-template-columns: minmax(0, 1fr) clamp(8.5rem, 4rem + 8vw, 12.5rem); gap: 2rem; align-items: start; }
  .pe-pick-art { display: block; grid-column: 2; grid-row: 1; }
  .pe-pick-body { grid-column: 1; grid-row: 1; }
}
@media (min-width: 75em) { .js .pe-pick-tile { min-height: 5.75rem; } }

/* ---------- cuadro teaser (electricista) ---------- */
.pe-teaser { display: grid; gap: 1.25rem 2rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--paper-2); align-items: center; }
.pe-teaser > .ico { width: 3.5rem; height: 3.5rem; stroke-width: 1.7; }
.pe-teaser h3 { margin: 0 0 .4em; font-size: clamp(1.4rem, 1.2rem + .9vw, 2rem); letter-spacing: -.03em; }
.pe-teaser p { color: var(--slate); margin-bottom: 1rem; }
.pe-teaser .link-arrow { justify-self: start; }
.pe-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pe-chips li { position: relative; padding: .5rem .75rem .5rem 1.6rem; border: 1px solid var(--line-strong); border-radius: var(--r);
  font-size: .9375rem; font-weight: 700; line-height: 1.3; background: var(--sheet); }
.pe-chips li::before { content: ""; position: absolute; left: .7rem; top: calc(.5rem + .65em - .225rem); width: .45rem; height: .45rem;
  border-radius: 50%; background: var(--slate); }
@media (min-width: 56em) { .pe-teaser { grid-template-columns: auto minmax(0, 1fr) auto; } }

/* ---------- step line with four steps (the home's .tl has five columns) ---------- */
@media (min-width: 64em) {
  .pe-tl-4 .tl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pe-tl-4 .tl-line { right: calc(25% - 2.5rem); }
}

/* ---------- icon list (know-how, urgencias atendidas): each item's rule and icon are drawn when it comes into view ---------- */
.pe-know { list-style: none; margin: 0; padding: 0; display: grid; column-gap: clamp(1.5rem, 3vw, 3rem); }
.pe-know > li { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .3rem 1.1rem; align-content: start;
  padding: 1.35rem 0 1.5rem; }
.pe-know > li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: var(--slate);
  transform: scaleX(var(--rule, 1)); transform-origin: 0 50%; }
.pe-know .ico { grid-row: 1 / span 2; width: 3rem; height: 3rem; stroke-width: 1.8; }
.pe-know h3 { margin: .25rem 0 .2rem; font-size: clamp(1.15rem, 1.05rem + .45vw, 1.375rem); }
.pe-know p { margin: 0; color: var(--muted); }
.pe-know-plain p { align-self: center; color: var(--slate); font-weight: 600; font-size: 1.0625rem; line-height: 1.45; }
.pe-know-plain .ico { grid-row: auto; }
@media (min-width: 48em) { .pe-know { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) {
  .pe-know-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pe-know-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pe-know-4 > li, .pe-know-3:not(.pe-know-plain) > li { grid-template-columns: minmax(0, 1fr); padding-top: 1.6rem; }
  .pe-know-4 .ico, .pe-know-3:not(.pe-know-plain) .ico { grid-row: auto; width: 3.5rem; height: 3.5rem; stroke-width: 1.6; margin-bottom: .9rem; }
}
.pe-after { margin: 1.75rem 0 0; font-weight: 600; color: var(--slate); }

/* ---------- safety cards (urgencias: mientras llegamos · diferencial: antes de tocar nada) ---------- */
.pe-safe { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.pe-safe > li { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .3rem 1rem; align-content: start;
  padding: 1.25rem 1.25rem 1.35rem; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--sheet); }
.pe-safe .ico { grid-row: 1 / span 2; width: 3rem; height: 3rem; stroke-width: 1.8; }
.pe-safe h3 { margin: .2rem 0 .2rem; font-size: 1.1875rem; }
.pe-safe p { margin: 0; color: var(--slate); }
.pe-safe > li > p:only-of-type:last-child { align-self: center; }
.pe-safe > .pe-safe-112 { --focus: var(--paper); grid-template-columns: auto minmax(0, 1fr); background: var(--slate); border-color: var(--slate); color: var(--paper); }
.pe-safe-112 h3, .pe-safe-112 p { color: var(--paper); }
.pe-112 { grid-row: 1 / span 2; align-self: start; display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 2.5rem; font-weight: 800;
  letter-spacing: -.04em; line-height: 1; text-decoration: none; color: var(--paper); font-variant-numeric: tabular-nums lining-nums; }
@media (min-width: 48em) { .pe-safe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 64em) {
  .pe-safe-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pe-safe-4 > li, .pe-safe-4 > .pe-safe-112 { grid-template-columns: minmax(0, 1fr); padding: 1.5rem 1.4rem 1.6rem; }
  .pe-safe-4 .ico, .pe-safe-4 .pe-112 { grid-row: auto; margin-bottom: .9rem; }
  .pe-safe-4 .ico { width: 3.5rem; height: 3.5rem; stroke-width: 1.6; }
  .pe-safe-4 .pe-112 { font-size: 3.5rem; min-height: 3.5rem; }
}
/* diferencial: the heading beside a row of three */
.pe-safe-row { display: grid; gap: 1.5rem; align-items: start; }
.pe-safe-row h2 { margin: 0; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); }
@media (min-width: 64em) {
  .pe-safe-row { grid-template-columns: minmax(0, .75fr) minmax(0, 2.25fr); gap: 3rem; }
  .pe-safe-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- numbered steps with a cuadro per step (diferencial) ---------- */
/* the track (faint) is each step's background line; the drawn line (::after) fills a step's segment once the next step
   is reached; numbers are the site's drawn nodes. p-electricidad.js adds .pe-live (start states) and .is-on / .is-done */
.pe-steps > ol { list-style: none; counter-reset: pe-step; margin: 0; padding: 0; display: grid; }
.pe-step { position: relative; counter-increment: pe-step; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem;
  padding: 0 0 2.25rem 3.75rem;
  background: linear-gradient(var(--line-strong), var(--line-strong)) calc(1.3rem - .75px) 2.6rem / 1.5px calc(100% - 2.6rem) no-repeat; }
.pe-step:last-child { padding-bottom: 0; background: none; }
.pe-step::before { content: counter(pe-step); position: absolute; left: 0; top: 0; 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); }
.pe-step:not(:last-child)::after { content: ""; position: absolute; left: calc(1.3rem - .75px); top: 2.6rem; bottom: 0; width: 1.5px;
  background: var(--slate); transform-origin: 50% 0; transition: transform 600ms var(--ease); }
.pe-step > p { margin: 0; padding-top: .5rem; color: var(--slate); max-width: 34rem; font-size: 1.0938rem; }
.pe-step-fig { width: min(100%, 17rem); color: var(--slate); }
.pe-steps.pe-live .pe-step:not(.is-on)::before { border-style: dashed; color: var(--granite-ink); }
.pe-steps.pe-live .pe-step.is-on::before { background: var(--slate); color: var(--paper); }
.pe-steps.pe-live .pe-step:not(.is-done)::after { transform: scaleY(0); }
@media (min-width: 56em) {
  .pe-step { grid-template-columns: minmax(0, 1fr) 16rem; gap: 3rem; align-items: start; }
  .pe-step-fig { width: 100%; margin-top: -.25rem; }
}
@media (min-width: 75em) { .pe-steps { max-width: 62rem; } .pe-step { grid-template-columns: minmax(0, 1fr) 18rem; } }
/* the cuadro drawings: levers are drawn where they end; .from-up / .from-down / seq-* say where they start (step not
   reached yet), and they move when the line reaches the step */
.pe-diag { display: block; width: 100%; height: auto; overflow: visible; }
.pe-diag .cl { fill: none; stroke: currentColor; stroke-width: 1; stroke-opacity: .3; }
.pe-diag .box { stroke-opacity: .5; }
.pe-diag .ob { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pe-diag .mod { fill: var(--sheet); }
.pe-diag .ob-soft { stroke-opacity: .6; }
.pe-diag .lv { fill: currentColor; }
.pe-diag .mk { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 4 4; }
.pe-diag-plug .plug { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .pe-diag .lv, .pe-diag-plug .plug { transition: transform 520ms var(--ease); }
  .pe-diag .mk { transition: opacity 400ms var(--ease) 300ms; }
  .pe-live .pe-step:not(.is-on) .pe-diag .mk { opacity: 0; }
  .pe-live .pe-step:not(.is-on) .lv.from-up { transform: translateY(-24px); }
  .pe-live .pe-step:not(.is-on) .lv.from-down, .pe-live .pe-step:not(.is-on) .lv.seq-m4 { transform: translateY(24px); }
  .pe-live .pe-step:not(.is-on) .plug { transform: translateX(-14px); }
  .pe-live .pe-step.is-on .lv { transition-delay: 150ms; }
  .pe-live .pe-step.is-on .lv.d1 { transition-delay: 200ms; } .pe-live .pe-step.is-on .lv.d2 { transition-delay: 420ms; }
  .pe-live .pe-step.is-on .lv.d3 { transition-delay: 640ms; } .pe-live .pe-step.is-on .lv.d4 { transition-delay: 860ms; }
  .pe-live .pe-step.is-on .plug { transition-delay: 250ms; }
  /* step 5: the third breaker goes up, the diferencial trips, it goes back down, the diferencial up, the fourth up */
  .pe-live .pe-step.is-on .lv.seq-m3 { animation: pe-m3 3200ms var(--ease) both; }
  .pe-live .pe-step.is-on .lv.seq-d { animation: pe-d5 3200ms var(--ease) both; }
  .pe-live .pe-step.is-on .lv.seq-m4 { animation: pe-m4 3200ms var(--ease) both; }
}
@keyframes pe-m3 { 0% { transform: none; } 14%, 44% { transform: translateY(-24px); } 56%, 100% { transform: none; } }
@keyframes pe-d5 { 0%, 18% { transform: none; } 26%, 62% { transform: translateY(24px); } 72%, 100% { transform: none; } }
@keyframes pe-m4 { 0%, 76% { transform: translateY(24px); } 88%, 100% { transform: none; } }

/* ---------- consumption scale (enchufe) ---------- */
.pe-scale-in { display: grid; gap: 2.5rem; align-items: center; }
.pe-scale-in h2 { max-width: 16ch; }
.pe-scale-in p { color: var(--slate); }
.pe-scale { margin: 0; color: var(--slate); }
.pe-scale-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; align-items: end; }
.pe-scale-row li { display: grid; justify-items: center; gap: .65rem; text-align: center; font-size: .8125rem; font-weight: 700; line-height: 1.2; }
.pe-scale-row .ico { width: 100%; max-width: 4.5rem; height: auto; aspect-ratio: 1; stroke-width: 1.6; }
.pe-scale-row .is-high .ico { stroke-width: 2.3; }
/* the axis (poco → mucho) and the bracket over the heavy group: one dimension line of the plano */
.pe-scale-axis { position: relative; display: grid; grid-template-columns: 2fr 3fr; gap: .5rem; margin-top: 1.1rem; padding-top: 1.2rem;
  font-size: .875rem; line-height: 1.35; }
.pe-scale-axis::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: var(--slate);
  transform: scaleX(var(--rule, 1)); transform-origin: 0 50%; }
.pe-scale-axis::after { content: ""; position: absolute; right: -1px; top: -.3rem; width: .6rem; height: .6rem; border-top: 1.5px solid var(--slate);
  border-right: 1.5px solid var(--slate); transform: rotate(45deg); }
.pe-scale-lo { color: var(--muted); font-weight: 600; }
.pe-scale-hi { position: relative; padding-top: .55rem; font-weight: 700; color: var(--slate); }
.pe-scale-hi::before { content: ""; position: absolute; left: 0; right: .3rem; top: 0; height: .55rem; border: 1.5px solid var(--slate); border-bottom: 0; }
/* phones: "Aire" (as it is said in Spain); the full name is still read out */
@media (max-width: 47.99em) {
  .pe-wide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pe-scale-row { gap: .25rem; }
  .pe-scale-row li > span { white-space: nowrap; letter-spacing: -.01em; }   /* one word each: never broken */
}
@media (min-width: 30em) { .pe-scale-row li { font-size: .875rem; } }
@media (min-width: 56em) { .pe-scale-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(3rem, 6vw, 6rem); } }

/* ---------- two ways for the cable (enchufe): wall elevations, dashed = hidden line ---------- */
.pe-ways { display: grid; gap: 1.25rem; }
.pe-way { position: relative; padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--sheet); }
.pe-way::before { content: ""; position: absolute; inset: .55rem; pointer-events: none; opacity: .45;
  background:
    linear-gradient(var(--slate), var(--slate)) 0 0 / .8rem 1.5px no-repeat, linear-gradient(var(--slate), var(--slate)) 0 0 / 1.5px .8rem no-repeat,
    linear-gradient(var(--slate), var(--slate)) 100% 100% / .8rem 1.5px no-repeat, linear-gradient(var(--slate), var(--slate)) 100% 100% / 1.5px .8rem no-repeat; }
.pe-way-art { margin: 0 0 1.25rem; color: var(--slate); }
.pe-way h3 { margin-bottom: .35em; }
.pe-way p { margin: 0; color: var(--muted); }
.pe-wall { display: block; width: 100%; height: auto; overflow: visible; }
.pe-wall .cl { fill: none; stroke: currentColor; stroke-width: 1; stroke-opacity: .35; }
.pe-wall .floor { stroke-opacity: .7; stroke-width: 1.5; }
.pe-wall .ob { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pe-wall .ob-soft { stroke-width: 1.5; stroke-opacity: .7; }
.pe-wall .hidden { stroke-dasharray: 7 5; stroke-linecap: butt; }
.pe-wall .lbl { fill: currentColor; font: 600 11px var(--font); letter-spacing: .14em; }
@media (min-width: 48em) { .pe-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }

/* ---------- call band (main CTA of the page): "Llámanos: +34 …" + WhatsApp; also visible on phones ---------- */
.pe-call-in { display: grid; gap: 2rem; align-items: center; }
.pe-call-art { width: clamp(9rem, 5rem + 12vw, 15rem); color: var(--paper); }
.pe-call-art .pe-mini { color: var(--paper); }
.pe-call-art .pe-mini .pe-cons { stroke-opacity: .3; }
.pe-call-line { display: inline-grid; gap: .15rem; margin: .35rem 0 1.25rem; text-decoration: none; color: var(--ink); max-width: 100%; }
.pe-call-k { font-size: 1.0625rem; font-weight: 600; color: var(--muted); }
.on-dark .pe-call-k { color: rgb(242 240 236 / .86); }
.pe-call-n { font-size: clamp(1.9rem, 1.2rem + 3.6vw, 3.4rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.05;
  white-space: normal; overflow-wrap: anywhere; padding-bottom: .12em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size 420ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .pe-call-line:hover .pe-call-n { background-size: 100% 2px; } }
.pe-call-wa { margin: 0 0 1rem; }
.pe-call .note { margin-top: .5rem; }
.pe-pick-panel .pe-call-line { margin: .25rem 0 1rem; }
.pe-pick-panel .pe-call-n { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); }
@media (min-width: 64em) { .pe-call-in { grid-template-columns: auto minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); } }

/* ---------- related links: drawn icon, label, arrow (the icon draws itself again on hover) ---------- */
.pe-rel { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1.5px solid var(--slate); }
.pe-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); }
.pe-rel a > span { flex: 1 1 auto; }
.pe-rel .ico { width: 2.25rem; height: 2.25rem; stroke-width: 1.9; }
.pe-rel .i-arrow { transition: transform 260ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .pe-rel a:hover { padding-left: .75rem; }
  .pe-rel a:hover .i-arrow { transform: translateX(5px); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pe-rel a:hover .ico [pathLength] { stroke-dasharray: 1; animation: pe-draw 700ms var(--ease-io) both; }
}
@media (min-width: 48em) { .pe-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }