/* ARQUIMSC — capa de guiños (desde la V37, sobre la V36)
   Capa aparte: se carga después de styles.css y solo agrega detalles de trazo.
   Escuadra, compás, damero y el tres. Lo demás queda igual. */

:root {
  --m-trazo: rgba(123, 87, 51, .62);   /* tierra */
  --m-trazo-claro: rgba(209, 220, 114, .7); /* arena */
  --m-l: 15px;   /* largo del brazo de la escuadra */
  --m-g: 1.6px;  /* grosor del trazo */
}

/* ---------- 1. Escuadras: dos esquinas opuestas a 90°, como marcas de plano ---------- */
.fold__btn::after,
.pasos__panel::after {
  content: ""; position: absolute; pointer-events: none;
  inset: 9px 10px 9px 20px;
  --m-c: var(--m-trazo);
  background:
    linear-gradient(var(--m-c), var(--m-c)) top right / var(--m-l) var(--m-g) no-repeat,
    linear-gradient(var(--m-c), var(--m-c)) top right / var(--m-g) var(--m-l) no-repeat,
    linear-gradient(var(--m-c), var(--m-c)) bottom left / var(--m-l) var(--m-g) no-repeat,
    linear-gradient(var(--m-c), var(--m-c)) bottom left / var(--m-g) var(--m-l) no-repeat;
  transition: opacity .25s;
}
.pasos__panel { position: relative; }
.pasos__panel::after { inset: 10px; }
.fold.open > .fold__h .fold__btn::after { --m-c: var(--m-trazo-claro); }

/* ---------- 2. El tres: tres puntos en triángulo (∴) ---------- */
.folds__hint::before,
.pasos__kicker::before {
  content: "∴"; display: inline-block; margin-right: .7em;
  font: 700 1.25em/1 var(--sans); letter-spacing: 0; color: var(--tierra);
  transform: translateY(.06em);
}
:is(.hero, .pageHero, .contact, .section:has(.steps)) .folds__hint::before { color: var(--arena); }

/* ---------- 3. Compás abierto a 33°, con su centro marcado, bajo los títulos de sección ---------- */
.sectionHead .title .mz-fin::after {
  content: ""; display: block; width: 66px; height: 35px; margin-top: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 49'%3E%3Cg fill='none' stroke='%237b5733' stroke-linecap='round'%3E%3Cpath d='M86 46 A80 80 0 0 0 73.1 2.4' stroke-width='3.6'/%3E%3Cpath d='M6 46 H86 M6 46 L73.1 2.4' stroke-width='2' stroke-dasharray='3 4' opacity='.85'/%3E%3C/g%3E%3Ccircle cx='6' cy='46' r='3.8' fill='%237b5733'/%3E%3C/svg%3E") left center / contain no-repeat;
  opacity: .8;
}
.sectionHead--center .title .mz-fin::after { margin-left: auto; margin-right: auto; }

/* ---------- 4. Damero: pavimento casi invisible al pie de Contacto (33 casillas de ancho) ---------- */
.contact { position: relative; isolation: isolate; }
.contact::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: min(300px, 40%); z-index: -1; pointer-events: none;
  background: conic-gradient(rgba(243, 238, 228, .07) 0 25%, transparent 0 50%, rgba(243, 238, 228, .07) 0 75%, transparent 0) left bottom / calc(200% / 33) calc(200vw / 33);
  -webkit-mask-image: linear-gradient(to top, #000 0, transparent 100%);
  mask-image: linear-gradient(to top, #000 0, transparent 100%);
}
@media (max-width: 640px) {
  .contact::before { height: 180px; background-size: calc(200% / 11) calc(200vw / 11); }
}

/* ---------- 5. Dos columnas que enmarcan la franja de valores (solo PC) ---------- */
@media (min-width: 901px) {
  .valuesBand__text { position: relative; padding: 0 0 0 30px; }
  .valuesBand__text::before {
    content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 9px;
    border-left: 1.6px solid rgba(28, 40, 46, .5); border-right: 1.6px solid rgba(28, 40, 46, .5);
  }
}

/* Compás a continuación del título (en la misma línea, al final), trazo algo más grueso */
.sectionHead .title .mz-fin::after {
  display: inline-block; vertical-align: baseline;
  width: 1.25em; height: .67em; margin: 0 0 0 .3em;
}
.sectionHead--center .title .mz-fin::after { margin-left: .3em; margin-right: 0; }

@media (max-width: 900px) { .sectionHead .title .mz-fin::after { width: 1.6em; height: .85em; } }

/* la última palabra y el compás no se separan */
.sectionHead .title .mz-fin { white-space: nowrap; }

/* Columna de la franja de valores también en celular, más finita */
@media (max-width: 900px) {
  .valuesBand__text { position: relative; padding-left: 20px; }
  .valuesBand__text::before {
    content: ""; position: absolute; left: 0; top: .25em; bottom: .25em; width: 6px;
    border-left: 1.4px solid rgba(28, 40, 46, .5); border-right: 1.4px solid rgba(28, 40, 46, .5);
  }
}

/* "También podemos acompañarte en…": el texto se corre a la derecha y la escuadra se acerca al borde, para que no se monten */
.fold--wide > .fold__h .fold__btn { padding-left: clamp(32px, 3.4vw, 44px); }
.fold--wide > .fold__h .fold__btn::after { inset: 9px 10px 9px 10px; }

/* Proyecto y Gestión municipal: el texto se corre a la derecha para dejar aire con la escuadra (igual que "También podemos…") */
.folds--duo > .fold > .fold__h .fold__btn { padding-left: clamp(40px, 3.6vw, 52px); }
.folds--duo > .fold > .fold__h .fold__btn::after { inset: 9px 10px 9px 16px; }