/* ==========================================================
   Electricidad Oliveira — señalización de servicio
   Módulo de rótulo: --u (8px). Todo mide en múltiplos de --u.
   ========================================================== */

@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/overpass-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/overpass-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --u: 8px;

  /* Chapa y rótulo */
  --sign: #1761B0;          /* azul de la marca: fondo de cartel */
  --sign-deep: #12508f;     /* azul de cartel pisado (hover) */
  --legend: #ffffff;        /* rótulo blanco */
  --legend-2: #d9e6f6;      /* rótulo secundario sobre azul (5:1) */
  --rule-on-sign: rgba(255, 255, 255, .38);
  --act: #F5C200;           /* amarillo: solo acción / «ahora» */
  --act-press: #e2b200;
  --ink: #0E2F57;           /* tinta sobre blanco y amarillo */
  --ink-2: #3a5577;         /* texto secundario sobre blanco (7:1) */
  --paper: #ffffff;
  --pale: #eef3f9;          /* placa pálida para bandas de lectura */
  --rule: #c6d5e8;
  --error: #b42318;
  --ok: #0f6b3a;

  --radius-sign: calc(var(--u) * 3);
  --radius-plate: calc(var(--u) * 1.5);
  --filete: calc(var(--u) * .75);

  --font: "Overpass", "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --step--1: clamp(.95rem, .92rem + .15vw, 1.05rem);
  --step-0: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --step-1: clamp(1.25rem, 1.14rem + .5vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3.25rem);
  --step-4: clamp(2.75rem, 1.9rem + 4.2vw, 5.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
  background: var(--sign);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--act); color: var(--ink); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 2px; }
abbr[title] { text-decoration: underline dotted 1.5px; text-underline-offset: .2em; cursor: help; }
h1, h2, h3 { line-height: 1.05; text-wrap: balance; letter-spacing: -.01em; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--act);
  outline-offset: 3px;
  border-radius: 4px;
}
.band--white :focus-visible, .band--pale :focus-visible, .form :focus-visible {
  outline-color: var(--ink);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute; left: var(--u); top: var(--u); z-index: 50;
  background: var(--act); color: var(--ink); font-weight: 800;
  padding: var(--u) calc(var(--u) * 2); border-radius: var(--radius-plate);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.wrap { width: min(100% - calc(var(--u) * 4), 1200px); margin-inline: auto; }
.wrap--narrow { width: min(100% - calc(var(--u) * 4), 840px); }

/* ---------- Cartel: chapa azul con filete blanco ---------- */
.sign {
  background: var(--sign);
  color: var(--legend);
  padding: calc(var(--u) * 2);
}
.sign__frame {
  border: var(--filete) solid var(--legend);
  border-radius: var(--radius-sign);
  padding: calc(var(--u) * 4) calc(var(--u) * 6);
}
.sign--band .sign__frame { padding-block: calc(var(--u) * 10); padding-inline: 0; }

/* Placa blanca */
.plate {
  background: var(--paper);
  border-radius: var(--radius-plate);
  display: inline-flex;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2.5);
}
.plate--logo img { height: calc(var(--u) * 8); width: auto; }
.plate--small { padding: var(--u) calc(var(--u) * 1.5); }
.plate--small img { height: calc(var(--u) * 5); }

/* ---------- Barra superior ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--u) * 3);
  view-transition-name: topbar;
}

/* Entre páginas la cabecera se queda quieta y solo cambia el contenido
   (navegadores con View Transitions; en el resto, navegación normal) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }

/* Flechas de enlace: avanzan al señalar o tocar */
a > svg:has(use[href="#i-arrow"]) { transition: translate .2s var(--ease-out); }
a:is(:hover, :focus-visible, :active) > svg:has(use[href="#i-arrow"]) { translate: calc(var(--u) * .5) 0; }
.dest__list--links .dest__arrow { transition: translate .2s var(--ease-out); }
.dest__list--links li:is(:hover, :focus-within) .dest__arrow { translate: 0 calc(var(--u) * .5); }
.nav__list { display: flex; gap: calc(var(--u) * 5); }
.nav__list a {
  font-weight: 700; font-size: var(--step--1); letter-spacing: .02em;
  text-decoration: none; padding-block: var(--u);
  border-bottom: 3px solid transparent;
  transition: border-color .2s var(--ease-out);
}
.nav__list a:hover { border-bottom-color: var(--act); }
.nav__toggle { display: none; }

/* ---------- Primera pantalla ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: calc(var(--u) * 6);
  align-items: start;
  margin-top: calc(var(--u) * 4);
}
.hero__title {
  font-size: clamp(2.75rem, 1.1rem + 3.9vw, 4.75rem);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.015em;
}
.hero__title span { display: block; }
.hero__title .hero__title-sub {
  font-size: max(.4em, 1.25rem); font-weight: 800; line-height: 1.15; letter-spacing: 0;
  margin-top: .45em; white-space: normal;
}
@media (min-width: 1081px) { .hero__title span { white-space: nowrap; } }
.hero__side { display: grid; gap: calc(var(--u) * 3); }
.hero__lead {
  margin-top: calc(var(--u) * 2.5);
  max-width: 40ch;
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--legend-2);
}
.hero__call {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: calc(var(--u) * 2);
  margin-top: calc(var(--u) * 4);
}

.callplate {
  display: inline-flex; flex-direction: column; justify-content: center;
  background: var(--act); color: var(--ink);
  border-radius: var(--radius-plate);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3) calc(var(--u) * 1.75);
  text-decoration: none;
  transition: background-color .15s var(--ease-out), transform .15s var(--ease-out);
}
.callplate:hover { background: var(--act-press); }
.callplate:active { transform: translateY(2px); }
.callplate__legend {
  font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.callplate__number {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-weight: 900; line-height: 1.05;
  white-space: nowrap;
}

.linkplate {
  display: inline-flex; align-items: center; gap: var(--u);
  min-height: calc(var(--u) * 6);
  padding: var(--u) calc(var(--u) * 2.5);
  border: 3px solid var(--legend);
  border-radius: var(--radius-plate);
  font-weight: 800; text-decoration: none;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.linkplate svg { width: 22px; height: 22px; flex: none; }
.linkplate:hover { background: var(--legend); color: var(--sign); }
.linkplate--solid { background: var(--legend); color: var(--sign); }
.linkplate--solid:hover { background: var(--pale); }

/* Línea de estado en directo */
.status {
  display: flex; align-items: center; gap: calc(var(--u) * 1.25);
  margin-top: calc(var(--u) * 2);
  font-weight: 800; font-size: var(--step-0);
  color: var(--legend);
}
.status__lamp {
  width: calc(var(--u) * 2); height: calc(var(--u) * 2); flex: none;
  border-radius: 3px;
  background: var(--act);
}
.status[data-open="false"] .status__lamp { background: transparent; box-shadow: inset 0 0 0 4px var(--act); }

.hero__plan {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: calc(var(--u) * 2) calc(var(--u) * 3);
  font-size: var(--step-1); font-weight: 700;
}
.hero__plan .linkplate svg { width: 20px; height: 20px; }

