/* BIM INGEZA — Sección típica en ladera de la portada (index.html, fila "Diseño geométrico vial").
   Las líneas se dibujan cuando el dibujo entra en pantalla (js/principal.js le pone .visible). */
/* La fila de diseño vial le da más ancho al dibujo */
.fila-foto:has(.marco-dibujo) { grid-template-columns: 1.45fr 1fr; }
@media (max-width: 960px) { .fila-foto:has(.marco-dibujo) { grid-template-columns: 1fr; } }
.fila-foto .marco-dibujo { background: #fff; border: 1px solid var(--borde); display: grid; place-items: center; aspect-ratio: auto; padding: 10px 6px 8px; }
.seccion-vial { width: 100%; height: 100%; display: block; }
.seccion-vial .sv-rejilla path { stroke: #EEF1F7; stroke-width: 1; fill: none; }
.seccion-vial .sv-area-corte { fill: rgba(224, 49, 49, 0.10); }
.seccion-vial .sv-area-relleno { fill: rgba(47, 158, 68, 0.14); }
.seccion-vial path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.seccion-vial .sv-terreno { stroke: #8C5A3C; stroke-width: 1.4; stroke-dasharray: 0.012 0.008; }
.seccion-vial .sv-corte { stroke: #E03131; stroke-width: 2; }
.seccion-vial .sv-relleno { stroke: #2F9E44; stroke-width: 2; }
.seccion-vial .sv-cuneta { stroke: #0E9FCB; stroke-width: 2; }
.seccion-vial .sv-berma { stroke: #2F6BFF; stroke-width: 3; }
.seccion-vial .sv-calzada { stroke: #14284B; stroke-width: 3.5; }
.seccion-vial .sv-eje { stroke: #E8A400; stroke-width: 1.4; stroke-dasharray: 6 3 1.5 3; }
.seccion-vial .sv-cotas path { stroke: #7A84A3; stroke-width: 1; }
.seccion-vial text { font: 500 12px var(--fuente-mono); fill: #4A5677; text-anchor: middle; }
.seccion-vial text.sv-izq { text-anchor: start; }
.seccion-vial text.sv-der { text-anchor: end; }
.seccion-vial text.sv-chico { font-size: 11px; fill: #7A84A3; }
.seccion-vial text.sv-rojo { fill: #C92A2A; }
.seccion-vial text.sv-verde { fill: #2B8A3E; }
.seccion-vial text.sv-siena { fill: #8C5A3C; }
.seccion-vial text.sv-azul { fill: #0B7FA3; }
.seccion-vial text.sv-rosa { fill: #B0287A; }
.seccion-vial text.sv-gris { fill: #7A84A3; }
.seccion-vial text.sv-titulo { font: 600 13px var(--fuente-mono); letter-spacing: 0.12em; fill: #14284B; }
.seccion-vial text.sv-eje-y { font-size: 10.5px; fill: #7A84A3; text-anchor: end; }
.seccion-vial text.sv-eje-y.sv-izq { text-anchor: start; }
.seccion-vial text.sv-eje-x { font-size: 10.5px; fill: #7A84A3; }
.seccion-vial text.sv-sub { font-size: 10.5px; fill: #7A84A3; }
.seccion-vial .sv-resumen text { font-size: 12.5px; font-weight: 600; }
.seccion-vial .sv-escalones { stroke: #8C5A3C; stroke-width: 1.2; }
.seccion-vial .sv-capa-rodadura { fill: #14284B; }
.seccion-vial .sv-capa-base { fill: #B9C2D6; }
.seccion-vial .sv-capa-subbase { fill: #E2E6EF; }
.seccion-vial .sv-pto-ct { fill: #B0287A; }

/* Dibujo al entrar en pantalla: primero el terreno, luego el corte, la plataforma y el relleno */
.seccion-vial .sv-corte, .seccion-vial .sv-relleno, .seccion-vial .sv-cuneta, .seccion-vial .sv-berma, .seccion-vial .sv-calzada, .seccion-vial .sv-escalones {
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.seccion-vial.visible .sv-escalones { animation: sv-trazo 600ms var(--ease-out) 1600ms forwards; }
.seccion-vial .sv-area-corte, .seccion-vial .sv-area-relleno, .seccion-vial .sv-cotas, .seccion-vial .sv-eje, .seccion-vial .sv-resumen, .seccion-vial [class^="sv-capa"] { opacity: 0; }
.seccion-vial.visible .sv-corte    { animation: sv-trazo 900ms var(--ease-out) 250ms forwards; }
.seccion-vial.visible .sv-cuneta   { animation: sv-trazo 300ms var(--ease-out) 1050ms forwards; }
.seccion-vial.visible .sv-berma    { animation: sv-trazo 300ms var(--ease-out) 1250ms forwards; }
.seccion-vial.visible .sv-calzada  { animation: sv-trazo 500ms var(--ease-out) 1350ms forwards; }
.seccion-vial.visible .sv-relleno  { animation: sv-trazo 500ms var(--ease-out) 1750ms forwards; }
.seccion-vial.visible .sv-area-corte   { animation: sv-aparece 700ms ease 1100ms forwards; }
.seccion-vial.visible .sv-area-relleno { animation: sv-aparece 700ms ease 2000ms forwards; }
.seccion-vial.visible [class^="sv-capa"] { animation: sv-aparece 500ms ease 1500ms forwards; }
.seccion-vial.visible .sv-eje, .seccion-vial.visible .sv-cotas, .seccion-vial.visible .sv-resumen { animation: sv-aparece 600ms ease 2200ms forwards; }
@keyframes sv-trazo { to { stroke-dashoffset: 0; } }
@keyframes sv-aparece { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .seccion-vial .sv-corte, .seccion-vial .sv-relleno, .seccion-vial .sv-cuneta, .seccion-vial .sv-berma, .seccion-vial .sv-calzada { stroke-dasharray: none; stroke-dashoffset: 0; }
  .seccion-vial .sv-escalones { stroke-dasharray: none; stroke-dashoffset: 0; }
  .seccion-vial .sv-area-corte, .seccion-vial .sv-area-relleno, .seccion-vial .sv-cotas, .seccion-vial .sv-eje, .seccion-vial .sv-resumen, .seccion-vial [class^="sv-capa"] { opacity: 1; }
  .seccion-vial.visible * { animation: none !important; }
}