/* ==========================================================================
   Regio Estructural — herrería
   Misma casa, otro taller. Se reutilizan los componentes de site.css y solo
   se reasignan los tokens: grafito en lugar de bosque, latón en lugar de
   verde. El verde de marca queda reservado para el retorno al vivero.
   ========================================================================== */

body.marca-estructural {
  /* La página es oscura de principio a fin, así que la tinta pasa a ser clara */
  --bosque:       #12151A;   /* grafito: barra, pie y fondo general */
  --savia-solida: #1B1F26;   /* superficie secundaria */
  --papel:        #C9CDD4;   /* acero galvanizado */
  --papel-cl:     #E4E7EC;
  --tinta:        #E4E7EC;   /* texto principal */
  --gris:         #A3ABB6;   /* texto secundario */
  --verde:        #C99A3A;   /* el acento pasa a latón */
  --verde-hondo:  #E0B255;
  --oxido:        #C0562F;
  --laton:        #C99A3A;
  --vivero:       #68B04D;   /* único verde: el camino de vuelta */

  --linea:              color-mix(in srgb, #E4E7EC 13%, transparent);
  --linea-firme:        color-mix(in srgb, #E4E7EC 30%, transparent);
  --linea-clara:        color-mix(in srgb, #E4E7EC 13%, transparent);
  --linea-clara-firme:  color-mix(in srgb, #E4E7EC 30%, transparent);

  background: #12151A;
  color: #C9CDD4;
}

/* Ajustes puntuales donde el componente asumía fondo claro */
.marca-estructural .tramo--claro { background: var(--savia-solida); }
.marca-estructural .boton--lleno { background: var(--laton); color: #16110A; }
.marca-estructural .boton--lleno:hover { background: var(--verde-hondo); }
.marca-estructural .campo input,
.marca-estructural .campo select,
.marca-estructural .campo textarea {
  background: color-mix(in srgb, #E4E7EC 7%, transparent);
  color: var(--papel-cl);
}
.marca-estructural .riego__sello { background: var(--savia-solida); }
.marca-estructural .vecina:hover { background: var(--savia-solida); }

/* Vuelta al vivero: la única pieza verde de la página */
.marca-estructural .barra__hermana,
.marca-estructural .pie__estructural {
  border-color: color-mix(in srgb, var(--vivero) 52%, transparent);
  color: var(--vivero);
}
.marca-estructural .barra__hermana:hover,
.marca-estructural .pie__estructural:hover {
  border-color: var(--vivero);
  background: color-mix(in srgb, var(--vivero) 14%, transparent);
  color: #fff;
}
.marca-estructural .barra__enlace::after { background: var(--laton); }
.marca-estructural .pie__lista a:hover { color: var(--laton); }
.marca-estructural .flotante { background: var(--laton); color: #16110A; }
.marca-estructural .flotante:hover { background: var(--verde-hondo); }

/* ---------- Frontispicio del taller -------------------------------------- */
.taller { position: relative; overflow: hidden; border-bottom: 1px solid var(--linea-clara); }
.taller__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .5; filter: grayscale(.35) contrast(1.06);
}
.taller__velo {
  position: absolute; inset: 0;
  background: linear-gradient(102deg, rgba(18,21,26,.96) 0%, rgba(18,21,26,.8) 44%, rgba(18,21,26,.34) 100%);
}
.taller__cuerpo {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: clamp(1.75rem, 4vw, 4rem); align-items: center;
  padding-block: clamp(3.5rem, 10vh, 7rem);
  color: var(--papel-cl);
}
@media (max-width: 960px) { .taller__cuerpo { grid-template-columns: 1fr; } }

.taller__titulo {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.2rem, 5.2vw, 4.2rem);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  line-height: 1.04; letter-spacing: -0.02em;
  max-width: 15ch; margin: 0 0 1.4rem;
}
.taller__titulo em { font-style: normal; color: var(--laton); }
.taller__pie {
  max-width: 46ch; margin: 0 0 2.25rem;
  color: color-mix(in srgb, #E4E7EC 86%, transparent);
  font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.7;
}
.taller__acciones { display: flex; flex-wrap: wrap; gap: .75rem; }

/* La retícula del logotipo, trazada a escala grande */
.reticula { width: 100%; max-width: 360px; margin-inline: auto; overflow: visible; }
.reticula__arista { stroke: color-mix(in srgb, #E4E7EC 55%, transparent); stroke-width: 1.2; fill: none; }
.reticula__marco  { stroke: color-mix(in srgb, var(--laton) 85%, transparent); stroke-width: 1.5; fill: none; }
.reticula__nodo   { fill: #12151A; stroke: var(--laton); stroke-width: 1.5; }

@media (prefers-reduced-motion: no-preference) {
  .reticula__arista, .reticula__marco {
    stroke-dasharray: 900; stroke-dashoffset: 900;
    animation: suelda 1.5s cubic-bezier(.22,.8,.3,1) forwards;
  }
  .reticula__marco { animation-delay: .1s; }
  .reticula__arista { animation-delay: calc(.25s + .06s * var(--i, 0)); }
  .reticula__nodo { opacity: 0; animation: fija .4s ease forwards; animation-delay: calc(1s + .05s * var(--i, 0)); }
  @keyframes suelda { to { stroke-dashoffset: 0; } }
  @keyframes fija { to { opacity: 1; } }
}

/* La galería recupera color al pasar el puntero */
.marca-estructural .galeria img {
  filter: saturate(.78) brightness(.94);
  transition: filter .35s ease;
}
.marca-estructural .galeria img:hover { filter: saturate(1) brightness(1); }