/* Cartel de destinos */
.dest {
  border: calc(var(--u) * .5) solid var(--legend);
  border-radius: calc(var(--u) * 2);
  overflow: hidden;
}
.dest__title {
  background: var(--legend); color: var(--sign);
  font-size: var(--step--1); font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
}
.dest__list li {
  display: grid; grid-template-columns: calc(var(--u) * 5) 1fr auto; align-items: center;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  border-top: 2px solid var(--rule-on-sign);
  font-size: var(--step-1); font-weight: 800; line-height: 1.2;
}
.dest__list li:first-child { border-top: 0; }
.dest__list em { font-style: normal; font-weight: 700; font-size: var(--step--1); color: var(--legend-2); }
.dest__arrow, .dest__mark { width: calc(var(--u) * 4); height: calc(var(--u) * 4); }
.dest__arrow { transform: rotate(var(--r, 0deg)); }
.dest__foot {
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  border-top: 2px solid var(--rule-on-sign);
  font-size: var(--step--1); font-weight: 600; color: var(--legend-2);
}

/* Movimiento firma: el cartel se enciende una vez.
   Las filas entran, cada flecha gira desde «de frente» (arriba) hasta su pueblo
   y la lámpara de estado arranca como un fluorescente. Teléfono y titular quietos. */
@media (prefers-reduced-motion: no-preference) {
  .js .dest__list li { animation: dest-in .7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }
  @keyframes dest-in { from { transform: translateX(calc(var(--u) * -2)); opacity: .35; } }

  .js .dest__list:not(.dest__list--links) .dest__arrow {
    animation: arrow-set 1.1s cubic-bezier(.33, 1, .68, 1) both;
    animation-delay: calc(var(--i, 0) * 90ms + 300ms);
  }
  @keyframes arrow-set { from { transform: rotate(var(--r0, -90deg)); } }

  .js .status__lamp { animation: lamp-on .8s steps(1, end) .45s both; }
  @keyframes lamp-on {
    0% { opacity: 0; }
    20% { opacity: 1; }
    30% { opacity: .15; }
    45% { opacity: 1; }
    55% { opacity: .3; }
    70%, 100% { opacity: 1; }
  }
}

.credentials {
  display: flex; flex-wrap: wrap; gap: var(--u) calc(var(--u) * 4);
  margin-top: calc(var(--u) * 4);
  padding-top: calc(var(--u) * 2.5);
  border-top: calc(var(--u) * .5) solid var(--legend);
  font-size: var(--step--1); font-weight: 700; letter-spacing: .02em;
}
.credentials li + li::before {
  content: ""; display: inline-block; width: 6px; height: 6px; background: var(--legend);
  margin-right: calc(var(--u) * 4); vertical-align: .15em; margin-left: calc(var(--u) * -2);
  border-radius: 1px;
}
.credentials a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-block: -10px; }
.credentials svg { width: 16px; height: 16px; color: var(--legend); }

/* ---------- Bandas de lectura ---------- */
.band { padding-block: calc(var(--u) * 12); }
.band--white { background: var(--paper); }
.band--pale { background: var(--pale); }

.band__head { max-width: 46rem; margin-bottom: calc(var(--u) * 6); }
.band__head h2 { font-size: var(--step-3); font-weight: 900; color: var(--sign); }
.band__head--light h2 { color: var(--legend); }
.band__head p { margin-top: calc(var(--u) * 1.5); font-size: var(--step-1); color: var(--ink-2); line-height: 1.4; }
.band__head--light p { color: var(--legend-2); }

/* Servicios: filas de cartel, no tarjetas */
.services { border-top: calc(var(--u) * .5) solid var(--sign); }
.service {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: calc(var(--u) * 3) calc(var(--u) * 6);
  padding-block: calc(var(--u) * 5);
  border-bottom: 2px solid var(--rule);
}
.service__name svg { width: calc(var(--u) * 6); height: calc(var(--u) * 6); color: var(--sign); margin-bottom: calc(var(--u) * 2); }
.service__name h3 { font-size: var(--step-2); font-weight: 900; color: var(--sign); }
.service__tag { margin-top: var(--u); font-weight: 700; color: var(--ink-2); }
.service--urgent .service__tag {
  display: inline-block; background: var(--act); color: var(--ink);
  padding: 2px var(--u) 0; border-radius: 4px;
}
.service__lead { font-size: var(--step-1); font-weight: 800; line-height: 1.35; color: var(--sign); }
.examples { margin-top: calc(var(--u) * 2); }
.examples li {
  position: relative; padding: var(--u) 0 var(--u) calc(var(--u) * 4);
  border-top: 1px solid var(--rule);
}
.examples li:first-child { border-top: 0; }
.examples li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--u) * 1.85);
  width: 14px; height: 10px;
  background: var(--sign);
  clip-path: polygon(0 30%, 55% 30%, 55% 0, 100% 50%, 55% 100%, 55% 70%, 0 70%);
}
.service__more { margin-top: calc(var(--u) * 2); color: var(--ink-2); max-width: 60ch; }

/* Cada servicio, la primera vez que entra en pantalla (script.js añade .services--draw,
   .is-on al entrar y .is-done al acabar): el pictograma se traza y termina con su gesto,
   las flechas de la lista entran en escalera y la etiqueta de 24 h se enciende. */
@media (prefers-reduced-motion: no-preference) {
  .services--draw .service:not(.is-done) .picto__line {
    stroke-dasharray: var(--len) calc(var(--len) * 2);
    stroke-dashoffset: calc(var(--len) * 1.01);
    transition: stroke-dashoffset .5s cubic-bezier(.5, 0, .2, 1) calc(var(--d, 0) * 200ms);
  }
  .services--draw .service.is-on:not(.is-done) .picto__line { stroke-dashoffset: 0; }

  /* Averías: el diferencial está abajo y sube de golpe */
  .services--draw .service:not(.is-on) .picto__lever { opacity: 0; }
  .services--draw .is-on .picto__lever { animation: lever-rearm .9s .25s both; }
  @keyframes lever-rearm {
    0% { opacity: 0; transform: translateY(10px); }
    30% { opacity: 1; transform: translateY(10px); animation-timing-function: linear; }
    72% { transform: translateY(10px); animation-timing-function: cubic-bezier(.2, .9, .3, 1); }
    88%, 100% { opacity: 1; transform: none; }
  }
  /* Instalaciones: aparece el enchufe */
  .picto__pop { transform-box: fill-box; transform-origin: center; }
  .services--draw .service:not(.is-on) .picto__pop { opacity: 0; }
  .services--draw .is-on .picto__pop { animation: picto-pop .3s var(--ease-out) .6s both; }
  @keyframes picto-pop { from { opacity: 0; transform: scale(.4); } }
  /* Placas: sale el sol por detrás de la placa */
  .services--draw .service:not(.is-on) .picto__sun { opacity: 0; }
  .services--draw .is-on .picto__sun { animation: sun-rise .6s var(--ease-out) .5s both; }
  @keyframes sun-rise { from { opacity: 0; transform: translateY(10px); } }

  /* Flechas de la lista, una tras otra */
  .services--draw .examples li::before {
    transition: opacity .25s linear, translate .4s var(--ease-out);
    transition-delay: calc(var(--n, 0) * 90ms + 150ms);
  }
  .services--draw .examples li:nth-child(2)::before { --n: 1; }
  .services--draw .examples li:nth-child(3)::before { --n: 2; }
  .services--draw .service:not(.is-on) .examples li::before { opacity: 0; translate: calc(var(--u) * -1.5) 0; }

  /* La etiqueta de urgencias se enciende como la lámpara de estado */
  .services--draw .service--urgent:not(.is-on) .service__tag { opacity: 0; }
  .services--draw .service--urgent.is-on .service__tag { animation: lamp-on .8s steps(1, end) .15s both; }
}

