/* Carriles — abstracción del circuito real del fraccionamiento.
   Se usa como fondo de sección: <section class="seccion lanes"> */
.lanes { position: relative; overflow: hidden; }

.lanes::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='400' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23F26722' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M-50 60 C 250 60, 300 200, 600 200 S 950 340, 1250 340'/%3E%3Cpath d='M-50 120 C 250 120, 300 260, 600 260 S 950 400, 1250 400'/%3E%3Cpath d='M-50 0 C 250 0, 300 140, 600 140 S 950 280, 1250 280'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  /* El naranja sobre el plum se apaga muchísimo al mezclarse: a 0.18 daba
     #652E44 — un café sucio, no un naranja. Verificado a ojo: a 0.35 todavía
     lee ladrillo y a 0.45 apenas arranca. 0.55 (#A2472F) es donde por fin lee
     naranja de verdad y los carriles se ven confiados, no turbios. */
  opacity: 0.55;
}

.lanes > * { position: relative; z-index: 1; }

/* Variante para fondo claro: los carriles van en morado */
.lanes--claro::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='400' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%2392488f' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M-50 60 C 250 60, 300 200, 600 200 S 950 340, 1250 340'/%3E%3Cpath d='M-50 120 C 250 120, 300 260, 600 260 S 950 400, 1250 400'/%3E%3Cpath d='M-50 0 C 250 0, 300 140, 600 140 S 950 280, 1250 280'/%3E%3C/g%3E%3C/svg%3E");
  /* Mismo problema al revés: el morado sobre la crema a 0.12 quedaba en un
     rosa pálido invisible. 0.40 lo asienta como morado de verdad sin tapar el
     texto. Verificado a ojo contra la crema. */
  opacity: 0.40;
}

/* Variante para fondo naranja (.bloque-naranja): los carriles van en plum.
   Los carriles default SON naranjas, así que sobre .bloque-naranja
   desaparecerían — de ahí esta tercera variante. Mismo SVG, solo cambia el
   stroke a plum (#46224c, el token --plum; dentro de un data-URI no se puede
   usar var(), por eso va el hex literal escapado como %2346224c). */
.lanes--sobre-naranja::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='400' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%2346224c' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M-50 60 C 250 60, 300 200, 600 200 S 950 340, 1250 340'/%3E%3Cpath d='M-50 120 C 250 120, 300 260, 600 260 S 950 400, 1250 400'/%3E%3Cpath d='M-50 0 C 250 0, 300 140, 600 140 S 950 280, 1250 280'/%3E%3C/g%3E%3C/svg%3E");
  /* Sin override de opacity: hereda el 0.55 del default y ahí ya lee bien.
     Las otras dos variantes sí tuvieron que tunearla porque mezclaban colores
     de valor parecido (naranja sobre plum se apagaba, morado sobre crema se
     desteñía); el plum sobre el naranja es oscuro-sobre-claro con harto
     contraste, así que a 0.55 el carril lee limpio y no compite con el texto
     plum. Comparado a ojo contra 0.40: la diferencia es marginal. Si algún día
     se quiere que los carriles se hundan más, bajarle a 0.40 aquí. */
}