.service__links { display: flex; flex-wrap: wrap; gap: 0 calc(var(--u) * 3); }
/* En averías, la guía «Qué hacer ante una avería» es una placa azul bien visible;
   el amarillo sigue reservado para llamar */
.service__links--guide { align-items: center; gap: var(--u) calc(var(--u) * 3); margin-top: calc(var(--u) * 3); }
.service__links--guide > * { margin-top: 0; }
.linkplate--sign {
  min-height: calc(var(--u) * 7); padding-inline: calc(var(--u) * 3);
  background: var(--sign); border-color: var(--sign); color: var(--legend);
  font-size: var(--step-1); font-weight: 900;
}
.linkplate--sign:hover { background: var(--sign-deep); border-color: var(--sign-deep); color: var(--legend); }
.hero__lead, .band__head p, .service__more, .prose p, .prose li, .field__hint, .review blockquote p { text-wrap: pretty; }

.textlink {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: calc(var(--u) * 2);
  min-height: 44px;
  font-weight: 800; color: var(--sign);
  text-decoration: underline;
}
.textlink svg { width: 16px; height: 16px; }
.textlink:hover { color: var(--ink); }
.textlink--light { color: var(--legend); }
.textlink--light:hover { color: var(--act); }

/* Cómo trabajamos */
.steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: calc(var(--u) * 3);
  align-items: start;
}
.step { position: relative; padding-top: calc(var(--u) * 3); }
.step::before {
  content: ""; position: absolute; inset: 0 0 auto;
  height: calc(var(--u) * .5); background: var(--legend);
  transform-origin: left;
}
.step__num {
  display: inline-grid; place-items: center;
  width: calc(var(--u) * 6); height: calc(var(--u) * 6);
  background: var(--legend); color: var(--sign);
  border-radius: var(--radius-plate);
  font-size: var(--step-2); font-weight: 900; line-height: 1;
  padding-top: 4px;
}
.step h3 { margin-top: calc(var(--u) * 2); font-size: var(--step-2); font-weight: 900; }
.step p { margin-top: var(--u); color: var(--legend-2); max-width: 32ch; }
.step__arrow { padding-top: calc(var(--u) * 5); }
.step__arrow svg { width: calc(var(--u) * 5); height: calc(var(--u) * 5); color: var(--legend); }

/* Los pasos se trazan 1 → 2 → 3 al entrar en pantalla (script.js añade .steps--draw) */
@media (prefers-reduced-motion: no-preference) {
  .steps--draw .step::before { transform: scaleX(0); }
  .steps--draw .step__arrow { opacity: 0; translate: calc(var(--u) * -1.5) 0; }
  .steps--draw.is-drawn .step::before {
    transform: none;
    transition: transform .5s cubic-bezier(.5, 0, .2, 1) calc(var(--k, 0) * 450ms);
  }
  .steps--draw.is-drawn .step__arrow {
    opacity: 1; translate: 0 0;
    transition: opacity .3s linear calc(var(--k, 0) * 450ms + 320ms),
                translate .45s var(--ease-out) calc(var(--k, 0) * 450ms + 320ms);
  }
}

/* Opiniones */
.score {
  display: grid; grid-template-columns: 1fr auto; align-items: end;
  gap: var(--u) calc(var(--u) * 4);
  padding-bottom: calc(var(--u) * 4);
  border-bottom: calc(var(--u) * .5) solid var(--sign);
}
.score h2 { font-size: var(--step-3); font-weight: 900; color: var(--sign); }
.score__value { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: end; }
.score__num { font-size: var(--step-4); font-weight: 900; line-height: 1; color: var(--sign); }
.score__stars { display: flex; gap: 2px; color: var(--sign); }
.score__stars svg { width: 22px; height: 22px; }
.score__count { margin-top: 4px; font-weight: 700; color: var(--ink-2); }
.score .textlink { margin-top: 0; justify-self: start; }

.reviews {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 calc(var(--u) * 6);
}
.review {
  padding-block: calc(var(--u) * 4);
  border-bottom: 2px solid var(--rule);
  display: flex; flex-direction: column; justify-content: space-between; gap: calc(var(--u) * 2);
}
.review blockquote p {
  font-size: var(--step-1); line-height: 1.45; font-weight: 500;
}
.review blockquote p::before { content: "«"; color: var(--sign); font-weight: 900; }
.review blockquote p::after { content: "»"; color: var(--sign); font-weight: 900; }
.review__by { font-weight: 800; color: var(--ink-2); font-size: var(--step--1); letter-spacing: .02em; }

/* Preguntas */
.faq { border-top: calc(var(--u) * .5) solid var(--sign); max-width: 900px; }
.faq details { border-bottom: 2px solid var(--rule); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 3);
  min-height: 44px;
  padding-block: calc(var(--u) * 2.5);
  font-size: var(--step-1); font-weight: 800; line-height: 1.3;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  border-right: 3px solid var(--sign); border-bottom: 3px solid var(--sign);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .25s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq summary:hover { color: var(--sign); }
.faq details p { padding-bottom: calc(var(--u) * 3); max-width: 65ch; color: var(--ink-2); }
/* Apertura suave donde el navegador lo permite; en el resto se abre de golpe */
@media (prefers-reduced-motion: no-preference) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0; overflow-y: clip;
    transition: block-size .3s var(--ease-out), content-visibility .3s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}
.faq a { color: var(--sign); font-weight: 800; }

/* ---------- Contacto ---------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: calc(var(--u) * 6);
  align-items: start;
}
.form {
  background: var(--paper); color: var(--ink);
  border-radius: calc(var(--u) * 2);
  padding: calc(var(--u) * 5);
  display: grid; gap: calc(var(--u) * 3);
}
.field { display: grid; gap: 6px; }
.field label { font-weight: 800; }
.field__opt { font-weight: 600; color: var(--ink-2); }
.field input, .field textarea {
  font: inherit; color: var(--ink);
  width: 100%;
  min-height: 52px;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  background: var(--paper);
  border: 2px solid #7f97b5;
  border-radius: var(--radius-plate);
  caret-color: var(--sign);
  transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.45; }
.field input:hover, .field textarea:hover { border-color: var(--sign); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--sign);
  box-shadow: 0 0 0 4px rgba(23, 97, 176, .25);
}
.field [aria-invalid="true"] { border-color: var(--error); }
.field__hint { font-size: var(--step--1); color: var(--ink-2); }
.field__error, .form .field__error { font-size: var(--step--1); font-weight: 700; color: var(--error); }

.check {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: calc(var(--u) * 1.5);
  min-height: 48px;
}
.check input {
  appearance: none; margin: 0;
  width: 28px; height: 28px;
  border: 2px solid #7f97b5; border-radius: 6px; background: var(--paper);
  display: grid; place-items: center; cursor: pointer;
}
.check input::after {
  content: ""; width: 8px; height: 14px; margin-top: -3px;
  border-right: 3px solid var(--paper); border-bottom: 3px solid var(--paper);
  transform: rotate(45deg) scale(0);
  transition: transform .15s var(--ease-out);
}
.check input:checked { background: var(--sign); border-color: var(--sign); }
.check input:checked::after { transform: rotate(45deg) scale(1); }
.check input[aria-invalid="true"] { border-color: var(--error); }
.check label { cursor: pointer; padding-block: var(--u); }
.check a { color: var(--sign); font-weight: 800; }

.submit {
  font: inherit; font-weight: 900; font-size: var(--step-1);
  min-height: 60px; width: 100%;
  border: 0; border-radius: var(--radius-plate);
  background: var(--sign); color: var(--legend);
  cursor: pointer;
  transition: background-color .2s var(--ease-out);
}
.submit:hover { background: var(--sign-deep); }
.submit:disabled { cursor: progress; background: #6f8fb6; }
.submit { position: relative; }
/* Enviando: un trazo blanco recorre la placa mientras se espera la respuesta */
.submit.is-sending::after {
  content: ""; position: absolute;
  left: calc(var(--u) * 3); right: calc(var(--u) * 3); bottom: var(--u);
  height: 3px; background: var(--legend);
  animation: sending 1.2s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes sending {
  0% { transform: scaleX(0); transform-origin: left; }
  50% { transform: scaleX(1); transform-origin: left; }
  50.01% { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

.form__result:empty { display: none; }
.form__result {
  border-radius: var(--radius-plate);
  padding: calc(var(--u) * 2.5);
  font-weight: 700;
}
@media (prefers-reduced-motion: no-preference) {
  .form__result:not(:empty) { animation: result-in .4s var(--ease-out); }
  @keyframes result-in { from { opacity: 0; transform: translateY(var(--u)); } }
}
.form__result[data-state="ok"] { background: #e3f4ea; color: var(--ok); border: 2px solid var(--ok); }
.form__result[data-state="error"] { background: #fdecea; color: var(--error); border: 2px solid var(--error); }
.form__result strong { display: block; font-size: var(--step-1); font-weight: 900; }
.form__result a { color: inherit; font-weight: 900; }

.direct { display: grid; gap: 0; }
.direct__row {
  display: grid; grid-template-columns: calc(var(--u) * 4) 1fr; align-items: center;
  gap: calc(var(--u) * 2);
  padding-block: calc(var(--u) * 2);
  border-bottom: 2px solid var(--rule-on-sign);
  text-decoration: none;
}
.direct__row:first-child { border-top: 2px solid var(--rule-on-sign); }
.direct__row svg { width: 28px; height: 28px; }
.direct__row strong { display: block; font-size: var(--step-1); font-weight: 900; line-height: 1.2; }
.direct__row small { font-size: var(--step--1); color: var(--legend-2); font-weight: 600; }
.direct__row:hover strong { text-decoration: underline; }
.direct__row--call strong { font-size: var(--step-2); }
.direct__row--call svg { color: var(--act); }
.direct__mail { overflow-wrap: anywhere; font-size: var(--step-0) !important; }

.hours { margin-top: calc(var(--u) * 3); border-collapse: collapse; width: 100%; }
.hours caption { text-align: left; font-weight: 900; font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; padding-bottom: var(--u); }
.hours th, .hours td { padding: var(--u) 0; border-top: 1px solid var(--rule-on-sign); text-align: left; font-weight: 600; }
.hours td { text-align: right; font-weight: 800; }
.hours__urgent th, .hours__urgent td { color: var(--legend); font-weight: 900; }
.hours__urgent th::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--act); margin-right: var(--u); }

/* ---------- Pie ---------- */
.footer { background: var(--sign); color: var(--legend); padding-block: calc(var(--u) * 6); border-top: calc(var(--u) * .5) solid var(--legend); }
.footer__inner { display: grid; grid-template-columns: 1fr auto; gap: calc(var(--u) * 3) calc(var(--u) * 6); align-items: center; }
.footer__id { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.footer__id p { font-size: var(--step--1); color: var(--legend-2); }
.footer__links { display: flex; flex-wrap: wrap; gap: 0 calc(var(--u) * 3); }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: var(--step--1); }
.footer__links a:hover { color: var(--act); }
.footer__copy { grid-column: 1 / -1; font-size: var(--step--1); color: var(--legend-2); order: 4; }
.footer__links--services { grid-column: 1 / -1; order: 3; padding-top: calc(var(--u) * 2); border-top: 2px solid var(--rule-on-sign); }

/* Barra fija de móvil */
.callbar { display: none; }

/* ==========================================================
   Animaciones en bucle: base común (botón de pausa, corriente, stepper)
   ========================================================== */

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Botón de pausa: discreto, solo un icono pequeño en el tono secundario (4,9:1 sobre
   la chapa) en una esquina vacía del cartel. La zona de toque sigue midiendo 44 px y
   el nombre («Pausar…» / «Reanudar…») va oculto para lectores de pantalla. */
.anim-pause {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  color: var(--legend-2); background: none; border: 0; border-radius: 4px;
  cursor: pointer;
  transition: color .2s var(--ease-out);
}
.anim-pause:hover { color: var(--legend); }
.anim-pause[hidden] { display: none; }
.anim-pause svg { width: 14px; height: 14px; }
.anim-pause__play, .anim-pause.is-paused .anim-pause__bars { display: none; }
.anim-pause.is-paused .anim-pause__play { display: block; }

/* Corriente: puntos que avanzan por el cable, del principio al final del trazo.
   Periodo de 18 unidades; .flow--back la hace ir al revés. */
.flow {
  fill: none; stroke: var(--legend); stroke-linecap: round;
  stroke-dasharray: .01 17.99;
  animation: flow-run .9s linear infinite;
  pointer-events: none;
}
.flow--back { animation-direction: reverse; }
@keyframes flow-run { to { stroke-dashoffset: -18; } }

/* Sin JS no hay reproductor: la corriente se queda quieta y la pausa sobra */
html:not(.js) .flow { animation: none; }
html:not(.js) .anim-pause { display: none; }

/* Fuera de pantalla, en pausa o con la pestaña oculta, todo se queda quieto */
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after {
  animation-play-state: paused !important;
}

/* Stepper sincronizado: cada paso es un botón con su filete de progreso
   (--p de 0 a 1 lo pone el JS); el paso en curso lleva aria-current="step" */
.anim-steps {
  display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: calc(var(--u) * 3);
}
.anim-steps button {
  position: relative; display: grid; align-content: start; gap: var(--u);
  width: 100%; min-height: 44px; padding: calc(var(--u) * 2.5) 0 var(--u);
  background: none; border: 0; color: var(--legend); font: inherit; text-align: left;
  cursor: pointer;
}
.anim-steps button::before, .anim-steps button::after {
  content: ""; position: absolute; inset: 0 0 auto;
  height: calc(var(--u) * .5); background: var(--rule-on-sign);
}
.anim-steps button::after { background: var(--legend); transform-origin: left; transform: scaleX(var(--p, 0)); }
.anim-steps button:focus-visible { outline-offset: 6px; }
.anim-steps__name { font-size: var(--step-1); font-weight: 900; line-height: 1.1; color: var(--legend-2); transition: color .2s var(--ease-out); }
.anim-steps__text { font-size: var(--step--1); font-weight: 600; color: var(--legend-2); max-width: 36ch; }
.anim-steps button[aria-current="step"] .anim-steps__name { color: var(--legend); }
.anim-steps button:hover .anim-steps__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }

/* ---------- Damos servicio en: el cartel de destinos es un esquema de la zona ----------
   La corriente sale de Arcade y enciende cada municipio cuando le llega; al pulsar
   uno se ilumina su ruta desde Arcade. Los municipios son botones dentro del SVG. */
.zone-map__svg { width: 100%; height: auto; }

.zone-water path { fill: var(--sign-deep); }
.zone-water text { fill: var(--legend-2); font-size: 18px; font-weight: 700; letter-spacing: .02em; }

.zone-cable__line {
  fill: none; stroke: var(--legend); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; opacity: .4;
  transition: opacity .3s var(--ease-out), stroke-width .3s var(--ease-out);
}
.zone-cable .flow { stroke-width: 5; transition: opacity .3s linear, stroke .2s linear; }

.zone-base__mark { fill: var(--sign); stroke: var(--legend); stroke-width: 5; }
.zone-base__core { fill: var(--legend); }
.zone-node { cursor: pointer; transition: opacity .3s var(--ease-out); }
.zone-node:focus { outline: none; }
.zone-node__hit { fill: transparent; }
.zone-node:focus-visible .zone-node__hit { stroke: var(--act); stroke-width: 4; }
.zone-node__mark { fill: var(--legend); stroke: var(--legend); stroke-width: 4; }
.zone-node__plate { fill: var(--legend); opacity: 0; transition: opacity .2s var(--ease-out); }
.zone-name {
  fill: var(--legend); font-size: 22px; font-weight: 800;
  paint-order: stroke; stroke: var(--sign); stroke-width: 6px; stroke-linejoin: round;
  transition: fill .2s var(--ease-out);
}
.zone-name--base { font-size: 26px; font-weight: 900; }

/* Un municipio elegido: su ruta desde Arcade se enciende, el resto se apaga */
.zone-map.has-choice .zone-cable:not(.is-lit) .zone-cable__line { opacity: .16; }
.zone-map.has-choice .zone-cable:not(.is-lit) .flow { opacity: 0; }
.zone-cable.is-lit .zone-cable__line { opacity: 1; stroke-width: 11; }
.zone-cable.is-lit .flow { stroke: var(--sign); }
.zone-map.has-choice .zone-node:not(.is-chosen):not(.is-route) { opacity: .45; }
.zone-node:hover .zone-name { text-decoration: underline; text-decoration-thickness: 2px; }
.zone-node.is-chosen .zone-node__plate { opacity: 1; }
.zone-node.is-chosen .zone-name { fill: var(--sign); stroke: none; }

/* La pausa va en la esquina de abajo a la derecha del esquema, que está vacía;
   la frase del pie cambia con el municipio elegido */
.zone-map { position: relative; }
.zone-map .anim-pause { position: absolute; right: 4px; bottom: 4px; }
.dest__foot.is-chosen { font-weight: 800; color: var(--legend); }

/* Entrada: la corriente sale de Arcade y recorre cada cable a velocidad constante;
   cada municipio se enciende como un fluorescente cuando le llega. El JS pone en cada
   cable su salida (--t0) y su duración (--dur), y en cada municipio su llegada (--on).
   Son animaciones de una pasada (fill backwards): no pisan las transiciones de la
   selección y, si alguien elige un municipio a mitad, se terminan con finish(). */
@media (prefers-reduced-motion: no-preference) {
  .zone-map--waiting .zone-cable__line { stroke-dashoffset: 1; }
  .zone-map--waiting :is(.flow, .zone-base__core) { opacity: 0; }
  .zone-map--waiting .zone-node__mark { fill: var(--sign); }
  .zone-map--waiting .zone-node .zone-name { opacity: .4; }

  .zone-map.is-drawing .zone-base__core { animation: zone-lamp .8s steps(1, end) .1s backwards; }
  .zone-map.is-drawing .zone-cable__line {
    animation: zone-draw var(--dur) linear var(--t0) backwards,
               zone-hot calc(var(--dur) + 1.2s) linear var(--t0) backwards;
  }
  .zone-map.is-drawing .zone-node__mark { animation: zone-mark-on .8s steps(1, end) var(--on) backwards; }
  .zone-map.is-drawing .zone-node .zone-name { animation: zone-name-on .8s steps(1, end) var(--on) backwards; }
  .zone-map.is-drawing .flow {
    animation: flow-run .9s linear infinite,
               zone-appear .6s linear calc(var(--t0) + var(--dur) + .6s) backwards;
  }
  @keyframes zone-draw { from { stroke-dashoffset: 1; } }
  /* Mientras pasa la corriente, el cable va en blanco pleno; luego vuelve a su tono */
  @keyframes zone-hot { from, 80% { opacity: 1; } }
  @keyframes zone-appear { from { opacity: 0; } }
  /* El mismo arranque de fluorescente que la lámpara de estado (lamp-on) */
  @keyframes zone-lamp { 0%, 30%, 55% { opacity: 0; } 20%, 45%, 70%, 100% { opacity: 1; } }
  @keyframes zone-mark-on { 0%, 30%, 55% { fill: var(--sign); } 20%, 45%, 70%, 100% { fill: var(--legend); } }
  @keyframes zone-name-on { 0%, 30%, 55% { opacity: .4; } 20%, 45%, 70%, 100% { opacity: 1; } }
}

@media (max-width: 760px) {
  .zone-name { font-size: 30px; stroke-width: 8px; }
  .zone-name--base { font-size: 32px; }
  .zone-water text { display: none; }
}

/* ---------- Placas solares: por dónde va la energía de día y de noche ---------- */
.energy, .breakers {
  max-width: 920px;
  margin-top: calc(var(--u) * 5);
  padding: calc(var(--u) * 2);
  background: var(--sign); color: var(--legend);
  border-radius: calc(var(--u) * 4);
}
.energy__frame, .breakers__frame {
  border: var(--filete) solid var(--legend);
  border-radius: var(--radius-sign);
  padding: calc(var(--u) * 4) calc(var(--u) * 5) calc(var(--u) * 3);
}
.energy-scene { width: 100%; height: auto; }
.energy-scene--tall { display: none; max-width: 360px; margin-inline: auto; }

.energy-icon { fill: none; stroke: var(--legend); stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }
.energy-icon .energy-solid { fill: var(--legend); stroke: none; }
.energy-wheel { fill: var(--sign); }
.energy-bar { fill: var(--legend); stroke: none; opacity: .22; transition: opacity .2s linear; }
.energy-bar.is-on { opacity: 1; }
.energy-window { fill: var(--sign); }
.energy-windows.is-lit .energy-window { fill: var(--legend); }
.energy-label { fill: var(--legend); font-size: 30px; font-weight: 900; }
.energy-scene--tall .energy-label { font-size: 26px; }
/* En el dibujo compacto los iconos van a escala .62: trazo más grueso para que se vean igual */
.energy-scene--tall .energy-icon { stroke-width: 9; }
.energy__caption { display: none; }

.energy-sky { fill: var(--legend); transition: opacity .5s linear; }
.energy-sky__cut { fill: var(--sign); }
.energy[data-phase="day"] [data-sky="moon"],
.energy[data-phase="night"] [data-sky="sun"] { opacity: 0; }

/* Cable apagado: fino y tenue. Encendido: grueso y blanco, con la corriente en azul */
.energy-line {
  fill: none; stroke: var(--legend); stroke-width: 6; stroke-linecap: round; opacity: .3;
  transition: opacity .4s linear, stroke-width .3s var(--ease-out);
}
.energy .flow { stroke: var(--sign); stroke-width: 6; opacity: 0; transition: opacity .4s linear; }
.energy[data-phase="day"] [data-cable] .energy-line,
.energy[data-phase="night"] [data-cable="bc"] .energy-line { opacity: 1; stroke-width: 14; }
.energy[data-phase="day"] [data-cable] .flow,
.energy[data-phase="night"] [data-cable="bc"] .flow { opacity: 1; }

.energy__frame { position: relative; }
.energy__foot { margin-top: calc(var(--u) * 3); }
.energy__frame > .anim-pause { position: absolute; right: 4px; bottom: 4px; }

@media (max-width: 640px) {
  .energy, .breakers { padding: var(--u); border-radius: calc(var(--u) * 3); }
  .energy__frame, .breakers__frame { border-width: 5px; border-radius: calc(var(--u) * 2); padding: calc(var(--u) * 3) calc(var(--u) * 2.5); }
  .energy-scene--wide { display: none; }
  .energy-scene--tall { display: block; }
  /* Pasos con solo el nombre y, debajo, la frase del paso activo: así el esquema
     entero cabe en la pantalla del móvil */
  .energy .anim-steps { gap: calc(var(--u) * 2); }
  .energy .anim-steps__text { display: none; }
  .energy__caption {
    display: block; min-height: calc(3lh);
    margin-top: var(--u); padding-right: calc(var(--u) * 3);
    font-size: var(--step--1); font-weight: 600; line-height: 1.5; color: var(--legend-2);
  }
  .energy[data-phase="day"] [data-cable] .energy-line,
  .energy[data-phase="night"] [data-cable="bc"] .energy-line { stroke-width: 10; }
}
/* En la página, el esquema parte el texto de .prose en dos */
.prose.prose--more > h2:first-child { margin-top: calc(var(--u) * 7); }
.prose.prose--more > p:first-child { margin-top: calc(var(--u) * 4); }

/* Sobre la chapa azul el foco va en amarillo, no en el tinta de las bandas blancas */
.energy :focus-visible, .breakers :focus-visible { outline-color: var(--act); }

/* ---------- Urgencias: el cuadro eléctrico, paso a paso ----------
   Guía: el cuadro hace solo los cuatro pasos (línea de tiempo en script.js).
   «Inténtalo tú»: las palancas pasan a ser interruptores que acciona el visitante.
   Comparte la chapa y el marco con el esquema de placas solares. */
.breakers { max-width: 1120px; }
.breakers__frame {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: calc(var(--u) * 5); align-items: start;
  padding-bottom: calc(var(--u) * 6);
}
.breakers__frame > .anim-pause { position: absolute; right: 4px; bottom: 4px; }
.breakers-svg { display: block; width: 100%; height: auto; }

/* Cable sin corriente: fino y tenue. Con corriente: grueso y blanco, con los puntos
   en azul, como en el esquema solar. La luz se va y vuelve de golpe, sin fundidos */
.breakers-line { fill: none; stroke: var(--legend); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .3; }
.breakers .flow { stroke: var(--sign); stroke-width: 6; opacity: 0; }
.breakers .is-lit > .breakers-line { opacity: 1; stroke-width: 14; }
.breakers .is-lit > .flow { opacity: 1; }
.breakers-icon { fill: none; stroke: var(--legend); stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; opacity: .3; }
.breakers-icon .breakers-solid { fill: var(--legend); stroke: none; }
.breakers-circuit.is-lit .breakers-icon { opacity: 1; }

.breakers-box { fill: none; stroke: var(--legend); stroke-width: 6; }
.breakers-module { fill: var(--sign-deep); stroke: var(--legend); stroke-width: 5; }
.breakers-slot { fill: var(--sign); stroke: var(--legend-2); stroke-width: 3; }
.breakers-lever { fill: var(--legend); }
.breakers-test { fill: none; stroke: var(--legend); stroke-width: 4; }
.breakers-test__t { fill: var(--legend); font-size: 20px; font-weight: 900; }
.breakers-label { fill: var(--legend); font-size: 30px; font-weight: 900; }
/* El térmico con la avería queda señalado con un recuadro (el amarillo es solo para llamar) */
.breakers-mark { fill: none; stroke: var(--legend); stroke-width: 5; stroke-dasharray: 14 10; opacity: 0; pointer-events: none; }
.breakers-mark.is-marked { opacity: 1; }

/* Interruptores: solo se pueden tocar en «Inténtalo tú». La zona de toque es el
   módulo con medio hueco a cada lado: 104 unidades, 44 px en un móvil de 360 px */
.breakers-hit { fill: transparent; }
.breakers-switch:focus { outline: none; }
.breakers-switch:focus-visible .breakers-hit { stroke: var(--act); stroke-width: 4; }
.breakers.is-trying .breakers-switch { cursor: pointer; }
.breakers.is-trying .breakers-switch:hover .breakers-module { fill: var(--sign); }
.breakers.is-trying .breakers-lever { transition: transform .18s var(--ease-out); }
.breakers.is-tripping [data-switch="0"] .breakers-lever { transition: transform .06s linear; }
@media (prefers-reduced-motion: no-preference) {
  /* Al dar corriente a un circuito, su aparato arranca como un fluorescente */
  .breakers.is-trying .breakers-circuit.is-lit .breakers-icon { animation: lamp-on .8s steps(1, end) both; }
}
/* Es un gesto de una sola pasada: la pausa no lo congela a medias */
.breakers[data-motion="off"] .breakers-icon { animation-play-state: running !important; }

.breakers__invite { margin-top: calc(var(--u) * 2); font-size: var(--step--1); font-weight: 600; color: var(--legend-2); max-width: 46ch; text-wrap: pretty; }
.breakers__coach { margin-top: calc(var(--u) * 2); font-weight: 700; line-height: 1.45; color: var(--legend); text-wrap: pretty; }
.breakers__coach:empty { margin: 0; }
.breakers.is-trying .breakers__coach { min-height: 3lh; }
.breakers__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--u) calc(var(--u) * 2);
  margin-top: calc(var(--u) * 2);
}
.breakers__actions > [hidden] { display: none; }
.breakers__actions .linkplate { font: inherit; font-weight: 800; color: var(--legend); background: none; cursor: pointer; }
.breakers__actions .linkplate:hover { background: var(--legend); color: var(--sign); }
.breakers__actions .textlink { margin-top: 0; }

/* Pasos en columna: cada uno con su filete de progreso arriba y su frase siempre visible */
.anim-steps--list { grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 1.5); }
.anim-steps--list .anim-steps__text { max-width: none; }

@media (max-width: 900px) {
  .breakers__frame { grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 2); }
  /* En una columna, el dibujo (y el aviso del simulador) se queda arriba de la
     pantalla mientras se leen los pasos, que pasan por debajo. Para que lo haga
     en toda la figura, sus piezas cuelgan directamente del marco */
  .breakers__scene { display: contents; }
  .breakers__invite, .breakers__actions { margin-top: 0; }
  .breakers__steps { margin-top: var(--u); }
  .breakers__drawing {
    position: sticky; top: 0; z-index: 1;
    margin-top: calc(var(--u) * -1); padding-block: var(--u);
    background: var(--sign);
    /* Los pasos se funden al pasar por debajo, en vez de cortarse en seco */
    box-shadow: 0 12px 10px -4px var(--sign);
  }
  .breakers-svg { max-width: 520px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .breakers__frame { padding: calc(var(--u) * 2.5) calc(var(--u) * 2) calc(var(--u) * 6); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; }
  .dest { max-width: 640px; }
  .steps { grid-template-columns: 1fr; }
  .step__arrow { padding: 0; }
  .step__arrow svg { transform: rotate(90deg); width: calc(var(--u) * 4); height: calc(var(--u) * 4); }
  .contact { grid-template-columns: 1fr; }
}
@media (max-width: 1080px) and (prefers-reduced-motion: no-preference) {
  .steps--draw .step__arrow { translate: 0 calc(var(--u) * -1.5); }
}

@media (max-width: 760px) {
  .sign { padding: var(--u); }
  .sign__frame { padding: calc(var(--u) * 2.5) calc(var(--u) * 2.5) calc(var(--u) * 4); border-width: 5px; border-radius: calc(var(--u) * 2); }
  .sign--band .sign__frame { padding-block: calc(var(--u) * 7); }
  .sign--band .wrap { width: calc(100% - calc(var(--u) * 5)); }
  .wrap, .wrap--narrow { width: calc(100% - calc(var(--u) * 4)); }

  .plate--logo img { height: calc(var(--u) * 5.5); }
  .nav { position: relative; }
  .nav__toggle {
    display: inline-flex; align-items: center; min-height: 48px; padding: 0 calc(var(--u) * 2);
    font: inherit; font-weight: 800; color: var(--legend);
    background: transparent; border: 3px solid var(--legend); border-radius: var(--radius-plate);
    cursor: pointer;
  }
  .nav__toggle[aria-expanded="true"] { background: var(--legend); color: var(--sign); }
  .js .nav__list { display: none; }
  .js .nav__list.is-open {
    display: grid; gap: 0;
    position: absolute; right: 0; top: calc(100% + var(--u)); z-index: 20;
    min-width: 240px;
    background: var(--legend); color: var(--sign);
    border-radius: var(--radius-plate);
    padding: var(--u) calc(var(--u) * 2);
    box-shadow: 0 12px 32px rgba(10, 30, 60, .35);
    transform-origin: top right;
    animation: menu-in .22s var(--ease-out);
  }
  @keyframes menu-in { from { opacity: 0; transform: translateY(calc(var(--u) * -1)) scaleY(.96); } }
  .nav__list a { display: flex; align-items: center; min-height: 48px; font-size: var(--step-0); }
  .nav__list li + li { border-top: 1px solid var(--rule); }
  html:not(.js) .nav__toggle { display: none; }
  html:not(.js) .nav__list { flex-wrap: wrap; gap: 0 calc(var(--u) * 2); }

  .hero { margin-top: calc(var(--u) * 4); gap: calc(var(--u) * 5); }
  .hero__call { flex-direction: column; }
  .callplate, .hero__call .linkplate { width: 100%; justify-content: center; }
  .callplate { align-items: flex-start; }
  .hero__plan { flex-direction: column; align-items: stretch; padding-top: calc(var(--u) * 3); border-top: calc(var(--u) * .5) solid var(--legend); }
  .hero__plan .linkplate { justify-content: center; min-height: 52px; }
  .dest__list li { padding-inline: calc(var(--u) * 2); }
  .credentials { flex-direction: column; gap: var(--u); margin-top: calc(var(--u) * 4); }
  .credentials li + li::before { display: none; }

  .band { padding-block: calc(var(--u) * 8); }
  .service { grid-template-columns: 1fr; padding-block: calc(var(--u) * 4); }
  .service__links--guide .linkplate--sign { width: 100%; justify-content: center; }
  .service__name { display: grid; grid-template-columns: auto 1fr; gap: 0 calc(var(--u) * 2); align-items: center; }
  .service__name svg { margin: 0; grid-row: span 2; width: calc(var(--u) * 5); height: calc(var(--u) * 5); }
  .service__tag { margin-top: 4px; justify-self: start; }

  .score { grid-template-columns: 1fr; }
  .score__value { grid-column: 1; grid-row: auto; justify-items: start; margin-top: calc(var(--u) * 2); }
  .reviews { grid-template-columns: 1fr; }

  .form { padding: calc(var(--u) * 3); }

  .footer { padding-bottom: calc(var(--u) * 14); }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__id { flex-direction: column; align-items: flex-start; }

  .callbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--u);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: var(--u) var(--u) calc(var(--u) + env(safe-area-inset-bottom));
    background: var(--sign);
    border-top: 3px solid var(--legend);
    transition: transform .3s var(--ease-out), visibility .3s;
  }
  .callbar.is-hidden { transform: translateY(110%); visibility: hidden; }
  .callbar a {
    display: flex; align-items: center; justify-content: center; gap: var(--u);
    min-height: 56px; border-radius: var(--radius-plate);
    font-weight: 900; font-size: var(--step-1); text-decoration: none;
  }
  .callbar svg { width: 22px; height: 22px; }
  .callbar__call { background: var(--act); color: var(--ink); }
  .callbar__wa { background: var(--legend); color: var(--sign); }
}

/* ---------- Páginas de servicio ---------- */
.crumbs { margin-top: calc(var(--u) * 4); font-size: var(--step--1); font-weight: 700; color: var(--legend-2); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--u); }
.crumbs li + li::before { content: "/"; margin-right: var(--u); color: var(--rule-on-sign); }
.crumbs a { color: var(--legend); }
.hero--page { margin-top: calc(var(--u) * 3); }
.hero--page .hero__title { font-size: clamp(2.25rem, 1.2rem + 3vw, 4rem); }
.hero--page .hero__title span { white-space: normal; }

.prose { max-width: 64ch; }
.prose h2 { font-size: var(--step-2); font-weight: 900; color: var(--sign); margin-top: calc(var(--u) * 7); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--step-1); font-weight: 800; margin-top: calc(var(--u) * 4); }
.prose p { margin-top: calc(var(--u) * 1.5); color: var(--ink); }
.prose ul { margin-top: calc(var(--u) * 2); border-top: 1px solid var(--rule); }
.prose li { position: relative; padding: var(--u) 0 var(--u) calc(var(--u) * 4); border-bottom: 1px solid var(--rule); }
.prose li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--u) * 1.85);
  width: 14px; height: 10px; background: var(--sign);
  clip-path: polygon(0 30%, 55% 30%, 55% 0, 100% 50%, 55% 100%, 55% 70%, 0 70%);
}
.prose strong { font-weight: 800; }
.prose a { color: var(--sign); font-weight: 800; }
.callout {
  margin-top: calc(var(--u) * 4); padding: calc(var(--u) * 3);
  border: calc(var(--u) * .5) solid var(--sign); border-radius: var(--radius-plate);
}
.callout h3 { margin-top: 0; color: var(--sign); }
.callout p:first-of-type { margin-top: var(--u); }

.others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: calc(var(--u) * .5) solid var(--sign); }
.others a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: calc(var(--u) * 2);
  min-height: 72px; padding: calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 2) 0;
  border-bottom: 2px solid var(--rule);
  font-size: var(--step-1); font-weight: 900; color: var(--sign); text-decoration: none;
}
.others a + a { padding-left: calc(var(--u) * 3); border-left: 2px solid var(--rule); }
.others svg { width: 28px; height: 28px; }
.others a:hover span { text-decoration: underline; }
@media (max-width: 760px) {
  .others { grid-template-columns: 1fr; }
  .others a + a { padding-left: 0; border-left: 0; }
}

/* ---------- Trabajos y noticias (generados desde el bot) ---------- */
.hero--single { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.works {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 5) calc(var(--u) * 4);
  border-top: calc(var(--u) * .5) solid var(--sign); padding-top: calc(var(--u) * 4);
}
.work__link { display: block; text-decoration: none; color: inherit; }
.work__media {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius-plate); background: var(--pale);
}
.work__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease-out), opacity .4s var(--ease-out); }
/* Las fotos aparecen al terminar de cargar (script.js marca las pendientes) */
.gallery__item img { transition: opacity .4s var(--ease-out); }
img.is-loading { opacity: 0; }
.work__link:hover .work__media img { transform: scale(1.03); }
.work__placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: var(--sign); color: var(--legend); }
.work__placeholder svg { width: calc(var(--u) * 9); height: calc(var(--u) * 9); }
.work__title { margin-top: calc(var(--u) * 2); font-size: var(--step-1); font-weight: 900; color: var(--sign); line-height: 1.2; }
.work__link:hover .work__title { text-decoration: underline; text-decoration-thickness: 2px; }
.work__meta { margin-top: 6px; font-size: var(--step--1); font-weight: 700; color: var(--ink-2); }
.work__sep { display: inline-block; width: 4px; height: 4px; margin-inline: 2px; background: currentColor; vertical-align: .25em; }

.gallery {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 1.5);
  margin-bottom: calc(var(--u) * 6);
}
.gallery__item { margin: 0; overflow: hidden; border-radius: var(--radius-plate); background: var(--pale); aspect-ratio: 1; }
.gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
.gallery--single { grid-template-columns: minmax(0, 1fr); max-width: 960px; }
.gallery--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery--pair .gallery__item:first-child { grid-column: auto; grid-row: auto; }
.gallery--single .gallery__item { aspect-ratio: auto; }
.gallery__item a { display: block; height: 100%; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery--single .gallery__item img { height: auto; }

.article { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: calc(var(--u) * 6); align-items: start; }
.facts { border-top: calc(var(--u) * .5) solid var(--sign); }
.facts div { padding-block: calc(var(--u) * 1.5); border-bottom: 2px solid var(--rule); }
.facts dt { font-size: var(--step--1); font-weight: 800; color: var(--ink-2); }
.facts dd { margin: 2px 0 0; font-weight: 900; color: var(--sign); }
.facts a { color: inherit; }
.article__back { margin-top: calc(var(--u) * 4); }
.band--works { border-top: 2px solid var(--rule); }
.empty { max-width: 60ch; font-size: var(--step-1); }
.empty a { color: var(--sign); font-weight: 800; }
.draft-banner {
  margin-bottom: calc(var(--u) * 4); padding: calc(var(--u) * 2) calc(var(--u) * 3);
  background: var(--act); color: var(--ink); font-weight: 800; border-radius: var(--radius-plate);
}

@media (max-width: 1080px) {
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .works { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Páginas legales ---------- */
.legal-top { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); flex-wrap: wrap; }
.legal-body {
  background: var(--paper); color: var(--ink);
  border-radius: calc(var(--u) * 2);
  padding: calc(var(--u) * 6);
  margin-top: calc(var(--u) * 4);
  max-width: 860px;
}
.legal-body h1 { font-size: var(--step-3); font-weight: 900; color: var(--sign); }
.legal-body h2 { font-size: var(--step-1); font-weight: 900; margin-top: calc(var(--u) * 5); }
.legal-body p, .legal-body li { margin-top: calc(var(--u) * 1.5); max-width: 70ch; color: var(--ink-2); }
.legal-body ul { padding-left: calc(var(--u) * 3); list-style: square; }
.legal-body a { color: var(--sign); font-weight: 700; }
.legal-updated { margin-top: var(--u); font-weight: 700; }
.pendiente {
  background: var(--act); color: var(--ink);
  font-weight: 800; padding: 0 4px; border-radius: 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
@media (max-width: 760px) {
  .legal-body { padding: calc(var(--u) * 3); }
}

/* Movimiento reducido: nada se desplaza; los cambios de estado se hacen
   en el sitio y lo que aparece lo hace con un fundido corto */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .callplate:active { transform: none; }
  .work__link:hover .work__media img { transform: none; }
  img.is-loading { opacity: 1; }
  .js .nav__list.is-open, .form__result:not(:empty) { animation: fade-in .2s linear !important; }
  @keyframes fade-in { from { opacity: 0; } }
  .callbar, .callbar.is-hidden { transform: none; }
  .callbar.is-hidden { visibility: hidden; }
}

.dest__list--links a { color: inherit; text-decoration: none; }
.dest__list--links a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.dest__list--links li { position: relative; }
.dest__list--links a::after { content: ""; position: absolute; inset: 0; }