/* ==========================================================================
   PROINVIAL: sistema visual v11, "La ruta" (ver DESIGN.md)
   La página se recorre como una carretera: un trazado fino une las secciones,
   cada una es un kilómetro y las cifras clave son hitos. Fondo azul noche con
   curvas de nivel andinas, azul estructural para superficies y verde solo para
   acciones, datos destacados e indicadores de progreso.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
    /* Paleta de marca (fija) */
    --c-night: #060a17;         /* fondo principal */
    --c-navy: #26398a;          /* azul estructural */
    --c-green: #0a9635;         /* verde de acción */
    --c-green-hover: #12ab3e;
    --c-ink: #060a17;           /* texto sobre verde (contraste AA) */

    /* Tema oscuro (por defecto) */
    --bg: var(--c-night);
    --surface: #0b1330;         /* tarjetas y paneles */
    --surface-alt: rgba(38, 57, 138, 0.05);   /* secciones alternas: cambio de tono, no bloque */
    --line: rgba(38, 57, 138, 0.62);
    --line-strong: rgba(122, 142, 214, 0.55);
    --text: #eef1f7;            /* blanco roto */
    --muted: #9ba7c4;           /* gris azulado */
    --subtle: #7a86a6;
    --accent: var(--c-green);   /* verde: botones principales, cifras e indicadores */
    --accent-hover: var(--c-green-hover);
    --accent-ink: var(--c-ink); /* texto sobre el verde (5.1:1) */
    --topo-color: #5b6fc4;      /* curvas de nivel: azul estructural aclarado */
    --topo-opacity: 0.06;
    --img-tint: 0.25;           /* intensidad del filtro azul de las imágenes */
    --glow: rgba(38, 57, 138, 0.18);
    /* Grano sutil (feTurbulence) sobre toda la página */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --grain-opacity: 0.035;

    --radius: 2px;
    --radius-sm: 2px;
    --btn-h: 3rem;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    --font-primary: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Syne', 'Manrope', sans-serif;
    --font-logo: var(--font-display);

    --header-h: 4.25rem;
    --topbar-h: 2.25rem;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --section-y: clamp(4.5rem, 8vw, 7.5rem);
    --max-width-container: 80rem;

    /* Curvas de nivel (se colorean con mask + --topo-color) */
    --topo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 900' preserveAspectRatio='xMidYMid slice' fill='none' stroke='black' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M0 648L13 640 27 630 40 620 50 610 59 600 66 590 71 580 77 560 70 540 60 535 40 533 20 535 2 540M421 0L440 7 450 12 464 20 478 30 490 39 500 45 510 51 530 59 540 61 560 62 571 60 590 54 600 50 616 40 628 30 638 20 647 10 654 0M0 682L10 677 24 670 40 661 50 655 60 648 72 640 85 630 97 620 107 610 115 600 122 590 130 575 137 560 140 550 144 530 143 510 139 500 130 489 110 480 100 479 80 479 70 480 50 484 30 488 20 491 0 496M475 900L470 887 460 871 450 860 440 854 430 849 410 846 390 848 380 851 365 860 353 870 344 880 336 890 330 900M284 0L300 3 320 7 340 10 350 12 370 15 389 20 400 23 416 30 430 37 440 43 450 50 464 60 479 70 490 77 500 82 520 90 530 92 550 95 570 94 590 90 600 87 618 80 630 73 640 67 650 59 660 50 670 40 680 29 690 17 700 4M1151 0L1160 4 1169 10 1170 11 1180 19 1181 20 1190 30 1198 40 1200 42M0 18L9 10 10 9 20 0M0 709L19 700 30 695 40 690 60 681 70 676 84 670 100 662 110 658 125 650 140 641 150 634 160 625 170 613 178 600 182 590 189 570 192 560 196 540 200 520 200 510 200 498 196 480 190 467 180 457 170 450 150 443 130 441 110 440 90 442 70 444 50 447 32 450 20 452 0 454M517 900L510 887 500 870 493 860 486 850 477 840 465 830 450 821 440 817 420 811 404 810 397 810 380 812 360 818 350 823 340 831 330 841 320 855 311 870 305 880 300 890M1180 900L1190 883 1195 870 1190 850 1180 844 1170 840 1150 839 1136 840 1120 843 1100 849 1090 853 1074 860 1060 867 1050 872 1035 880 1020 887 1010 893 995 900M630 349L620 354 608 360 591 370 580 377 570 384 560 391 549 400 536 410 525 420 515 430 507 440 500 453 500 462 520 470 521 470 540 468 560 465 580 460 590 457 610 451 620 448 640 440 650 436 662 430 675 420 682 410 685 390 680 371 674 360 662 350 650 347 630 350M197 0L210 4 228 10 240 13 260 18 273 20 290 23 310 26 330 29 340 30 360 35 379 40 390 44 403 50 420 60 430 66 440 73 450 81 463 90 478 100 490 106 500 111 520 117 531 120 550 123 570 124 590 123 608 120 620 117 640 111 650 106 660 100 674 90 686 80 696 70 705 60 714 50 722 40 731 30 740 20 750 10 760 0M898 0L910 3 930 6 950 8 970 9 990 10 1010 9 1030 9 1050 10 1062 10 1080 11 1100 14 1120 20 1130 25 1140 31 1152 40 1162 50 1170 60 1180 73 1190 87 1200 100M0 61L9 50 18 40 28 30 39 20 50 12 60 6 71 0M1200 280L1190 298 1184 310 1179 320 1172 340 1169 350 1167 370 1169 390 1172 400 1180 416 1190 429 1200 437M0 735L10 730 30 721 40 717 58 710 70 706 90 702 100 700 120 699 135 700 150 704 164 710 180 720 190 727 200 733 211 740 230 750 240 754 255 760 270 766 280 770 291 780 293 800 290 819 288 830 283 850 280 860 273 880 269 890M1200 776L1185 780 1170 784 1150 788 1140 791 1120 797 1110 800 1090 808 1080 813 1066 820 1050 829 1040 836 1030 842 1018 850 1003 860 990 868 980 874 970 880 951 890 940 895 928 900M560 899L550 891 540 880 533 870 525 860 518 850 510 839 500 827 490 816 480 808 469 800 450 790 440 786 420 780 410 778 390 774 370 771 360 770 340 766 325 760 318 750 317 730 319 710 321 700 324 680 328 660 331 650 336 630 340 620 349 600 355 590 364 580 375 570 390 561 400 556 413 550 430 544 441 540 460 534 472 530 490 524 506 520 520 516 540 511 550 508 570 503 587 500 600 498 620 494 640 492 660 492 680 492 700 493 720 494 740 495 760 494 780 492 790 490 810 484 823 480 840 472 850 467 860 460 872 450 881 440 890 424 892 410 887 400 874 390 860 385 843 380 830 377 810 373 800 370 780 362 770 356 760 348 750 338 740 324 731 310 725 300 719 290 710 278 700 269 680 263 660 269 650 274 640 281 629 290 617 300 605 310 593 320 581 330 570 339 560 347 550 355 540 363 530 371 518 380 504 390 490 400 480 408 470 415 460 422 449 430 436 440 422 450 410 460 400 468 390 476 380 484 370 492 360 500 346 510 330 519 320 523 300 525 288 520 277 510 270 500 260 480 255 470 249 460 240 448 230 438 219 430 200 421 190 418 170 414 150 411 130 411 110 411 90 411 70 412 50 412 30 410 20 408 3 400M0 141L3 130 9 110 13 100 20 87 30 73 40 61 50 51 60 43 70 37 83 30 100 24 120 20 130 20 140 20 160 22 180 26 200 30 210 31 230 34 250 37 270 39 280 40 300 42 320 45 340 49 350 52 370 58 380 62 396 70 410 79 420 86 430 93 440 101 452 110 467 120 480 127 490 132 509 140 520 144 540 149 550 151 570 155 590 159 600 162 620 170 630 179 634 190 632 210 629 220 620 237 612 250 605 260 598 270 590 280 580 291 570 302 560 312 550 322 540 331 529 340 516 350 503 360 490 369 480 376 470 383 459 390 443 400 430 407 420 413 405 420 390 427 380 431 360 438 345 440 330 441 320 439 300 433 290 428 276 420 260 411 250 407 233 400 220 396 200 392 189 390 170 388 150 387 130 386 110 385 90 383 73 380 60 376 46 370 34 360 26 350 20 337 15 320 11 300 9 290 6 270 4 250 1 230 0 219M1200 741L1180 748 1170 750 1150 755 1130 760 1120 762 1100 768 1090 771 1070 778 1060 782 1045 790 1030 799 1020 807 1010 814 1000 822 990 830 977 840 963 850 950 858 940 864 928 870 910 878 900 882 880 888 870 891 850 895 830 897 810 899 797 900M0 762L10 757 25 750 40 744 53 740 70 737 90 735 110 738 120 741 140 749 150 755 160 762 172 770 187 780 200 789 210 797 220 805 230 816 239 830 242 840 244 860 241 880 239 890M629 900L610 896 595 890 580 882 570 874 560 865 550 854 540 841 532 830 524 820 516 810 507 800 496 790 484 780 470 771 460 766 448 760 430 752 420 747 407 740 393 730 385 720 379 710 375 690 377 670 380 658 387 640 392 630 400 619 410 607 420 598 430 589 444 580 460 571 470 566 482 560 500 553 510 549 530 543 540 540 560 535 580 531 590 529 610 527 630 526 650 526 670 526 690 527 710 527 730 527 750 526 770 524 790 520 800 518 820 513 832 510 850 504 860 500 880 491 890 485 900 480 914 470 926 460 937 450 946 440 954 430 960 420 968 400 967 380 960 370 944 360 930 356 910 351 900 350 880 347 860 343 844 340 830 336 814 330 800 322 790 314 780 303 771 290 765 280 760 268 753 250 750 240 743 220 740 210 734 190 730 170 729 160 730 144 733 130 740 114 748 100 755 90 762 80 771 70 783 60 797 50 810 44 823 40 840 37 860 35 880 34 900 33 920 32 940 31 960 30 970 30 990 29 1010 28 1030 28 1050 29 1060 30 1080 34 1099 40 1110 45 1120 52 1130 60 1140 71 1150 85 1160 100 1165 110 1170 120 1180 140 1185 150 1190 166 1193 180 1194 200 1190 217 1186 230 1180 242 1171 260 1165 270 1159 280 1150 295 1141 310 1136 320 1130 335 1125 350 1123 370 1124 390 1130 409 1135 420 1141 430 1150 440 1161 450 1177 460 1190 466 1200 471M1200 711L1180 718 1170 721 1150 725 1130 728 1114 730 1100 731 1080 732 1060 732 1040 735 1028 740 1014 750 1003 760 994 770 986 780 977 790 968 800 958 810 947 820 935 830 920 840 910 846 900 851 880 860 870 863 850 869 840 871 820 875 800 878 783 880 770 881 750 883 730 884 710 885 690 886 670 885 650 883 632 880 620 877 604 870 590 862 580 854 570 844 560 832 551 820 543 810 535 800 527 790 519 780 509 770 498 760 485 750 471 740 460 733 450 726 440 717 430 706 422 690 420 670 425 650 430 640 440 626 450 616 460 607 470 599 485 590 500 582 510 578 530 570 540 567 560 562 570 560 590 556 610 554 630 553 650 553 670 553 690 553 710 552 730 551 740 550 760 548 780 545 800 541 810 539 830 535 850 531 860 528 880 523 890 520 910 513 920 510 940 501 950 496 960 490 976 480 990 470 1000 463 1010 456 1020 450 1040 442 1060 442 1075 450 1090 460 1100 467 1110 472 1126 480 1140 485 1159 490 1170 492 1190 497M0 799L12 790 29 780 40 776 60 771 80 771 100 775 112 780 130 790 140 796 150 803 160 810 173 820 184 830 192 840 200 854 204 870 203 890M10 899L10 899 1 890 0 889M960 49L980 48 1000 47 1020 47 1040 48 1051 50 1070 55 1083 60 1100 70 1110 79 1119 90 1126 100 1131 110 1139 130 1142 140 1147 160 1149 180 1147 200 1142 220 1138 230 1130 245 1120 260 1112 270 1103 280 1093 290 1081 300 1070 308 1060 313 1040 319 1030 321 1010 322 990 323 970 323 950 322 930 321 910 320 900 320 880 317 860 313 850 310 830 301 820 294 810 285 800 271 794 260 790 250 784 230 781 210 781 190 782 170 787 150 791 140 800 122 808 110 817 100 829 90 840 82 850 77 866 70 880 65 899 60 910 57 930 54 950 51 960 50M110 59L130 55 150 53 170 53 190 53 210 54 230 54 250 55 270 56 290 58 304 60 320 63 340 67 350 70 370 78 380 83 391 90 406 100 418 110 430 119 440 127 450 135 460 142 474 150 490 159 500 163 516 170 530 176 540 181 557 190 567 200 573 210 576 230 570 250 566 260 560 270 550 284 540 296 530 307 520 317 510 326 500 334 490 342 478 350 463 360 450 368 440 373 427 380 410 387 400 391 380 397 362 400 350 401 337 400 320 397 300 392 290 389 270 383 260 380 240 375 220 372 208 370 190 368 170 366 150 365 130 363 114 360 100 357 82 350 70 342 60 333 52 320 47 310 41 290 39 280 36 260 34 240 33 220 32 200 33 180 34 160 38 140 41 130 49 110 55 100 63 90 73 80 87 70 100 63 110 59M1200 680L1180 688 1170 691 1150 693 1130 693 1115 690 1100 683 1090 675 1080 662 1075 650 1071 630 1071 610 1074 590 1080 574 1088 560 1097 550 1110 540 1120 536 1138 530 1150 528 1170 527 1190 528M81 900L70 891 60 881 51 870 45 860 43 840 51 830 70 824 90 828 100 832 114 840 127 850 137 860 143 870 146 890M960 68L980 66 1000 66 1020 66 1040 69 1050 72 1069 80 1080 88 1090 98 1099 110 1104 120 1110 139 1112 150 1113 170 1110 190 1108 200 1100 217 1092 230 1084 240 1074 250 1062 260 1050 268 1040 273 1025 280 1010 285 990 290 980 292 960 294 940 296 920 296 900 294 880 291 870 288 852 280 840 271 830 260 823 250 819 240 813 220 812 200 814 180 819 160 824 150 830 138 840 125 850 114 860 106 870 99 886 90 900 84 911 80 930 75 950 70 960 69M170 78L190 75 210 74 230 73 250 73 270 73 290 75 310 78 322 80 340 85 352 90 370 99 380 105 390 112 400 120 411 130 423 140 434 150 447 160 460 170 470 176 480 183 492 190 507 200 519 210 526 220 531 230 531 250 528 260 520 276 510 290 501 300 491 310 480 320 470 327 460 334 450 341 432 350 420 356 408 360 390 365 370 369 350 369 330 368 310 364 290 361 280 359 260 356 240 353 220 351 210 350 190 348 170 346 150 344 132 340 120 336 105 330 91 320 82 310 75 300 70 288 65 270 62 250 61 230 61 210 62 190 66 170 70 155 76 140 81 130 90 118 100 107 110 100 128 90 140 85 160 80 170 78M810 559L830 557 850 555 870 553 890 552 910 552 930 556 941 560 954 570 960 580 966 600 967 620 967 640 967 660 965 680 962 700 960 711 956 730 950 747 945 760 939 770 930 784 920 797 910 807 900 816 890 823 878 830 860 839 850 843 830 850 820 853 800 858 788 860 770 863 750 866 730 868 710 869 690 869 670 868 650 865 631 860 620 856 609 850 596 840 585 830 576 820 568 810 560 799 550 785 540 771 532 760 523 750 514 740 504 730 494 720 485 710 476 700 470 689 466 670 470 651 476 640 484 630 495 620 510 610 520 604 530 600 550 592 560 589 580 585 600 582 616 580 630 579 650 577 670 576 690 575 710 573 730 571 740 569 760 567 780 564 800 561 810 560M1200 638L1190 644 1170 650 1150 647 1140 640 1132 620 1135 600 1140 590 1150 580 1170 570 1180 569 1193 570M240 89L260 89 278 90 290 91 310 95 329 100 340 104 352 110 368 120 380 129 390 138 400 148 410 157 420 167 430 177 440 187 450 196 460 205 470 214 480 227 486 240 486 260 480 275 470 290 460 300 450 308 440 315 430 321 410 330 400 333 380 338 360 340 350 340 338 340 320 339 300 338 280 336 260 334 240 333 220 332 200 330 190 329 170 326 150 322 140 319 122 310 110 300 101 290 96 280 90 264 87 250 86 230 87 210 90 190 93 180 100 161 106 150 113 140 122 130 134 120 150 111 160 106 177 100 190 97 210 93 230 90 240 90M960 88L980 86 1000 85 1020 88 1030 90 1050 99 1060 107 1070 118 1076 130 1080 143 1082 160 1080 177 1076 190 1070 203 1060 218 1050 229 1040 238 1030 245 1020 250 1000 259 990 263 970 268 958 270 940 272 920 272 904 270 890 267 874 260 861 250 852 240 847 230 841 210 841 190 846 170 850 160 860 143 870 132 880 122 890 115 900 109 919 100 930 96 950 90 960 88M810 579L830 578 850 578 869 580 880 583 898 590 910 600 917 610 921 620 926 640 928 660 927 680 925 700 922 720 919 730 912 750 907 760 900 771 890 785 880 795 870 804 860 811 845 820 830 827 820 831 800 838 790 841 770 845 750 849 740 850 720 852 700 853 680 852 664 850 650 847 632 840 620 834 610 826 600 817 590 806 580 793 572 780 566 770 560 760 550 744 542 730 536 720 530 710 520 690 518 680 519 660 524 650 533 640 546 630 560 623 570 618 590 612 600 609 620 605 640 602 652 600 670 597 690 595 710 592 722 590 740 587 760 585 780 582 800 580 810 579M220 109L240 107 260 106 280 107 300 110 310 113 330 120 340 125 350 131 361 140 372 150 382 160 390 170 400 182 410 195 420 209 427 220 432 230 437 250 432 270 424 280 412 290 400 297 390 302 370 307 357 310 340 312 320 313 300 314 280 314 260 314 240 314 220 313 200 311 190 310 170 305 154 300 140 292 130 283 120 270 116 260 111 240 110 220 113 200 120 180 125 170 131 160 140 149 150 140 164 130 180 122 190 118 210 112 220 110M970 108L990 108 1006 110 1020 115 1030 121 1040 130 1049 150 1049 170 1042 190 1036 200 1028 210 1016 220 1001 230 990 235 978 240 960 245 940 247 920 246 900 240 890 234 880 223 873 210 871 190 877 170 882 160 890 148 900 138 911 130 929 120 940 116 960 110 970 109M780 599L800 599 820 599 834 600 850 603 867 610 880 620 888 630 892 640 898 660 899 680 897 700 893 720 890 731 882 750 876 760 869 770 860 780 849 790 836 800 820 809 810 814 796 820 780 825 762 830 750 832 730 835 710 837 690 836 670 834 657 830 640 823 630 817 620 809 610 799 600 786 590 770 585 760 580 749 573 730 570 720 565 700 566 680 570 670 580 657 590 648 604 640 620 633 630 629 650 623 663 620 680 616 700 612 710 610 730 606 750 603 770 601 780 600M220 129L240 126 260 124 280 125 300 129 310 133 325 140 340 150 350 160 359 170 366 180 372 190 380 207 384 220 385 240 380 253 370 265 360 272 343 280 330 284 310 289 300 290 280 293 260 294 240 294 220 293 200 291 190 288 170 281 160 275 150 266 140 250 137 240 136 220 139 200 143 190 150 177 160 164 170 154 180 147 192 140 210 132 220 129M960 139L980 139 990 141 1002 150 1008 170 1000 188 990 199 980 205 970 210 950 214 930 212 920 206 911 190 916 170 923 160 935 150 950 143 960 140M760 619L780 618 800 618 816 620 830 623 845 630 857 640 864 650 870 666 872 680 872 700 870 710 864 730 860 740 850 756 840 768 830 778 820 786 810 792 796 800 780 807 770 810 750 815 730 819 710 820 690 819 670 815 658 810 641 800 630 790 622 780 615 770 610 760 603 740 600 723 600 710 601 700 609 680 617 670 629 660 640 653 650 648 670 640 680 637 700 631 710 628 730 624 750 621 760 620M230 148L250 146 270 146 290 150 300 154 312 160 324 170 332 180 340 197 343 210 340 230 335 240 324 250 310 258 300 263 280 268 270 270 250 272 230 272 216 270 200 266 188 260 176 250 169 240 165 220 168 200 173 190 180 179 190 169 203 160 220 152 230 149M750 639L770 638 790 639 800 640 820 648 830 655 840 668 844 680 846 700 842 720 838 730 830 744 820 757 810 767 800 775 790 781 772 790 760 794 740 799 730 801 710 802 694 800 680 796 666 790 652 780 643 770 637 760 630 740 629 730 630 714 634 700 640 690 650 679 661 670 679 660 690 655 704 650 720 645 740 641 750 640M230 179L250 175 270 177 280 180 291 190 297 210 290 224 280 232 261 240 250 242 230 240 220 236 210 229 205 210 210 197 220 186 230 180M720 667L740 663 760 661 780 663 798 670 809 680 814 690 815 710 810 727 802 740 794 750 782 760 770 767 760 772 740 778 720 780 700 777 682 770 671 760 664 750 660 734 660 726 664 710 670 700 680 689 693 680 710 672 720 668M730 698L750 696 763 700 770 710 770 720 760 734 750 741 730 746 711 740 705 730 710 713 720 704 730 699'/%3E%3C/svg%3E");

    color-scheme: dark;
}
@media (min-width: 64rem) { :root { --header-h: 5rem; } }

/* Tema claro: preferencia del sistema o data-theme="light" */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg: #f3f5fa;
        --surface: #ffffff;
        --surface-alt: rgba(38, 57, 138, 0.035);
        --line: rgba(38, 57, 138, 0.18);
        --line-strong: rgba(38, 57, 138, 0.42);
        --text: #0b1330;
        --muted: #4a5574;
        --subtle: #5d6886;
        --accent: #087a2b;
        --accent-hover: #066a25;
        --accent-ink: #ffffff;
        --topo-color: var(--c-navy);
        --topo-opacity: 0.05;
        --img-tint: 0.25;
        --glow: rgba(38, 57, 138, 0.08);
        --grain-opacity: 0.025;
        color-scheme: light;
    }
}
:root[data-theme="light"] {
    --bg: #f3f5fa;
    --surface: #ffffff;
    --surface-alt: rgba(38, 57, 138, 0.035);
    --line: rgba(38, 57, 138, 0.18);
    --line-strong: rgba(38, 57, 138, 0.42);
    --text: #0b1330;
    --muted: #4a5574;
    --subtle: #5d6886;
    --accent: #087a2b;
    --accent-hover: #066a25;
    --accent-ink: #ffffff;
    --topo-color: var(--c-navy);
    --topo-opacity: 0.05;
    --img-tint: 0.25;
    --glow: rgba(38, 57, 138, 0.08);
    --grain-opacity: 0.025;
    color-scheme: light;
}

/* Zonas siempre oscuras (portadas y tarjetas sobre fotografía): en tema claro
   recuperan los tokens oscuros para que el texto siga siendo legible. */
.hero,
.topbar,
body:not(.menu-open) .header:not(.scrolled) {
    --bg: var(--c-night);
    --surface: #0b1330;
    --line: rgba(255, 255, 255, 0.14);
    --line-strong: rgba(255, 255, 255, 0.32);
    --text: #eef1f7;
    --muted: #b3bdd6;
    --subtle: #8692b2;
    --accent: var(--c-green);
    --accent-hover: var(--c-green-hover);
    --accent-ink: var(--c-ink);
}

/* 2. Reset ------------------------------------------------------------------ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
    font-family: var(--font-primary);
    font-weight: 400;
    color: var(--text);
    background-color: var(--bg);
    background-image: radial-gradient(70rem 45rem at 0% 0%, var(--glow), transparent 70%);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    background: var(--grain);
    opacity: var(--grain-opacity);
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
strong { font-weight: 600; color: var(--text); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--text);
}

::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link {
    position: absolute; left: 1rem; top: -4rem; z-index: 1000;
    background: var(--accent); color: var(--accent-ink);
    padding: 0.6rem 1rem; border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.container {
    width: 100%;
    max-width: var(--max-width-container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* 3. Tipografía de sección ---------------------------------------------- */
/* Etiqueta pequeña en oración; se usa como mucho una vez por página */
.eyebrow {
    display: block;
    font-family: var(--font-primary);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: var(--muted);
    margin-bottom: 1.1rem;
}

.section-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 46rem; }
.section-head--split {
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 3rem;
    align-items: flex-end;
    justify-content: space-between;
}
.section-head--split > div { max-width: 46rem; }

/* Titulares técnicos: Syne 700, cortos y grandes */
.display-title, .hero__title, .section__title, .content-section h2, .page-cta__title, .photo-band__title {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.04;
    overflow-wrap: break-word;
    hyphens: auto;
}
.display-title { font-size: clamp(2rem, 4.6vw, 3.5rem); max-width: 18ch; }

/* Título de sección de páginas internas */
.section__title { font-size: clamp(1.6rem, 3.2vw, 2.25rem); margin-bottom: 1.25rem; text-align: left; }

/* 4. Botones y enlaces ---------------------------------------------------- */
/* Rectangulares y sólidos; el hover desplaza o cambia el borde, sin sombras */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-h);
    padding: 0.85rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    text-align: center;
    cursor: pointer;
    transition: transform 0.25s var(--ease), background-color 0.2s, border-color 0.2s, color 0.2s;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: none; }
.button--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.button--primary:hover { background: var(--accent-hover); border-color: var(--text); }

.button--ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
.button--ghost:hover { border-color: var(--text); }

.button-row, .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero__actions { margin-top: 2.25rem; }

.link-arrow, .text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.01em;
    color: var(--text);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line-strong);
    transition: border-color 0.2s;
}
.link-arrow:hover, .text-link:hover { border-bottom-color: var(--accent); }

/* 5. Barra superior + Header ------------------------------------------- */
.topbar {
    display: none;
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--topbar-h);
    z-index: 101;
    font-size: 0.75rem;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    transition: transform 0.3s var(--ease);
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.topbar__group { display: flex; align-items: center; gap: 1.5rem; }
.topbar a { display: inline-flex; align-items: center; gap: 0.4rem; transition: color 0.2s; }
.topbar a:hover { color: var(--text); }
.topbar svg { width: 0.85rem; height: 0.85rem; }

@media (min-width: 64rem) {
    .topbar { display: block; }
    body.has-scrolled .topbar { transform: translateY(-100%); }
}

.header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    color: var(--text);
    border-bottom: 1px solid transparent;
    transition: background-color 0.3s, top 0.3s var(--ease), border-color 0.3s;
}
@media (min-width: 64rem) {
    .header { top: var(--topbar-h); }
    body.has-scrolled .header { top: 0; }
}
.header.scrolled, body.menu-open .header { background-color: var(--bg); border-bottom-color: var(--line); }

.header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    height: var(--header-h);
}

/* Marca: ícono vial + logotipo tipográfico */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
.brand__icon { width: 2.4rem; height: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
    font-family: var(--font-logo);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    color: var(--text);
}
.brand__tag {
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 0.35rem;
}

.header__menu {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    background: var(--bg);
    padding: 1rem var(--gutter) 3rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease), visibility 0s linear 0.4s;
}
.header__menu.active { transform: none; visibility: visible; transition: transform 0.4s var(--ease); }

.header__item { position: relative; border-bottom: 1px solid var(--line); }

.header__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 1rem 0;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text);
    transition: color 0.2s;
}
.header__link .chev { width: 0.75rem; height: 0.75rem; flex-shrink: 0; transition: transform 0.3s var(--ease); }
.header__link:hover { color: var(--muted); }
.header__link.is-current { box-shadow: inset 0 -2px 0 var(--accent); }
.header__item.open > .header__link .chev { transform: rotate(180deg); }

.header__dropdown { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease); }
/* Plegado: fuera del orden de tabulación (visibility) hasta que se abre */
.header__dropdown > div { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s linear 0.3s; }
.header__item.open .header__dropdown { grid-template-rows: 1fr; }
.header__item.open .header__dropdown > div { visibility: visible; transition: none; }
.header__dropdown a {
    display: block;
    padding: 0.55rem 0 0.55rem 1rem;
    color: var(--muted);
    font-size: 0.95rem;
    border-left: 1px solid var(--line);
    transition: color 0.2s, border-color 0.2s;
}
.header__dropdown li:last-child a { margin-bottom: 1rem; }
.header__dropdown a:hover, .header__dropdown a[aria-current] { color: var(--text); border-left-color: var(--accent); }

.header__cta { margin-top: 2rem; }
.header__cta .button { width: 100%; }

.header__hamburger {
    width: 2.75rem; height: 2.75rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    background: transparent;
    cursor: pointer;
}
.header__hamburger span { width: 1.1rem; height: 1.5px; background: var(--text); transition: transform 0.3s var(--ease), opacity 0.2s; }
.header__hamburger.active span:nth-child(1) { transform: translateY(calc(0.35rem + 1.5px)) rotate(45deg); }
.header__hamburger.active span:nth-child(2) { opacity: 0; }
.header__hamburger.active span:nth-child(3) { transform: translateY(calc(-0.35rem - 1.5px)) rotate(-45deg); }

@media (min-width: 64rem) {
    .header__hamburger { display: none; }
    .header__menu {
        position: static;
        height: auto;
        transform: none;
        visibility: visible;
        transition: none;
        flex-direction: row;
        align-items: center;
        background: transparent;
        padding: 0;
        overflow: visible;
        gap: 0.25rem;
    }
    .header__item { border: 0; }
    .header__link { padding: 0.6rem 0.85rem; font-size: 0.9rem; }
    .header__dropdown {
        display: block;
        position: absolute;
        top: calc(100% + 0.5rem);
        left: 0;
        min-width: 15rem;
        padding: 0.5rem 0;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s, visibility 0.2s;
    }
    .header__dropdown::before { content: ''; position: absolute; inset: -0.75rem 0 auto 0; height: 0.75rem; }
    .header__dropdown > div { overflow: visible; visibility: inherit; transition: none; }
    .header__item:hover .header__dropdown,
    .header__item:focus-within .header__dropdown { opacity: 1; visibility: visible; }
    .header__dropdown a { border: 0; border-left: 2px solid transparent; padding: 0.55rem 1.1rem; font-size: 0.88rem; }
    .header__dropdown li:last-child a { margin: 0; }
    .header__dropdown a:hover, .header__dropdown a[aria-current] { color: var(--text); background: var(--surface-alt); border-left-color: var(--accent); }
    .header__cta { margin: 0 0 0 1rem; }
    .header__cta .button { width: auto; min-height: 2.75rem; padding: 0 1.25rem; font-size: 0.88rem; white-space: nowrap; }
}

/* 6. Portadas ------------------------------------------------------------- */
.hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    color: var(--text);
    background: var(--c-night);
    isolation: isolate;
}

.hero__video-container { position: absolute; inset: 0; z-index: -1; overflow: hidden; background-color: var(--c-night); }
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) contrast(1.08); }
/* Capa oscura con tinte azul para que header y titular se lean sobre la foto */
.hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6, 10, 23, 0.72) 0, rgba(6, 10, 23, 0) 220px),
        linear-gradient(90deg, rgba(6, 10, 23, 0.85) 0%, rgba(6, 10, 23, 0.55) 55%, rgba(6, 10, 23, 0.2) 100%),
        rgba(38, 57, 138, 0.25);
}

.hero__content {
    position: relative;
    width: 100%;
    max-width: var(--max-width-container);
    margin: 0 auto;
    padding: calc(var(--header-h) + 3rem) var(--gutter) clamp(3rem, 10vh, 6rem);
}
@media (min-width: 64rem) { .hero__content { padding-top: calc(var(--header-h) + var(--topbar-h) + 3rem); } }

.hero__title {
    font-size: clamp(2.441rem, 6vw, 3.815rem);
    max-width: 16ch;
}
.hero__subtitle {
    margin-top: 1.5rem;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    color: var(--muted);
    max-width: 34rem;
}

/* Único momento orquestado: la portada entra en secuencia al cargar */
.hero__content > * { animation: fadeIn 0.8s var(--ease) both; }
.hero__content > :nth-child(2) { animation-delay: 0.08s; }
.hero__content > :nth-child(3) { animation-delay: 0.16s; }
.hero__content > :nth-child(4) { animation-delay: 0.24s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }

/* Portada interna */
.hero--page .hero__title { font-size: clamp(2rem, 5vw, 3.75rem); max-width: 20ch; }

/* Pantallas bajas (móvil en horizontal): la portada interna sigue cabiendo */
@media (max-height: 30rem) {
    .hero__content { padding-top: calc(var(--header-h) + 1rem); padding-bottom: 1.5rem; }
    .hero__title, .hero--page .hero__title { font-size: clamp(1.6rem, 4.2vw, 2.4rem); max-width: 26ch; }
    .hero__subtitle { margin-top: 0.6rem; font-size: 0.95rem; }
    .hero__actions { margin-top: 1rem; }
    .hero .eyebrow, .breadcrumb { margin-bottom: 0.6rem; }
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 1.25rem;
}
.breadcrumb a:hover { color: var(--text); }
.breadcrumb span[aria-current] { color: var(--text); }
.breadcrumb .sep { opacity: 0.5; }

/* 7. Tratamiento de imagen único ---------------------------------------- */
/* Filtro azul leve + contraste medio + borde recto. Todas las fotos del
   inicio pasan por aquí para leerse como una sola familia visual. */
.media { position: relative; overflow: hidden; isolation: isolate; background: var(--c-night); }
.media img,
.project-card__img { filter: saturate(0.7) contrast(1.08); }
.media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--c-navy);
    mix-blend-mode: color;
    opacity: var(--img-tint);
    pointer-events: none;
}
/* Máscara de esquina achaflanada para las imágenes sueltas (como un corte de plano) */
.split__media { clip-path: polygon(0 0, 100% 0, 100% 100%, 2.5rem 100%, 0 calc(100% - 2.5rem)); }

/* 8. La ruta: curvas de nivel, trazado y marcadores de kilómetro --------- */
/* Curvas de nivel fijas bajo el contenido del inicio */
body.home::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--topo-color);
    opacity: var(--topo-opacity);
    -webkit-mask: var(--topo) center / cover no-repeat;
    mask: var(--topo) center / cover no-repeat;
}

main {
    /* Posición x del trazado: margen izquierdo del contenedor menos un desfase */
    --route-offset: 0px;
    --route-x: var(--gutter);
}
@media (min-width: 64rem) {
    main {
        --route-offset: 1.5rem;
        --route-x: calc(max(0px, (100% - var(--max-width-container)) / 2) + var(--gutter) - var(--route-offset));
    }
}
@media (min-width: 90rem) { main { --route-offset: 3rem; } }

.ruta { position: relative; view-timeline: --ruta block; }

/* Línea del trazado: base discontinua (eje vial) + avance en verde */
.ruta__line {
    display: none;
    position: absolute;
    z-index: 2;
    top: -3rem;                       /* nace en el km 00 de la portada */
    bottom: calc((var(--section-y) - 2.75rem) * -1 - 6px);   /* termina en el km 08 */
    left: var(--route-x);
    width: 2px;
    transform: translateX(-50%);
    pointer-events: none;
}
.ruta__line::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 50%;
    width: 1px;
    background: repeating-linear-gradient(180deg, var(--line-strong) 0 14px, transparent 14px 24px);
}
.ruta__line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--c-green);
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
}
@media (min-width: 64rem) { .ruta__line { display: block; } }

/* Marcador de kilómetro: punto sobre la línea + etiqueta */
.km {
    position: absolute;
    z-index: 3;
    top: calc(var(--section-y) - 2.75rem);
    left: calc(var(--route-x) - 5px);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.km::before {
    content: '';
    flex-shrink: 0;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--c-green);
}
.km > span { color: var(--muted); letter-spacing: 0.01em; font-size: 0.82rem; }

/* km 00: inicio de la ruta, al pie de la portada */
.km--start { top: auto; bottom: calc(3rem - 5px); }
.km--start::before, .km--end::before { background: var(--c-green); }
/* Portada interna: el km 00 va en línea, sobre la miga de pan */
.hero--page .km--start { position: static; margin-bottom: 1.5rem; }

.section--alt { background-color: var(--surface-alt); }

/* El avance de la ruta lo marca main.js (initRoute) con --p; aquí solo queda
   el tramo horizontal de los hitos, que se dibuja con scroll-driven animations. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .milestones::after {
            animation: track-draw linear both;
            animation-timeline: view();
            animation-range: entry 40% cover 55%;
        }
    }
}
@keyframes track-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 9. Secciones ------------------------------------------------------------ */
.section, .content-section {
    position: relative;
    padding: var(--section-y) 0;
}
/* Separación entre bloques: línea fina en azul estructural */
.kpis + .section,
.ruta + .section,
.section + .section,
.content-section + .content-section,
.content-section + .section,
.section + .content-section { border-top: 1px solid var(--line); }

/* Portada del inicio (km 00): video de obra vial con velo azul */
.hero--route {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    justify-content: flex-end;
    padding: calc(var(--header-h) + 2.5rem) 0 7rem;
}
.hero--route::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6, 10, 23, 0), var(--c-night));
}
.hero--route .hero__content { padding: 0; margin: 0; max-width: none; }
.hero__coords {
    position: absolute;
    z-index: 2;
    right: calc(max(0px, (100% - var(--max-width-container)) / 2) + var(--gutter));
    bottom: calc(3rem - 5px);
    display: none;
    gap: 0.75rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
@media (min-width: 48rem) { .hero__coords { display: flex; } }
@media (min-width: 64rem) {
    .hero--route { padding-top: calc(var(--header-h) + var(--topbar-h) + 2rem); }
}
@media (max-height: 30rem) {
    .hero--route { padding-top: calc(var(--header-h) + 1rem); }
}

/* km 01 · Hitos: cifras clave sobre un tramo horizontal de la ruta ------- */
.kpis { position: relative; padding: var(--section-y) 0 calc(var(--section-y) * 0.8); }
.milestones {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 1.25rem;
}
.milestone {
    position: relative;
    container-type: inline-size;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line-strong);
}
/* Nodo del hito sobre el tramo */
.milestone::before {
    content: '';
    position: absolute;
    top: -6px; left: 0;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--c-green);
}
.milestone__number {
    display: block;
    margin-top: 0.9rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.25rem;
    font-size: clamp(2rem, 25cqi, 4.75rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.milestone__sign { color: var(--accent); }
.milestone__label {
    display: block;
    margin-top: 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--muted);
    line-height: 1.5;
    max-width: 16ch;
}
@media (min-width: 64rem) {
    .milestones { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2rem; }
    /* Tramo continuo que une los cuatro hitos y conecta con el trazado vertical */
    .milestone { border-top: 0; padding-top: 2rem; }
    .milestones::before, .milestones::after {
        content: '';
        position: absolute;
        top: 0;
        left: calc(-1 * var(--route-offset));
        right: 0;
        height: 1px;
        background: repeating-linear-gradient(90deg, var(--line-strong) 0 14px, transparent 14px 24px);
    }
    .milestones::after { height: 2px; top: -0.5px; background: var(--c-green); transform-origin: left; transform: scaleX(0); }
}
@media (min-width: 64rem) and (prefers-reduced-motion: reduce) { .milestones::after { display: none; } }
@supports not (animation-timeline: view()) { .milestones::after { display: none; } }

/* Cifras de páginas internas que aún usan .kpi */
.kpis__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.kpi { padding: 1.5rem 1rem 1.5rem 0; }
.kpi__number { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 4.5vw, 3.5rem); line-height: 1; color: var(--text); }
.kpi__label { display: block; margin-top: 0.75rem; font-size: 0.85rem; color: var(--muted); line-height: 1.4; }

/* km 02 · Sectores (pestañas) ----------------------------------------- */
.sector-tabs {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--line);
}
.sector-tabs::-webkit-scrollbar { display: none; }
.sector-tab {
    flex-shrink: 0;
    padding: 0.95rem 1rem;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.sector-tab:first-child { padding-left: 0; }
.sector-tab:hover { color: var(--text); border-bottom-color: var(--line-strong); }
.sector-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--c-green); }

.sector-panel {
    display: grid;
    grid-template-columns: 1fr;
}
.sector-panel[hidden] { display: none; }
.sector-panel__media { position: relative; min-height: 15rem; }
.sector-panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sector-panel__body { padding: 1.75rem 0 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.sector-panel__project { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; color: var(--muted); margin-bottom: 1rem; }
.sector-panel__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 2.8vw, 2.25rem); }
.sector-panel__desc { color: var(--muted); margin-top: 0.75rem; max-width: 34rem; }
.sector-panel__metric {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 1.75rem 0;
    padding: 1.25rem 0;
    width: 100%;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.sector-panel__number {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.sector-panel__unit { color: var(--muted); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.5; max-width: 16rem; }
@media (min-width: 56rem) {
    .sector-panel { grid-template-columns: 1.1fr 1fr; min-height: 30rem; }
    .sector-panel__body { padding: 0 0 0 clamp(2rem, 4vw, 3.5rem); }
}

/* km 03 · Experiencia regional ----------------------------------------- */
.region { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.region__text > p { color: var(--muted); margin-top: 1.25rem; max-width: 40rem; }
.region__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; }
.region__fact { padding-top: 1rem; border-top: 1px solid var(--line-strong); }
.region__fact strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 2.5rem; line-height: 1; }
.region__fact > span { display: block; margin-top: 0.6rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em; color: var(--muted); }

.country-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1.5rem;
    margin: 2rem 0;
    font-size: 0.9rem;
    color: var(--muted);
}
.country-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 40rem) { .country-list { grid-template-columns: repeat(3, 1fr); } }

.region__map {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
.region__map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.region__map .land { fill: rgba(38, 57, 138, 0.22); stroke: var(--line-strong); stroke-width: 1; }
.region__map .route { fill: none; stroke: var(--c-green); stroke-width: 1.2; stroke-dasharray: 4 6; opacity: 0.7; }
.region__map .pin { fill: var(--c-green); }
.region__map .pin--office { fill: var(--text); }
.region__map text { fill: var(--text); font-family: var(--font-primary); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; }
.region__legend {
    position: absolute;
    left: 1.25rem; bottom: 1.25rem;
    display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; color: var(--muted);
}
.region__legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.region__legend i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--c-green); }
.region__legend i.o { background: var(--text); }
@media (min-width: 56rem) { .region { grid-template-columns: 1.05fr 1fr; } }

/* km 04 · Carrusel de proyectos -------------------------------------- */
.carousel__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.carousel__track::-webkit-scrollbar { display: none; }
@media (min-width: 40rem) { .carousel__track { grid-auto-columns: calc((100% - 1.25rem) / 2); } }
@media (min-width: 64rem) { .carousel__track { grid-auto-columns: calc((100% - 2.5rem) / 3); } }

.carousel__controls { display: flex; align-items: center; gap: 0.5rem; }
.carousel__btn {
    width: var(--btn-h); height: var(--btn-h);
    display: grid; place-items: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.2s, transform 0.25s var(--ease);
}
.carousel__btn svg { width: 1.1rem; height: 1.1rem; }
.carousel__btn:hover:not(:disabled) { border-color: var(--text); }
.carousel__btn[data-prev]:hover:not(:disabled) { transform: translateX(-2px); }
.carousel__btn[data-next]:hover:not(:disabled) { transform: translateX(2px); }
.carousel__btn:disabled { opacity: 0.35; cursor: default; }
/* Indicador de avance: el único verde del bloque */
.carousel__progress { height: 2px; background: var(--line); margin-top: 2rem; overflow: hidden; }
.carousel__progress span { display: block; height: 100%; width: 0; background: var(--c-green); transition: width 0.3s var(--ease); }
.carousel__note { margin-top: 0.85rem; font-size: 0.78rem; color: var(--muted); }
.carousel__footer { margin-top: 2.5rem; }

/* Proyecto: foto arriba y texto debajo, sobre el fondo de la página (sin caja,
   sin degradado). El filtro azul es el mismo de .media. */
.project-card {
    scroll-snap-align: start;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    color: var(--text);
}
.project-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    aspect-ratio: 16 / 10;
    background: var(--c-navy);
    mix-blend-mode: color;
    opacity: var(--img-tint);
    pointer-events: none;
}
.project-card__img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    filter: saturate(0.7) contrast(1.08);
    transition: filter 0.3s;
}
.project-card:hover .project-card__img { filter: saturate(0.85) contrast(1.08); }
.project-card__tag { margin-top: 1.25rem; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.project-card__body { padding-top: 0.35rem; }
.project-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.1; }
.project-card__desc { color: var(--muted); font-size: 0.92rem; margin-top: 0.5rem; }
.project-card__more { margin-top: 1.1rem; }

/* km 05 · Certificaciones (home) -------------------------------------- */
.cert-list { display: grid; grid-template-columns: 1fr; gap: 0 2rem; }
.cert-list li { padding: 1.25rem 0; border-top: 1px solid var(--line-strong); }
.cert-list strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }
.cert-list span { display: block; margin-top: 0.4rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; color: var(--muted); }
@media (min-width: 40rem) { .cert-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .cert-list { grid-template-columns: repeat(5, 1fr); } }

/* km 06–07 · Bloque imagen + texto (sobre nosotros, sostenibilidad) ---- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split__content > p { color: var(--muted); margin-top: 1.25rem; max-width: 40rem; }
.split__content .button-row { margin-top: 2.25rem; }
@media (min-width: 56rem) {
    .split { grid-template-columns: 1fr 1fr; }
    .split--reverse .split__media { order: 2; }
}

.plain-list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 1.5rem; margin-top: 2rem; }
.plain-list li {
    padding: 0.75rem 0;
    border-top: 1px solid var(--line);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.plain-list--single { grid-template-columns: 1fr; }

/* km 08 · Contacto (home) ---------------------------------------------- */
.contact-band { display: grid; gap: 1.25rem; }
.contact__card {
    padding-top: 1.5rem;
    border-top: 1px solid var(--line-strong);
    font-style: normal;
}
.contact__icon { color: var(--muted); margin-bottom: 1.25rem; }
.contact__icon svg { width: 1.35rem; height: 1.35rem; }
.contact__card-title { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; color: var(--muted); margin-bottom: 0.6rem; }
.contact__link { font-weight: 600; font-size: 1.05rem; color: var(--text); border-bottom: 1px solid var(--line-strong); transition: border-color 0.2s; }
.contact__link:hover { border-bottom-color: var(--accent); }
.contact__card br + .contact__link { display: inline-block; margin-top: 0.55rem; }
.contact__text { color: var(--text); font-size: 0.95rem; line-height: 1.6; }
@media (min-width: 48rem) { .contact-band { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .contact-band { grid-template-columns: repeat(4, 1fr); } }

/* 10. Footer (mismo fondo que la página) ---------------------------- */
.footer { position: relative; border-top: 1px solid var(--line); padding-top: clamp(3.5rem, 7vw, 5rem); background: var(--bg); }
.footer__grid { display: grid; gap: 2.5rem; }
.footer__brand p { color: var(--muted); font-size: 0.9rem; margin-top: 1.25rem; max-width: 22rem; }
.footer__certs { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 1rem; font-size: 0.82rem; font-weight: 600; color: var(--subtle); }
.footer__heading {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text);
    margin-bottom: 1.25rem;
}
.footer__list li + li { margin-top: 0.6rem; }
.footer__list a, .footer__list span { color: var(--muted); font-size: 0.9rem; transition: color 0.2s; display: inline-flex; gap: 0.5rem; align-items: flex-start; }
.footer__list a:hover { color: var(--text); }
.footer__list svg { width: 1rem; height: 1rem; margin-top: 0.2rem; flex-shrink: 0; color: var(--subtle); }
.footer__content {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    justify-content: space-between;
    align-items: center;
    margin-top: clamp(3rem, 6vw, 4rem);
    padding: 1.5rem 0 2rem;
    border-top: 1px solid var(--line);
    color: var(--subtle);
    font-size: 0.8rem;
}
@media (min-width: 48rem) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .footer__grid { grid-template-columns: 1.3fr 1fr 0.9fr 1fr 1.2fr; gap: 2rem; } }

/* 11. Revelado al hacer scroll -------------------------------------- */
.js-anim [data-reveal] { opacity: 0; transform: translateY(1rem); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js-anim [data-reveal].is-visible { opacity: 1; transform: none; }

/* ======================================================================
   12. Páginas internas
   ====================================================================== */
.content-section h2 {
    font-size: clamp(1.6rem, 3.2vw, 2.25rem);
    margin-bottom: 1.25rem;
    max-width: 30ch;
    text-align: left;
}

/* Ritmo vertical de páginas internas: los márgenes los decide solo este bloque
   (build_layout.py elimina los márgenes en línea del contenido).
   - entre bloques de una misma subsección: 2rem
   - al empezar una subsección (un h2 suelto o un bloque que abre con h2):
     más aire y una línea divisoria que marca el cambio de tema */
.content-section > .container > * + * { margin-top: 2rem; }
.content-section > .container > h2 + *,
.content-section > .container > p + p { margin-top: 0; }
.content-section > .container > * + h2,
.content-section > .container > * + :has(> h2:first-child) {
    margin-top: clamp(4.5rem, 8vw, 6.5rem);
    padding-top: clamp(2.5rem, 4vw, 3.5rem);
    border-top: 1px solid var(--line);
}
/* La línea divisoria ocupa todo el contenedor aunque el título sea corto */
.content-section > .container > * + h2 { max-width: none; }
.content-section > .container > :has(> h2:first-child) > p { max-width: 60ch; }
/* Dentro de tarjetas y bloques: párrafos consecutivos con separación fija */
.content-section :is(article, .card, .media-block__content) p + p { margin-top: 0.6rem; }
.content-section p { color: var(--muted); }
.content-section > .container > p,
.content-section > .container > div:not([class]) > p { font-size: 1.02rem; max-width: 60ch; margin-bottom: 1rem; }
.content-section h3 { font-size: 1.1rem; margin-bottom: 0.6rem; }
.content-section form .button { align-self: flex-start; }
a[href^="tel:"] { white-space: nowrap; }

/* Rejillas */
.proyectos-grid, .services-grid, .sector-benefits, .gobernanza-items,
.governance-structure, .reportes-grid, .eventos-lista, .regions-grid, .offices-grid,
.expertise-grid, .certifications-grid, .compliance-info, .sustainability-pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem 2rem;
    margin-top: 2rem;
}
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 2.5rem 2rem; }
.highlights { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) {
    .proyectos-grid, .services-grid, .sector-benefits, .gobernanza-items,
    .governance-structure, .reportes-grid, .eventos-lista, .regions-grid, .offices-grid,
    .expertise-grid, .compliance-info, .sustainability-pillars,
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
}
/* A dos columnas, un número impar de elementos no deja un hueco al final */
@media (min-width: 40rem) and (max-width: 63.99rem) {
    .proyectos-grid, .services-grid, .sector-benefits, .gobernanza-items,
    .governance-structure, .reportes-grid, .eventos-lista, .regions-grid, .offices-grid,
    .expertise-grid, .compliance-info, .sustainability-pillars, .grid-2 {
        & > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    }
}
@media (min-width: 64rem) {
    .services-grid, .sector-benefits, .governance-structure, .offices-grid,
    .expertise-grid { grid-template-columns: repeat(4, 1fr); }
    .proyectos-grid, .gobernanza-items, .reportes-grid, .regions-grid,
    .compliance-info, .sustainability-pillars { grid-template-columns: repeat(3, 1fr); }
}

/* Bloques de texto en rejilla: columnas abiertas sobre el fondo de la página,
   separadas por una línea superior (mismo trazo que la ruta), sin caja ni relleno */
.card, .benefit, .service-card, .item, .structure-item, .reporte-card, .evento-item,
.office-item, .pillar, .highlight-item, .compliance-item, .cert-item, .contact-info {
    position: relative;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line-strong);
}

.card p, .benefit p, .service-card p, .item p, .structure-item p, .reporte-card p,
.evento-item p, .office-item p, .pillar p, .highlight-item p, .compliance-item p,
.cert-item p, .contact-info p { font-size: 0.92rem; }
.contact-info { margin-top: 1.5rem; max-width: 40rem; }
.contact-cards { display: grid; gap: 2.5rem 2rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .contact-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .contact-cards { grid-template-columns: repeat(4, 1fr); } }
.highlight-item p { margin: 0; }
.form-card { max-width: 48rem; }
.content-section form { max-width: 48rem; }

/* Certificaciones: una fila por norma (código, área y alcance) separadas por
   divisores; no son tarjetas, así un número impar de normas no deja huecos */
.certifications-grid { gap: 0; border-top: 1px solid var(--line-strong); }
.cert-item,
.cert-item:hover {
    display: grid;
    gap: 0.35rem 2rem;
    padding: 1.5rem 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
}
.cert-item h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin: 0; }
.cert-item p:first-of-type { color: var(--text); font-weight: 600; }
.cert-item p { margin: 0; }
@media (min-width: 48rem) {
    .cert-item { grid-template-columns: 13rem 15rem minmax(0, 1fr); align-items: baseline; padding: 1.75rem 0; }
}

/* Reportes y eventos: el enlace queda alineado al pie de cada tarjeta */
.reporte-card, .evento-item { display: flex; flex-direction: column; align-items: flex-start; }
.evento-item p + p { margin-top: 0.25rem; }
.reporte-link, .evento-link { margin-top: auto; padding-top: 1.25rem; }

/* Cifras de páginas internas: mismo lenguaje que los hitos del inicio */
.stats-highlight, .team-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2rem;
}
.stat, .team-stat { padding: 1.25rem 1rem 1.25rem 0; text-align: left; }
.stats-highlight > :nth-child(n + 3), .team-stats > :nth-child(n + 3) { border-top: 1px solid var(--line); }
.stats-highlight > :nth-child(even), .team-stats > :nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--line); }
@media (min-width: 48rem) {
    .stats-highlight, .team-stats { grid-template-columns: repeat(4, 1fr); }
    .stats-highlight > *, .team-stats > *,
    .stats-highlight > :nth-child(n), .team-stats > :nth-child(n) { border-top: 0; border-left: 1px solid var(--line); padding: 0.5rem 1.5rem; }
    .stats-highlight > :first-child, .team-stats > :first-child { border-left: 0; padding-left: 0; }
}
.stat h3, .team-stat .stat-number {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.6vw, 2.75rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
}
.stat p, .team-stat p { font-size: 0.85rem; margin-top: 0.6rem; color: var(--muted); }

.reporte-link, .evento-link, .proyecto-link {
    display: inline-block;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text);
    border-bottom: 1px solid var(--accent);
    transition: color 0.2s;
}
.proyecto-link { margin-top: 1.25rem; }
/* En una fila de proyectos, los enlaces quedan alineados al pie */
.proyecto-card .proyecto-link { margin-top: auto; padding-top: 1.25rem; border-bottom: 0; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.35em; }
.reporte-link:hover, .evento-link:hover, .proyecto-link:hover { color: var(--accent); }
.proyecto-card .proyecto-link { color: var(--text); }

/* Tarjetas con imagen: build_layout.py convierte la imagen en <img class="card-media">;
   la foto va arriba con el tratamiento común y el texto debajo, sin caja */
.proyecto-card, .expertise-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--text);
}
.card-media {
    order: -2;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    margin-bottom: 1.25rem;
    filter: saturate(0.7) contrast(1.08);
}
.proyecto-card::before, .expertise-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    aspect-ratio: 16 / 10;
    background: var(--c-navy);
    mix-blend-mode: color;
    opacity: var(--img-tint);
    pointer-events: none;
}
.proyecto-card h3, .expertise-card h3 { font-size: 1.25rem; margin-bottom: 0.4rem; color: var(--text); }
.proyecto-card p, .expertise-card p { color: var(--muted); font-size: 0.92rem; }
.proyecto-sector {
    order: -1;
    margin-bottom: 0.4rem;
    font-weight: 600;
}
.proyecto-card .proyecto-sector { font-size: 0.82rem; color: var(--muted); }
.proyecto-card.is-hidden { display: none; }


/* Experiencia regional: mosaico de regiones. Foto a sangre con el texto encima
   sobre un degradado nocturno; América del Sur (sede) ocupa el bloque grande */
.regions-grid { gap: 1rem; }
.region-card {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: 22rem;
    overflow: hidden;
    background: var(--surface);
    color: var(--text);
}
.region-card__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.75) contrast(1.08);
    transform: scale(1.01);
    transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
}
/* Degradado de lectura + tinte azul de marca, el mismo de todas las fotos */
.region-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(6, 10, 23, 0) 20%, rgba(6, 10, 23, 0.7) 52%, rgba(6, 10, 23, 0.96) 100%),
        linear-gradient(0deg, rgba(38, 57, 138, 0.28), rgba(38, 57, 138, 0.28));
    transition: opacity 0.6s var(--ease);
}
/* Trazo verde de la ruta: crece al pasar el cursor */
.region-card::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 3rem;
    height: 3px;
    background: var(--accent);
    transition: width 0.7s var(--ease);
}
.region-card__body { padding: clamp(1.25rem, 2.5vw, 1.75rem); width: 100%; }
.region-card .region-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent-ink);
    background: var(--accent);
    padding: 0.3rem 0.65rem;
}
.region-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.45rem, 2.2vw, 1.75rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: #fff;
}
.region-card .region-card__desc {
    margin-top: 0.6rem;
    max-width: 34rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #dfe5f2;
}
.region-card__countries {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1rem;
}
.region-card__countries li {
    padding: 0.28rem 0.6rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: #fff;
    background: rgba(6, 10, 23, 0.5);
    border: 1px solid rgba(122, 142, 214, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
@media (hover: hover) {
    .region-card:hover .region-card__img { transform: scale(1.07); filter: saturate(1) contrast(1.08); }
    .region-card:hover::after { width: 100%; }
    .region-card:hover .region-card__countries li { border-color: rgba(10, 150, 53, 0.75); background: rgba(6, 10, 23, 0.65); }
}
@media (min-width: 40rem) {
    .region-card--hq { grid-column: 1 / -1; min-height: 26rem; }
}
/* A dos columnas, tras el bloque grande quedan cinco: la última ocupa la fila */
@media (min-width: 40rem) and (max-width: 63.99rem) {
    .regions-grid > .region-card:last-child { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
    .regions-grid { grid-auto-rows: minmax(20rem, auto); }
    .region-card { min-height: 20rem; }
    .region-card--hq { grid-column: span 2; grid-row: span 2; }
    .region-card--hq .region-card__title { font-size: clamp(2.2rem, 3.4vw, 3rem); }
    .region-card--hq .region-card__desc { font-size: 1.02rem; }
}
@media (prefers-reduced-motion: reduce) {
    .region-card:hover .region-card__img { transform: scale(1.01); }
}

/* Filtros de proyectos: pestañas de texto (una fila con desplazamiento en móvil) */
.proyectos-filtros {
    display: flex;
    gap: 0 1.25rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
}
.proyectos-filtros::-webkit-scrollbar { display: none; }
.filtro-btn {
    flex-shrink: 0;
    padding: 0.75rem 0;
    margin-bottom: -1px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-weight: 500;
    font-size: 0.92rem;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.filtro-btn:hover { color: var(--text); }
.filtro-btn.active { color: var(--text); border-bottom-color: var(--c-green); }

/* Media block */
.media-block { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin: 2rem 0 3rem; }
@media (min-width: 48rem) {
    .media-block { grid-template-columns: 1fr 1fr; }
    .media-block--reverse .media-block__content { order: 2; }
    .media-block--reverse .media-block__media { order: 1; }
}
.media-block__media { position: relative; isolation: isolate; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; background: var(--c-night); }
.media-block__media video, .media-block__img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) contrast(1.08); }
/* Mismo velo azul que .media */
.media-block__media::after { content: ''; position: absolute; inset: 0; background: var(--c-navy); mix-blend-mode: color; opacity: var(--img-tint); pointer-events: none; }

/* Nuestra empresa: apertura, imagen panorámica, misión/visión y valores ---- */
/* Apertura: la frase que define a la empresa, con el párrafo de apoyo al lado */
.intro { display: grid; gap: 1.5rem 4rem; }
.content-section .intro h2 {
    font-size: clamp(1.9rem, 3.4vw, 2.75rem);
    line-height: 1.08;
    max-width: 22ch;
    margin: 0;
}
.content-section .intro p { font-size: 1.1rem; line-height: 1.7; max-width: 44ch; margin: 0; }
@media (min-width: 64rem) {
    .intro { grid-template-columns: 1.35fr 1fr; align-items: start; }
}

/* Imagen panorámica con el corte de plano en la esquina */
.wide-media { aspect-ratio: 4 / 3; }
.wide-media img { width: 100%; height: 100%; object-fit: cover; }
/* Fotos con personas: el recorte panorámico conserva las cabezas */
.wide-media--people img { object-position: center 30%; }
@media (min-width: 48rem) {
    .wide-media { aspect-ratio: 21 / 9; clip-path: polygon(0 0, 100% 0, 100% 100%, 3rem 100%, 0 calc(100% - 3rem)); }
}

/* Misión y visión: dos afirmaciones legibles, no fichas */
.principles { display: grid; gap: 2.5rem 4rem; }
.principles article { padding-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.content-section .principles h3 { font-size: 0.9rem; font-weight: 600; color: var(--muted); margin-bottom: 0.9rem; }
.content-section .principles p { font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 500; line-height: 1.45; color: var(--text); max-width: 32ch; }
@media (min-width: 48rem) { .principles { grid-template-columns: 1fr 1fr; } }

/* Valores: cinco palabras, en la tipografía de titulares */
.content-section .values h3 { font-size: 0.9rem; font-weight: 600; color: var(--muted); margin-bottom: 1rem; }
.values ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; }
/* Más aire alrededor de la imagen y antes de los valores */
.content-section > .container > .wide-media + * { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.content-section > .container > .principles + .values { margin-top: clamp(3rem, 6vw, 4.5rem); }
.values li {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--text);
}

/* Formularios */
.content-section label { display: block; margin-bottom: 0.5rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; color: var(--muted); }
input, textarea, select { accent-color: var(--c-green); }
.content-section input, .content-section textarea, .content-section select {
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--bg);
    border: 1px solid var(--line-strong);
    color: var(--text);
    font-size: 0.95rem;
    transition: border-color 0.2s;
}
.content-section input::placeholder, .content-section textarea::placeholder { color: var(--subtle); }
.content-section input:focus, .content-section textarea:focus, .content-section select:focus { outline: none; border-color: var(--accent); }

/* CTA final de páginas internas */
.page-cta { position: relative; isolation: isolate; padding: var(--section-y) 0; border-top: 1px solid var(--line); background: var(--surface-alt); }
.page-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--topo-color);
    opacity: var(--topo-opacity);
    -webkit-mask: var(--topo) center / cover no-repeat;
    mask: var(--topo) center / cover no-repeat;
}
.page-cta__inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.page-cta__title { font-size: clamp(1.6rem, 3.2vw, 2.4rem); max-width: 22ch; }
.page-cta__text { color: var(--muted); margin-top: 0.75rem; }

/* ======================================================================
   13. Rediseño de páginas internas (2026-10-20)
   Más fotografía, más contraste y movimiento ligado a la lectura:
   cada tema es su propia sección, los bloques de texto pasan a paneles
   y los cierres de página se apoyan en fotos de obra.
   ====================================================================== */

/* Zonas sobre fotografía: siempre con los tokens oscuros */
.photo-band,
.page-cta {
    --bg: var(--c-night);
    --surface: #0b1330;
    --line: rgba(255, 255, 255, 0.14);
    --line-strong: rgba(255, 255, 255, 0.32);
    --text: #eef1f7;
    --muted: #c9d1e6;
    --subtle: #9aa6c4;
    --accent: var(--c-green);
    --accent-hover: var(--c-green-hover);
    --accent-ink: var(--c-ink);
}

/* Ritmo: las secciones alternas cambian de tono */
.content-section--alt { background: var(--surface-alt); }

/* Titulares: más escala y el trazo verde de la ruta, que se dibuja al aparecer */
.content-section h2 {
    font-size: clamp(1.9rem, 3.8vw, 2.9rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    max-width: 24ch;
}
.content-section h2::before,
.photo-band__title::before {
    content: '';
    display: block;
    width: 2.75rem;
    height: 3px;
    margin-bottom: 1.1rem;
    background: var(--accent);
    transform-origin: left;
}
.js-anim [data-reveal] h2::before,
.js-anim h2[data-reveal]::before { transform: scaleX(0); transition: transform 0.8s var(--ease) 0.2s; }
.js-anim [data-reveal].is-visible h2::before,
.js-anim h2[data-reveal].is-visible::before { transform: scaleX(1); }
.content-section > .container > h2 + p { font-size: 1.08rem; line-height: 1.7; }

/* Apertura de sector: texto y foto lado a lado */
.sector-intro { display: grid; gap: 2.5rem 4rem; align-items: center; }
.sector-intro__text h2 { margin-bottom: 1.25rem; }
.content-section .sector-intro__text p { font-size: 1.08rem; line-height: 1.7; max-width: 46ch; }
.sector-intro__media { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3rem), calc(100% - 3rem) 100%, 0 100%); }
.sector-intro__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease); }
@media (hover: hover) { .sector-intro__media:hover img { transform: scale(1.04); } }
.content-section > .container > .sector-intro + * { margin-top: clamp(3rem, 6vw, 4.5rem); }
@media (min-width: 56rem) { .sector-intro { grid-template-columns: 1fr 1.1fr; } }

/* Paneles: los bloques de texto en rejilla pasan a tarjetas con relieve.
   Al pasar el cursor suben y el trazo verde recorre el borde superior. */
.sector-benefits, .gobernanza-items, .governance-structure, .reportes-grid, .eventos-lista,
.offices-grid, .sustainability-pillars, .compliance-info, .contact-cards { gap: 1rem; }
.card, .benefit, .item, .structure-item, .reporte-card, .evento-item,
.office-item, .pillar, .compliance-item, .contact-info {
    overflow: hidden;
    padding: 1.75rem 1.5rem 1.6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.card:not(.form-card)::after, .benefit::after, .item::after, .structure-item::after, .reporte-card::after,
.evento-item::after, .office-item::after, .pillar::after, .compliance-item::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease);
}
@media (hover: hover) {
    :is(.card:not(.form-card), .benefit, .item, .structure-item, .reporte-card, .evento-item, .office-item, .pillar, .compliance-item):hover {
        transform: translateY(-4px);
        border-color: var(--line-strong);
        box-shadow: 0 1.5rem 2.5rem -1.75rem rgba(6, 10, 23, 0.7);
    }
    :is(.card:not(.form-card), .benefit, .item, .structure-item, .reporte-card, .evento-item, .office-item, .pillar, .compliance-item):hover::after { transform: scaleX(1); }
}
.content-section :is(.card, .benefit, .item, .structure-item, .reporte-card, .evento-item, .office-item, .pillar, .compliance-item) h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.contact-info { padding: 1.75rem; }
.form-card { padding: clamp(1.5rem, 4vw, 2.5rem); }

/* Íconos de línea para los paneles que tienen un tipo claro (documento, fecha, lugar…) */
.reporte-card::before, .evento-item::before, .office-item::before, .contact-cards .card::before,
.pillar::before, .compliance-item::before {
    content: '';
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 1.25rem;
    background: var(--accent);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.reporte-card { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E"); }
.evento-item { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='1'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18M8 14h2M14 14h2M8 17h2'/%3E%3C/svg%3E"); }
.office-item, .contact-cards .card:nth-child(1) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.contact-cards .card:nth-child(2) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.contact-cards .card:nth-child(3) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='1'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E"); }
.contact-cards .card:nth-child(4) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.pillar:nth-child(1) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.5 19 2c1 2 2 4.2 2 8 0 5.5-4.8 10-10 10z'/%3E%3Cpath d='M2 21c0-3 1.9-5.4 5.1-6C9.5 14.5 12 13 13 12'/%3E%3C/svg%3E"); }
.pillar:nth-child(2) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E"); }
.pillar:nth-child(3), .compliance-item { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }

/* Estructura de gobierno: una secuencia real (de la asamblea a la gerencia),
   por eso lleva número */
.governance-structure { counter-reset: gov; }
.structure-item { counter-increment: gov; }
.structure-item::before {
    content: counter(gov, decimal-leading-zero);
    display: block;
    margin-bottom: 1.25rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1;
    color: var(--accent);
}

/* Servicios: filas amplias de título y descripción, en vez de columnas sueltas */
.services-grid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line-strong); }
.service-card {
    display: grid;
    gap: 0.5rem 3rem;
    padding: 1.75rem 0;
    border-top: 0;
    border-bottom: 1px solid var(--line-strong);
}
.service-card::after {
    content: '';
    position: absolute;
    left: 0; bottom: -1px;
    width: 100%;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.7s var(--ease);
}
.content-section .service-card h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.3rem, 2.4vw, 1.9rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    transition: color 0.4s var(--ease), transform 0.6s var(--ease);
}
.content-section .service-card p { font-size: 1rem; line-height: 1.65; max-width: 52ch; }
@media (min-width: 48rem) {
    .service-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: baseline; padding: 2.1rem 0; }
}
@media (hover: hover) {
    .service-card:hover::after { transform: scaleX(1); }
    .service-card:hover h3 { color: var(--accent); transform: translateX(0.75rem); }
}

/* Cifras: el verde de acción se reserva para los números destacados */
.stat h3, .team-stat .stat-number {
    font-size: clamp(2rem, 3.6vw, 3rem);
    white-space: nowrap;
    color: var(--accent);
}
.content-section .stat p, .team-stat p { font-size: 0.9rem; color: var(--muted); }

/* Proyectos y áreas de expertise: foto a sangre con el texto encima */
.proyectos-grid, .expertise-grid { gap: 1rem; }
.proyecto-card, .expertise-card {
    justify-content: flex-end;
    min-height: 26rem;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    overflow: hidden;
    background: var(--c-night);
    --text: #fff;
    --muted: #dfe5f2;
}
.expertise-card { min-height: 24rem; }
.proyecto-card .card-media, .expertise-card .card-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
    filter: saturate(0.75) contrast(1.08);
    transform: scale(1.01);
    transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
}
.proyecto-card::before, .expertise-card::before {
    inset: 0;
    z-index: -1;
    aspect-ratio: auto;
    mix-blend-mode: normal;
    opacity: 1;
    background:
        linear-gradient(180deg, rgba(6, 10, 23, 0) 15%, rgba(6, 10, 23, 0.72) 50%, rgba(6, 10, 23, 0.96) 100%),
        linear-gradient(0deg, rgba(38, 57, 138, 0.28), rgba(38, 57, 138, 0.28));
}
.proyecto-card::after, .expertise-card::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 3rem;
    height: 3px;
    background: var(--c-green);
    transition: width 0.7s var(--ease);
}
.content-section .proyecto-card h3, .content-section .expertise-card h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.3rem, 2vw, 1.55rem);
    line-height: 1.12;
    color: #fff;
}
.proyecto-card p, .expertise-card p { color: #dfe5f2; }
.proyecto-card .proyecto-sector {
    align-self: flex-start;
    margin-bottom: 0.85rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--c-ink);
    background: var(--c-green);
}
.proyecto-card .proyecto-link { margin-top: 0; padding-top: 1.1rem; color: #fff; text-decoration-color: var(--c-green); }
@media (hover: hover) {
    :is(.proyecto-card, .expertise-card):hover .card-media { transform: scale(1.07); filter: saturate(1) contrast(1.08); }
    :is(.proyecto-card, .expertise-card):hover::after { width: 100%; }
}

/* Valores: una cinta continua en la tipografía de titulares */
.values__track { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.values ul.is-marquee { flex-wrap: nowrap; width: max-content; gap: 0; animation: marquee 32s linear infinite; }
.values ul.is-marquee li { display: flex; align-items: center; white-space: nowrap; font-size: clamp(2rem, 5vw, 3.75rem); }
.values ul.is-marquee li::after {
    content: '';
    width: 0.55rem;
    height: 0.55rem;
    margin: 0 clamp(1.5rem, 3vw, 2.75rem);
    background: var(--accent);
    transform: rotate(45deg);
}
.values:hover ul.is-marquee { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Certificaciones: la fila se ilumina y se desplaza al pasar el cursor */
.cert-item { position: relative; transition: background-color 0.4s var(--ease), padding 0.5s var(--ease); }
.cert-item h3 { transition: color 0.4s var(--ease); }
@media (hover: hover) {
    .cert-item:hover { padding-left: 1.25rem; background: var(--surface-alt); }
    .cert-item:hover h3 { color: var(--accent); }
}

/* Enlaces de tarjeta con flecha que avanza */
.reporte-link::after, .evento-link::after { content: ' →'; display: inline-block; transition: transform 0.35s var(--ease); }
.reporte-link:hover::after, .evento-link:hover::after { transform: translateX(0.3rem); }

/* Franja fotográfica: cierra el contenido con una foto de obra a sangre */
.photo-band {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(26rem, 62vh, 38rem);
    padding: var(--section-y) 0;
    overflow: hidden;
    background: var(--c-night);
    color: var(--text);
}
.photo-band__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.8) contrast(1.08);
    transform: scale(1.1);
    transition: transform 2.4s var(--ease);
}
.photo-band.is-visible .photo-band__img, .photo-band:not([data-reveal]) .photo-band__img { transform: scale(1.01); }
.photo-band::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(6, 10, 23, 0.94) 0%, rgba(6, 10, 23, 0.78) 45%, rgba(6, 10, 23, 0.25) 100%),
        linear-gradient(0deg, rgba(38, 57, 138, 0.25), rgba(38, 57, 138, 0.25));
}
.photo-band__inner { width: 100%; }
.photo-band__title {
    font-size: clamp(2rem, 4.6vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    max-width: 16ch;
    color: #fff;
}
.photo-band__text {
    margin-top: 1.25rem;
    max-width: 48ch;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.7;
    color: var(--muted);
}

/* Cierre de cada página: foto nocturna de obra en movimiento lento */
.page-cta {
    overflow: hidden;
    padding: clamp(5rem, 10vw, 8rem) 0;
    border-top: 0;
    background: var(--c-night);
    color: var(--text);
}
.page-cta::before {
    z-index: -2;
    opacity: 1;
    background: url("../images/portadas/hero-proyectos.jpg") center / cover no-repeat;
    filter: saturate(0.8) contrast(1.05);
    -webkit-mask: none;
    mask: none;
    animation: ken-burns 26s ease-in-out infinite alternate;
}
.page-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(6, 10, 23, 0.95) 0%, rgba(6, 10, 23, 0.8) 50%, rgba(6, 10, 23, 0.5) 100%),
        linear-gradient(0deg, rgba(38, 57, 138, 0.25), rgba(38, 57, 138, 0.25));
}
.page-cta__title { font-size: clamp(1.9rem, 4vw, 3.1rem); color: #fff; }
.page-cta__text { color: var(--muted); font-size: 1.05rem; }
@keyframes ken-burns { from { transform: scale(1.02); } to { transform: scale(1.12) translateX(-1.5%); } }

/* --- Inicio y elementos comunes, mismo lenguaje que las páginas internas --- */

/* Hitos: las cifras clave en el verde de acción */
.milestone__number { color: var(--accent); }

/* Sectores: la foto respira al pasar el cursor y lleva el trazo verde al pie */
.sector-panel__media img { transition: transform 1.2s var(--ease), filter 0.6s var(--ease); }
.sector-panel__media::before {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    z-index: 2;
    width: 3rem;
    height: 3px;
    background: var(--c-green);
    transition: width 0.8s var(--ease);
}
@media (hover: hover) {
    .sector-panel:hover .sector-panel__media img { transform: scale(1.05); filter: saturate(0.95) contrast(1.08); }
    .sector-panel:hover .sector-panel__media::before { width: 100%; }
}
.sector-tab[aria-selected="true"] { color: var(--text); }

/* Carrusel de obras: foto a sangre con el texto encima */
.project-card {
    justify-content: flex-end;
    min-height: 27rem;
    padding: clamp(1.25rem, 2.5vw, 1.6rem);
    overflow: hidden;
    background: var(--c-night);
    color: #fff;
}
.project-card__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    height: 100%;
    aspect-ratio: auto;
    filter: saturate(0.75) contrast(1.08);
    transform: scale(1.01);
    transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
}
.project-card::before {
    inset: 0;
    z-index: -1;
    aspect-ratio: auto;
    mix-blend-mode: normal;
    opacity: 1;
    background:
        linear-gradient(180deg, rgba(6, 10, 23, 0) 20%, rgba(6, 10, 23, 0.7) 55%, rgba(6, 10, 23, 0.96) 100%),
        linear-gradient(0deg, rgba(38, 57, 138, 0.28), rgba(38, 57, 138, 0.28));
}
.project-card::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 3rem;
    height: 3px;
    background: var(--c-green);
    transition: width 0.7s var(--ease);
}
.project-card__tag {
    align-self: flex-start;
    margin: 0 0 0.85rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--c-ink);
    background: var(--c-green);
}
.project-card__body { padding: 0; }
.project-card__title { color: #fff; font-size: clamp(1.3rem, 2vw, 1.55rem); }
.project-card__desc { color: #dfe5f2; }
.project-card__more { color: #fff; }
@media (hover: hover) {
    .project-card:hover .project-card__img { transform: scale(1.07); filter: saturate(1) contrast(1.08); }
    .project-card:hover::after { width: 100%; }
}

/* Certificaciones del inicio: paneles con el escudo de cumplimiento */
.cert-list { gap: 1rem; }
.cert-list li {
    position: relative;
    overflow: hidden;
    padding: 1.6rem 1.4rem;
    background: var(--surface);
    border: 1px solid var(--line);
    transition: transform 0.45s var(--ease), border-color 0.45s var(--ease);
}
.cert-list li::before {
    content: '';
    display: block;
    width: 2rem;
    height: 2rem;
    margin-bottom: 1.1rem;
    background: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cert-list li::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease);
}
@media (hover: hover) {
    .cert-list li:hover { transform: translateY(-4px); border-color: var(--line-strong); }
    .cert-list li:hover::after { transform: scaleX(1); }
}

/* Somos Proinvial: valores como etiquetas y foto con zoom lento */
#sobre-nosotros .plain-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
#sobre-nosotros .plain-list li {
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--line-strong);
    font-size: 0.85rem;
    transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
#sobre-nosotros .plain-list li:hover { border-color: var(--accent); color: var(--accent); }
.split__media img { transition: transform 1.2s var(--ease); }
@media (hover: hover) { .split__media:hover img { transform: scale(1.04); } }

/* Sostenibilidad del inicio: franja fotográfica a todo el ancho */
#sostenibilidad {
    --bg: var(--c-night);
    --line: rgba(255, 255, 255, 0.14);
    --line-strong: rgba(255, 255, 255, 0.32);
    --text: #eef1f7;
    --muted: #c9d1e6;
    --accent: var(--c-green);
    --accent-hover: var(--c-green-hover);
    --accent-ink: var(--c-ink);
    isolation: isolate;
    overflow: hidden;
    min-height: clamp(34rem, 80vh, 46rem);
    display: flex;
    align-items: center;
    background: var(--c-night);
    color: var(--text);
}
#sostenibilidad .split { display: block; }
#sostenibilidad .split__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    clip-path: none;
}
#sostenibilidad .split__media img { height: 100%; aspect-ratio: auto; }
#sostenibilidad .split__media::after {
    opacity: 1;
    mix-blend-mode: normal;
    background:
        linear-gradient(90deg, rgba(6, 10, 23, 0.95) 0%, rgba(6, 10, 23, 0.8) 42%, rgba(6, 10, 23, 0.2) 100%),
        linear-gradient(0deg, rgba(38, 57, 138, 0.25), rgba(38, 57, 138, 0.25));
}
#sostenibilidad .split__content { max-width: 36rem; }
#sostenibilidad .plain-list li { border-top-color: var(--line-strong); font-size: 0.9rem; }

/* Contacto del inicio: cierre sobre foto nocturna, con paneles translúcidos */
#contacto {
    --bg: var(--c-night);
    --surface: #0b1330;
    --line: rgba(255, 255, 255, 0.14);
    --line-strong: rgba(255, 255, 255, 0.32);
    --text: #eef1f7;
    --muted: #c9d1e6;
    --accent: var(--c-green);
    --accent-ink: var(--c-ink);
    isolation: isolate;
    overflow: hidden;
    padding: clamp(5rem, 10vw, 8rem) 0;
    background: var(--c-night);
    color: var(--text);
}
#contacto::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("../images/portadas/hero-proyectos.jpg") center / cover no-repeat;
    filter: saturate(0.8) contrast(1.05);
    animation: ken-burns 26s ease-in-out infinite alternate;
}
#contacto::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(6, 10, 23, 0.9) 0%, rgba(6, 10, 23, 0.72) 60%, rgba(6, 10, 23, 0.9) 100%),
        linear-gradient(0deg, rgba(38, 57, 138, 0.25), rgba(38, 57, 138, 0.25));
}
#contacto .contact__card {
    padding: 1.75rem 1.5rem;
    background: rgba(6, 10, 23, 0.55);
    border: 1px solid var(--line-strong);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: transform 0.45s var(--ease), border-color 0.45s var(--ease);
}
#contacto .contact__icon { color: var(--accent); }
#contacto .contact__icon svg { width: 1.75rem; height: 1.75rem; }
@media (hover: hover) { #contacto .contact__card:hover { transform: translateY(-4px); border-color: var(--accent); } }

/* Pie de página: enlaces que avanzan y se iluminan, frase final con comillas verdes */
.footer::before {
    content: '';
    position: absolute;
    top: -1px; left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--c-green) 0 6rem, transparent 6rem);
}
.footer__list a { transition: color 0.25s var(--ease), transform 0.35s var(--ease); }
.footer__list a:hover { color: var(--accent); transform: translateX(0.25rem); }

/* Portadas internas: el título entra con un trazo verde bajo el subtítulo */
.hero--page .hero__subtitle::after {
    content: '';
    display: block;
    width: 3.5rem;
    height: 3px;
    margin-top: 1.5rem;
    background: var(--c-green);
    transform-origin: left;
    animation: track-draw 1s var(--ease) 0.5s both;
}

/* --- La ruta interactiva (inicio) y la barra de lectura (todas las páginas) --- */

/* Barra de lectura: avance de la página, siempre visible arriba */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    z-index: 1001;
    width: 100%;
    height: 3px;
    background: var(--c-green);
    box-shadow: 0 0 12px rgba(10, 150, 53, 0.6);
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}

/* Línea de la ruta: el verde llega hasta la mitad de la pantalla (--p) */
.ruta__line::after { opacity: 1; transform: scaleY(var(--p, 0)); }
.ruta__head {
    position: absolute;
    left: 50%;
    top: calc(var(--p, 0) * 100%);
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--c-green);
    box-shadow: 0 0 0 4px rgba(10, 150, 53, 0.22), 0 0 22px 6px rgba(10, 150, 53, 0.5);
}
.ruta__head::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--c-green);
    animation: route-pulse 1.8s ease-out infinite;
}
@keyframes route-pulse { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(2.2); opacity: 0; } }

/* Kilómetros: se encienden al pasarlos; el actual crece y dice su nombre */
.km::before { transition: background-color 0.3s, transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.km.is-passed::before { background: var(--c-green); }
.km.is-current::before { transform: scale(1.5); box-shadow: 0 0 0 5px rgba(10, 150, 53, 0.2), 0 0 16px 2px rgba(10, 150, 53, 0.45); }
.km .km__name {
    max-width: 0;
    margin-left: -0.75rem;
    overflow: hidden;
    opacity: 0;
    color: var(--accent);
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    transition: max-width 0.7s var(--ease), opacity 0.4s var(--ease), margin 0.7s var(--ease);
}
.km.is-current .km__name { max-width: 14rem; margin-left: 0; opacity: 1; font-weight: 700; }

/* Navegador de estaciones: columna fija a la derecha (solo escritorio) */
.route-nav { display: none; }
@media (min-width: 64rem) {
    .route-nav {
        display: block;
        position: fixed;
        top: 50%;
        right: clamp(0.85rem, 1.6vw, 1.75rem);
        z-index: 90;
        opacity: 0;
        visibility: hidden;
        transform: translate(1rem, -50%);
        transition: opacity 0.4s var(--ease), transform 0.6s var(--ease), visibility 0.4s;
    }
    .route-nav.is-visible { opacity: 1; visibility: visible; transform: translate(0, -50%); }
    .route-nav ol { position: relative; display: flex; flex-direction: column; gap: 1.05rem; list-style: none; }
    /* Eje discontinuo y avance en verde, como la ruta */
    .route-nav ol::before, .route-nav ol::after {
        content: '';
        position: absolute;
        top: 6px;
        right: 5px;
        width: 1px;
    }
    .route-nav ol::before { bottom: 6px; background: repeating-linear-gradient(180deg, var(--line-strong) 0 5px, transparent 5px 9px); }
    .route-nav ol::after {
        width: 2px;
        right: 4.5px;
        height: calc((100% - 12px) * var(--np, 0));
        background: var(--c-green);
        transition: height 0.6s var(--ease);
    }
    .route-nav a { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; height: 12px; }
    .route-nav__dot {
        width: 11px;
        height: 11px;
        flex-shrink: 0;
        border-radius: 50%;
        background: var(--bg);
        border: 2px solid var(--c-green);
        transition: background-color 0.3s, transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
    }
    .route-nav li.is-passed .route-nav__dot { background: var(--c-green); }
    .route-nav a[aria-current] .route-nav__dot { transform: scale(1.5); box-shadow: 0 0 0 4px rgba(10, 150, 53, 0.22), 0 0 14px 2px rgba(10, 150, 53, 0.5); }
    .route-nav a:hover .route-nav__dot, .route-nav a:focus-visible .route-nav__dot { transform: scale(1.5); }
    /* Etiqueta: aparece al pasar el cursor, con el foco o al llegar a la estación */
    .route-nav__text {
        position: absolute;
        right: 1.6rem;
        padding: 0.4rem 0.7rem;
        white-space: nowrap;
        font-size: 0.78rem;
        font-weight: 600;
        line-height: 1;
        color: #fff;
        background: rgba(6, 10, 23, 0.88);
        border: 1px solid rgba(122, 142, 214, 0.45);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        opacity: 0;
        transform: translateX(0.5rem);
        transition: opacity 0.3s var(--ease), transform 0.4s var(--ease);
        pointer-events: none;
    }
    .route-nav__km { margin-right: 0.45rem; color: var(--c-green); font-variant-numeric: tabular-nums; }
    .route-nav a:hover .route-nav__text,
    .route-nav a:focus-visible .route-nav__text,
    .route-nav li.is-flash .route-nav__text { opacity: 1; transform: none; }
    .route-nav a:focus-visible { outline: none; }
    .route-nav a:focus-visible .route-nav__dot { outline: 2px solid var(--c-green); outline-offset: 3px; }
}

/* ======================================================================
   15. Capa de fluidez v11 (2026-10-20)
   Movimiento continuo y respuesta a cada gesto: portada con objetos 3D
   flotantes, titulares que entran palabra a palabra, header en cápsula de
   vidrio, botones magnéticos, tarjetas con luz que sigue al cursor,
   imágenes con parallax y transiciones entre páginas. Todo lo que se mueve
   lo coordina main.js; aquí quedan los estados y las curvas.
   ====================================================================== */
:root {
    --r-xs: 0.6rem;
    --r-sm: 0.9rem;
    --r-md: 1.25rem;
    --r-lg: 1.75rem;
    --r-pill: 999px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --green-soft: rgba(10, 150, 53, 0.16);
    --green-glow: rgba(10, 150, 53, 0.45);
    --glint: #a8f0bd;              /* brillo que recorre las cifras verdes */
    --glass: rgba(11, 19, 48, 0.55);
    --glass-line: rgba(160, 178, 240, 0.22);
    --blob-a: rgba(38, 57, 138, 0.34);
    --blob-b: rgba(10, 150, 53, 0.11);
    --shadow-lg: 0 2rem 4rem -2rem rgba(0, 0, 0, 0.75);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --glint: #2fc160;
        --glass: rgba(255, 255, 255, 0.62);
        --glass-line: rgba(38, 57, 138, 0.16);
        --blob-a: rgba(38, 57, 138, 0.12);
        --blob-b: rgba(10, 150, 53, 0.1);
        --shadow-lg: 0 2rem 4rem -2rem rgba(11, 19, 48, 0.28);
    }
}
:root[data-theme="light"] {
    --glint: #2fc160;
    --glass: rgba(255, 255, 255, 0.62);
    --glass-line: rgba(38, 57, 138, 0.16);
    --blob-a: rgba(38, 57, 138, 0.12);
    --blob-b: rgba(10, 150, 53, 0.1);
    --shadow-lg: 0 2rem 4rem -2rem rgba(11, 19, 48, 0.28);
}
.hero, .photo-band, .page-cta, #sostenibilidad, #contacto {
    --glass: rgba(11, 19, 48, 0.5);
    --glass-line: rgba(200, 212, 255, 0.22);
    --glint: #a8f0bd;
}

/* Fondo vivo: dos manchas de luz (azul y verde) que derivan muy despacio */
.ambient { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.ambient i {
    position: absolute;
    width: 60vmax;
    height: 60vmax;
    border-radius: 50%;
    background: radial-gradient(circle, var(--blob-a), transparent 62%);
    will-change: transform;
}
.ambient i:nth-child(1) { top: -25vmax; left: -20vmax; animation: drift-a 38s ease-in-out infinite alternate; }
.ambient i:nth-child(2) { bottom: -30vmax; right: -25vmax; background: radial-gradient(circle, var(--blob-b), transparent 62%); animation: drift-b 46s ease-in-out infinite alternate; }
.ambient i:nth-child(3) { top: 30%; left: 40%; width: 40vmax; height: 40vmax; opacity: 0.7; animation: drift-c 52s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(18vw, 22vh) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-22vw, -18vh) scale(0.9); } }
@keyframes drift-c { from { transform: translate(-20vw, -10vh); } to { transform: translate(15vw, 20vh) scale(1.2); } }

/* Las secciones alternas ya no son un tono plano: llevan luz en las esquinas */
.section--alt, .content-section--alt {
    background:
        radial-gradient(55rem 28rem at 100% 0%, rgba(10, 150, 53, 0.07), transparent 62%),
        radial-gradient(50rem 30rem at 0% 100%, rgba(38, 57, 138, 0.2), transparent 62%),
        var(--surface-alt);
}

/* Transición entre páginas: una cortina azul noche con el trazo verde de la ruta */
.curtain {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    background: var(--c-night);
    pointer-events: none;
    clip-path: inset(0 0 100% 0);
}
.curtain__mark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 2rem);
    letter-spacing: 0.06em;
    color: #eef1f7;
    opacity: 0;
}
.curtain__line {
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--c-green);
    box-shadow: 0 0 18px var(--green-glow);
    transform: scaleX(0);
    transform-origin: left;
}
.curtain.is-entering { animation: curtain-out 0.9s var(--ease-out) 0.05s both; }
.curtain.is-entering .curtain__line { animation: curtain-line-out 0.6s var(--ease-out) both; }
.curtain.is-leaving { pointer-events: auto; animation: curtain-in 0.55s var(--ease-out) both; }
.curtain.is-leaving .curtain__mark { animation: fadeIn 0.4s var(--ease-out) 0.15s both; }
.curtain.is-leaving .curtain__line { animation: track-draw 0.6s var(--ease-out) 0.1s both; }
@keyframes curtain-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes curtain-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes curtain-line-out { from { transform: scaleX(1); } to { transform: scaleX(1); transform-origin: right; opacity: 0; } }

/* Titulares que entran palabra a palabra, como si subieran desde una máscara */
.split-text .word { display: inline-block; max-width: 100%; overflow: hidden; vertical-align: top; padding: 0.06em 0.02em 0.12em; margin: -0.06em -0.02em -0.12em; }
.split-text .word__in {
    display: inline-block;
    transform: translate3d(0, 110%, 0) rotate(5deg);
    transform-origin: left bottom;
    transition: transform 1s var(--ease-out) calc(var(--i, 0) * 55ms + var(--delay, 0ms));
}
.split-text.is-in .word__in { transform: none; }
.hero__title.split-text { animation: none; }
.hero__title.split-text-text .word__in { transition-duration: 1.2s; }

/* Header: transparente sobre la portada y, al bajar, una cápsula de vidrio */
@media (min-width: 64rem) {
    .header { transition: top 0.5s var(--ease-out), background-color 0.3s, border-color 0.3s; }
    .header.scrolled { background: transparent; border-bottom-color: transparent; }
    .header__navbar {
        margin: 0 auto;
        border: 1px solid transparent;
        border-radius: var(--r-pill);
        transition: margin 0.6s var(--ease-out), max-width 0.6s var(--ease-out), background-color 0.5s, border-color 0.5s, box-shadow 0.6s var(--ease-out);
        max-width: 100%;
    }
    .header__container { transition: height 0.6s var(--ease-out), padding 0.6s var(--ease-out); }
    .header.scrolled .header__navbar {
        margin-top: 0.75rem;
        max-width: min(calc(100% - 2 * var(--gutter)), calc(var(--max-width-container) - 2 * var(--gutter)));
        background: var(--glass);
        border-color: var(--glass-line);
        box-shadow: var(--shadow-lg);
        -webkit-backdrop-filter: blur(18px) saturate(1.6);
        backdrop-filter: blur(18px) saturate(1.6);
    }
    .header.scrolled .header__container { height: 4rem; padding: 0 0.5rem 0 1.5rem; }
    .header__menu { position: relative; top: auto; }
    /* Píldora que sigue al cursor entre los enlaces del menú */
    .nav-ink {
        position: absolute;
        top: 50%;
        left: 0;
        height: 2.5rem;
        border-radius: var(--r-pill);
        background: rgba(255, 255, 255, 0.08);
        transform: translate(var(--x, 0), -50%);
        width: var(--w, 0);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out), opacity 0.3s;
        z-index: -1;
    }
    .header.scrolled .nav-ink { background: var(--green-soft); }
    .nav-ink.is-on { opacity: 1; }
    .header__link:hover { color: var(--text); }
    .header__link.is-current { box-shadow: none; }
    .header__link.is-current::after {
        content: '';
        position: absolute;
        left: 50%; bottom: 0.15rem;
        width: 5px; height: 5px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 10px var(--green-glow);
        transform: translateX(-50%);
    }
    .header__link { position: relative; }
    .header__item:hover > .header__link .chev, .header__item:focus-within > .header__link .chev { transform: rotate(180deg); }

    /* Desplegable: cae con un leve resorte y los enlaces llegan en cascada */
    .header__dropdown {
        top: calc(100% + 0.85rem);
        padding: 0.45rem;
        border-radius: var(--r-md);
        background: var(--glass);
        border-color: var(--glass-line);
        box-shadow: var(--shadow-lg);
        -webkit-backdrop-filter: blur(20px) saturate(1.5);
        backdrop-filter: blur(20px) saturate(1.5);
        transform: translateY(0.6rem) scale(0.97);
        transform-origin: top left;
        transition: opacity 0.3s var(--ease-out), transform 0.5s var(--spring), visibility 0.3s;
    }
    .header__item:hover .header__dropdown,
    .header__item:focus-within .header__dropdown { transform: none; }
    .header__dropdown a {
        border-left: 0;
        border-radius: var(--r-xs);
        padding: 0.65rem 0.9rem;
        transition: background-color 0.25s, color 0.25s, transform 0.35s var(--ease-out);
    }
    .header__dropdown a:hover, .header__dropdown a[aria-current] { background: var(--green-soft); transform: translateX(0.25rem); }
    .header__dropdown li { opacity: 0; transform: translateY(0.4rem); transition: opacity 0.3s, transform 0.45s var(--ease-out); }
    .header__item:hover .header__dropdown li,
    .header__item:focus-within .header__dropdown li { opacity: 1; transform: none; }
    .header__dropdown li:nth-child(2) { transition-delay: 0.04s; }
    .header__dropdown li:nth-child(3) { transition-delay: 0.08s; }
    .header__dropdown li:nth-child(4) { transition-delay: 0.12s; }
}

/* Menú móvil: los enlaces entran en cascada al abrir */
@media (max-width: 63.99rem) {
    .header__menu > li { opacity: 0; transform: translateX(2rem); transition: opacity 0.4s, transform 0.6s var(--ease-out); }
    .header__menu.active > li { opacity: 1; transform: none; }
    .header__menu.active > li:nth-child(2) { transition-delay: 0.05s; }
    .header__menu.active > li:nth-child(3) { transition-delay: 0.1s; }
    .header__menu.active > li:nth-child(4) { transition-delay: 0.15s; }
    .header__menu.active > li:nth-child(5) { transition-delay: 0.2s; }
    .header__link { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; }
    .header__hamburger { border-radius: var(--r-pill); }
}

/* Botones: cápsulas con brillo que cruza, ícono que gira y efecto magnético */
.button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    gap: 0.75rem;
    border-radius: var(--r-pill);
    transition: transform 0.45s var(--ease-out), translate 0.5s var(--spring), background-color 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.45s var(--ease-out);
}
.button:hover { transform: translateY(-2px); }
.button--primary { box-shadow: 0 0.75rem 1.75rem -1rem var(--green-glow); }
.button--primary:hover { border-color: var(--accent-hover); box-shadow: 0 1rem 2.25rem -0.9rem var(--green-glow); }
.button--primary::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
    transform: translateX(-130%);
    transition: transform 0.9s var(--ease-out);
}
.button--primary:hover::before { transform: translateX(130%); }
.button.has-icon { padding-right: 0.4rem; }
.button__icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: -0.5rem 0;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent-ink);
    color: var(--accent);
    transition: transform 0.55s var(--spring);
}
.button__icon svg { width: 1rem; height: 1rem; }
.button:hover .button__icon { transform: rotate(-45deg) scale(1.06); }
.header__cta .button__icon { width: 1.9rem; height: 1.9rem; }

.button--ghost {
    background: rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.button--ghost::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--text);
    transform: translateY(101%);
    transition: transform 0.55s var(--ease-out);
}
.button--ghost:hover { color: var(--bg); border-color: var(--text); }
.button--ghost:hover::before { transform: none; }

/* Enlaces de texto: subrayado que se dibuja y flecha que avanza */
.link-arrow, .text-link {
    border-bottom: 0;
    background: linear-gradient(var(--accent), var(--accent)) left bottom / 0% 2px no-repeat,
                linear-gradient(var(--line-strong), var(--line-strong)) left bottom / 100% 1px no-repeat;
    transition: background-size 0.6s var(--ease-out), color 0.3s;
}
.link-arrow::after, .text-link::after {
    content: '';
    width: 0.9rem;
    height: 0.9rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.45s var(--spring);
}
.link-arrow:hover, .text-link:hover { background-size: 100% 2px, 100% 1px; }
.link-arrow:hover::after, .text-link:hover::after { transform: translateX(0.3rem); }

/* Portadas: marcas de levantamiento flotantes, parallax del cursor y salida al bajar ---- */
.hero__content { will-change: transform, opacity; }
.hero__video-container { will-change: transform; }
.floaters { position: absolute; inset: 0; z-index: 1; pointer-events: none; perspective: 900px; }
.floater { position: absolute; will-change: translate; transition: translate 0.9s var(--ease-out); }
.floater__bob { animation: bob var(--bob, 7s) ease-in-out var(--bob-delay, 0s) infinite alternate; }
@keyframes bob { from { transform: translate3d(0, -8px, 0); } to { transform: translate3d(0, 10px, 0); } }

/* Marcas de levantamiento sobre la toma aérea: hito con pulso, retícula
   GNSS, punto de ruta y perfil longitudinal, como en un visor GIS */
.hud-pin { position: relative; display: flex; align-items: flex-end; gap: 0.55rem; }
.hud-pin__mark { position: relative; width: var(--s, 2.6rem); height: calc(var(--s, 2.6rem) * 1.3); }
.hud-pin__mark svg { position: relative; z-index: 1; width: 100%; height: 100%; filter: drop-shadow(0 0.5rem 0.8rem rgba(6, 10, 23, 0.55)); }
.hud-pin__mark::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.35rem;
    width: 2.6rem;
    height: 0.9rem;
    margin-left: -1.3rem;
    border-radius: 50%;
    border: 1.5px solid rgba(10, 150, 53, 0.9);
    animation: ground-pulse 2.4s ease-out infinite;
}
@keyframes ground-pulse { from { transform: scale(0.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.hud-tag {
    margin-bottom: 0.9rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.4rem;
    background: rgba(9, 14, 32, 0.72);
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #eef1f7;
    white-space: nowrap;
}
.hud-tag b { color: var(--c-green); font-weight: 700; }

.hud-reticle { position: relative; width: var(--s, 5rem); height: var(--s, 5rem); }
.hud-reticle__frame {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(#fff 0 0) top left / 0.9rem 1.5px, linear-gradient(#fff 0 0) top left / 1.5px 0.9rem,
        linear-gradient(#fff 0 0) top right / 0.9rem 1.5px, linear-gradient(#fff 0 0) top right / 1.5px 0.9rem,
        linear-gradient(#fff 0 0) bottom left / 0.9rem 1.5px, linear-gradient(#fff 0 0) bottom left / 1.5px 0.9rem,
        linear-gradient(#fff 0 0) bottom right / 0.9rem 1.5px, linear-gradient(#fff 0 0) bottom right / 1.5px 0.9rem;
    background-repeat: no-repeat;
    opacity: 0.85;
    animation: lock 4s var(--ease-out) infinite;
}
.hud-reticle::before, .hud-reticle::after { content: ''; position: absolute; left: 50%; top: 50%; background: rgba(10, 150, 53, 0.95); }
.hud-reticle::before { width: 1.1rem; height: 1.5px; margin: -0.75px 0 0 -0.55rem; }
.hud-reticle::after { width: 1.5px; height: 1.1rem; margin: -0.55rem 0 0 -0.75px; }
.hud-reticle .hud-tag { position: absolute; left: 50%; top: calc(100% + 0.6rem); margin: 0; transform: translateX(-50%); }
@keyframes lock { 0%, 100% { transform: scale(1.18); opacity: 0.35; } 30%, 80% { transform: scale(1); opacity: 0.9; } }

.hud-waypoint { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #fff; border: 3px solid var(--c-green); box-shadow: 0 0 0 0 var(--green-glow); animation: live 2.2s ease-out infinite; }

.hud-profile { display: grid; gap: 0.35rem; width: max-content; padding: 0.65rem 0.8rem 0.55rem; border-radius: var(--r-md); background: rgba(9, 14, 32, 0.55); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-lg); }
.hud-profile svg { width: var(--s, 13rem); height: auto; overflow: visible; }
.hud-profile .hud-profile__line { fill: none; stroke: var(--c-green); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw 2.2s var(--ease-out) 1.2s forwards; }
.hud-profile .hud-profile__area { fill: url(#prof-fill); opacity: 0; animation: fade-up 1s ease 2.4s forwards; }
.hud-profile .hud-profile__grid { stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; stroke-dasharray: 2 4; }
.hud-profile small { display: flex; justify-content: space-between; gap: 0.6rem; white-space: nowrap; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; color: #b3bdd6; }
.hud-profile small b { color: #fff; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-up { to { opacity: 1; } }

/* Fichas de vidrio con un dato de la empresa */
.chip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.1rem 0.7rem 0.7rem;
    border-radius: var(--r-md);
    background: var(--glass);
    border: 1px solid var(--glass-line);
    box-shadow: var(--shadow-lg);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    color: #eef1f7;
    white-space: nowrap;
}
.chip__icon {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--r-sm);
    background: var(--c-green);
    color: var(--c-ink);
}
.chip__icon svg { width: 1.2rem; height: 1.2rem; }
.chip strong { display: block; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.1; color: #fff; }
.chip small { display: block; font-size: 0.72rem; font-weight: 600; color: #b3bdd6; }
.chip__bars { display: flex; align-items: flex-end; gap: 3px; height: 1.6rem; margin-left: 0.25rem; }
.chip__bars i { width: 4px; border-radius: 2px; background: var(--c-green); animation: bars 1.6s ease-in-out infinite alternate; }
.chip__bars i:nth-child(1) { height: 40%; }
.chip__bars i:nth-child(2) { height: 70%; animation-delay: 0.2s; }
.chip__bars i:nth-child(3) { height: 55%; animation-delay: 0.4s; }
.chip__bars i:nth-child(4) { height: 100%; animation-delay: 0.6s; }
@keyframes bars { to { transform: scaleY(0.55); } }
.chip__live { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 0 0 var(--green-glow); animation: live 2s ease-out infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 0.6rem rgba(10, 150, 53, 0); } 100% { box-shadow: 0 0 0 0 rgba(10, 150, 53, 0); } }

/* Entrada escalonada de los objetos al cargar */
.floater__bob { animation: pop-in 1.1s var(--spring) var(--in, 0.4s) both, bob var(--bob, 7s) ease-in-out calc(var(--in, 0.4s) + 1.1s) infinite alternate; }
@keyframes pop-in { from { opacity: 0; transform: scale(0.4) translateY(2rem); } to { opacity: 1; transform: none; } }

/* Posiciones: a la derecha del titular, sin taparlo */
.floaters--home .f1 { top: 22%; right: 12%; }
.floaters--home .f2 { top: 46%; right: 30%; }
.floaters--home .f3 { bottom: 16%; right: 6%; }
.floaters--home .f4 { top: 30%; right: 32%; }
.floaters--home .f5 { top: 60%; right: 14%; }
.floaters--home .f6 { top: 15%; right: 40%; }
.floaters--home .f7 { bottom: 26%; right: 38%; }
.floaters--page .f1 { top: 26%; right: 10%; }
.floaters--page .f2 { top: 56%; right: 24%; }
.floaters--page .f3 { bottom: 12%; right: 5%; }
@media (max-width: 63.99rem) {
    .floater--chip, .floaters .f6, .floaters .f7 { display: none; }
    .floaters--home .f1 { top: 16%; right: 6%; }
    .floaters--home .f2 { top: 24%; right: 34%; }
    .floaters { opacity: 0.75; }
    .floaters .f3 { display: none; }
    .floaters .hud-reticle { --s: 3.5rem !important; }
}
@media (max-width: 40rem) {
    .floaters--page { display: none; }
    .floaters--home .f2 { display: none; }
    .floaters .hud-reticle .hud-tag { display: none; }
}

/* Indicador de desplazamiento al pie de la portada */
.scroll-cue {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 1.75rem;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    transform: translateX(-50%);
    animation: fadeIn 1s var(--ease-out) 1.4s backwards;
    transition: color 0.3s;
}
.scroll-cue:hover { color: var(--text); }
.scroll-cue__mouse { position: relative; width: 1.4rem; height: 2.2rem; border: 1.5px solid currentColor; border-radius: var(--r-pill); }
.scroll-cue__mouse::after {
    content: '';
    position: absolute;
    left: 50%; top: 0.4rem;
    width: 3px; height: 0.45rem;
    margin-left: -1.5px;
    border-radius: 2px;
    background: var(--c-green);
    animation: wheel 1.8s var(--ease-out) infinite;
}
@keyframes wheel { 0% { opacity: 0; transform: translateY(-0.2rem); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(0.75rem); } }
@media (min-width: 48rem) { .scroll-cue { display: flex; } }

/* Hitos: las cifras llevan un brillo que las recorre y el nodo late */
.milestone__number, .sector-panel__number, .stat h3, .team-stat .stat-number, .region__fact strong {
    background: linear-gradient(100deg, var(--accent) 0%, var(--accent) 40%, var(--glint) 50%, var(--accent) 60%, var(--accent) 100%) 100% 0 / 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: background-position 1.6s var(--ease-out);
}
.milestone__sign { color: inherit; }
.milestone.is-visible .milestone__number, .stat.is-visible h3, .team-stat.is-visible .stat-number,
.region__fact.is-visible strong,
.milestone:hover .milestone__number, .stat:hover h3, .team-stat:hover .stat-number, .region__fact:hover strong { background-position: 0 0; }
.milestone { transition: transform 0.5s var(--ease-out); }
.milestone::before { transition: transform 0.5s var(--spring), box-shadow 0.5s; }
.milestone::after {
    content: '';
    position: absolute;
    top: -6px; left: 0;
    width: 11px; height: 11px;
    border-radius: 50%;
    border: 2px solid var(--c-green);
    animation: route-pulse 2.4s ease-out infinite;
    pointer-events: none;
}
.milestone:nth-child(2)::after { animation-delay: 0.6s; }
.milestone:nth-child(3)::after { animation-delay: 1.2s; }
.milestone:nth-child(4)::after { animation-delay: 1.8s; }
@media (hover: hover) {
    .milestone:hover { transform: translateY(-6px); }
    .milestone:hover::before { transform: scale(1.5); box-shadow: 0 0 18px var(--green-glow); }
}

/* Pestañas y filtros: una cápsula verde se desliza hasta la opción activa */
.sector-tabs, .proyectos-filtros { position: relative; isolation: isolate; border-bottom: 0; gap: 0.35rem; padding: 0.35rem; border-radius: var(--r-pill); background: var(--surface-alt); border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.sector-tab, .filtro-btn { border-bottom: 0; margin: 0; padding: 0.7rem 1.15rem; border-radius: var(--r-pill); transition: color 0.35s; }
.sector-tab:first-child { padding-left: 1.15rem; }
.sector-tab:hover, .filtro-btn:hover { border-bottom-color: transparent; color: var(--text); }
.sector-tab[aria-selected="true"], .filtro-btn.active { color: var(--accent-ink); border-bottom-color: transparent; }
.tab-ink {
    position: absolute;
    z-index: -1;
    top: 0.35rem;
    bottom: 0.35rem;
    left: 0;
    width: var(--w, 0);
    border-radius: var(--r-pill);
    background: var(--accent);
    box-shadow: 0 0.5rem 1.25rem -0.5rem var(--green-glow);
    transform: translateX(var(--x, 0));
    transition: transform 0.6s var(--spring), width 0.6s var(--spring);
}
.sector-tabs:not(.has-ink) .sector-tab[aria-selected="true"], .proyectos-filtros:not(.has-ink) .filtro-btn.active { background: var(--accent); }

/* Cambio de panel: la foto se abre como una cortina y el texto sube en cascada */
.sector-panel__media { border-radius: var(--r-lg); }
.sector-panel.is-entering .sector-panel__media { animation: wipe-in 1s var(--ease-out) both; }
.sector-panel.is-entering .sector-panel__media img { animation: settle 1.4s var(--ease-out) both; }
.sector-panel.is-entering .sector-panel__body > * { animation: fadeIn 0.8s var(--ease-out) both; }
.sector-panel.is-entering .sector-panel__body > :nth-child(2) { animation-delay: 0.08s; }
.sector-panel.is-entering .sector-panel__body > :nth-child(3) { animation-delay: 0.16s; }
.sector-panel.is-entering .sector-panel__body > :nth-child(4) { animation-delay: 0.24s; }
.sector-panel.is-entering .sector-panel__body > :nth-child(5) { animation-delay: 0.32s; }
@keyframes wipe-in { from { clip-path: inset(0 100% 0 0 round var(--r-lg)); } to { clip-path: inset(0 0 0 0 round var(--r-lg)); } }
@keyframes settle { from { transform: scale(1.25); } to { transform: none; } }

/* Filtro de proyectos: las tarjetas que quedan entran con un pequeño salto */
.proyecto-card.is-popping { animation: card-pop 0.7s var(--spring) both; animation-delay: calc(var(--k, 0) * 60ms); }
@keyframes card-pop { from { opacity: 0; transform: translateY(1.5rem) scale(0.94); } to { opacity: 1; transform: none; } }

/* Imágenes: esquinas suaves y apertura con máscara al entrar en pantalla */
.split__media, .sector-intro__media, .wide-media, .media-block__media { clip-path: none; border-radius: var(--r-lg); }
@media (min-width: 48rem) { .wide-media { clip-path: none; } }
.js-anim .media-reveal { clip-path: inset(10% 10% 10% 10% round var(--r-lg)); transition: clip-path 1.3s var(--ease-out); }
.js-anim .media-reveal img, .js-anim .media-reveal video { transform: scale(1.3); transition: transform 1.6s var(--ease-out); }
.js-anim .media-reveal.is-revealed { clip-path: inset(0 0 0 0 round var(--r-lg)); }
.js-anim .media-reveal.is-revealed img, .js-anim .media-reveal.is-revealed video { transform: none; }
@media (hover: hover) {
    .js-anim .split__media.is-revealed:hover img, .js-anim .sector-intro__media.is-revealed:hover img { transform: scale(1.05); }
}
#sostenibilidad .split__media { border-radius: 0; }
.js-anim #sostenibilidad .split__media.media-reveal { clip-path: none; }
/* Parallax: la foto se mueve más lento que la página (main.js fija translate) */
.parallax { scale: 1.14; will-change: translate; }

/* Tarjetas con luz: un halo verde sigue al cursor dentro de cada panel */
.card, .benefit, .item, .structure-item, .reporte-card, .evento-item,
.office-item, .pillar, .compliance-item, .contact-info, .cert-list li {
    border-radius: var(--r-md);
    background:
        radial-gradient(24rem circle at var(--mx, 50%) var(--my, -30%), rgba(10, 150, 53, 0.13), transparent 55%),
        var(--surface);
}
#contacto .contact__card {
    border-radius: var(--r-md);
    background:
        radial-gradient(22rem circle at var(--mx, 50%) var(--my, -30%), rgba(10, 150, 53, 0.18), transparent 55%),
        rgba(6, 10, 23, 0.55);
}
.card::after, .benefit::after, .item::after, .structure-item::after, .reporte-card::after,
.evento-item::after, .office-item::after, .pillar::after, .compliance-item::after, .cert-list li::after { border-radius: var(--r-md) var(--r-md) 0 0; }
.reporte-card::before, .evento-item::before, .office-item::before, .contact-cards .card::before,
.pillar::before, .compliance-item::before, .cert-list li::before { transition: transform 0.6s var(--spring); }
@media (hover: hover) {
    :is(.reporte-card, .evento-item, .office-item, .contact-cards .card, .pillar, .compliance-item, .cert-list li):hover::before { transform: rotate(-8deg) scale(1.15); }
}
.structure-item::before { transition: transform 0.6s var(--spring), letter-spacing 0.6s var(--ease-out); }
@media (hover: hover) { .structure-item:hover::before { transform: translateX(0.25rem); letter-spacing: 0.04em; } }

/* Tarjetas fotográficas: esquinas grandes e inclinación 3D al pasar el cursor */
.project-card, .proyecto-card, .expertise-card, .region-card {
    border-radius: var(--r-lg);
    transform-style: preserve-3d;
    transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out);
}
.project-card:hover, .proyecto-card:hover, .expertise-card:hover, .region-card:hover { box-shadow: var(--shadow-lg); }
.project-card.is-tilting, .proyecto-card.is-tilting, .expertise-card.is-tilting, .region-card.is-tilting { transition: transform 0.15s linear, box-shadow 0.7s var(--ease-out); }
.project-card__tag, .proyecto-card .proyecto-sector, .region-card .region-card__badge, .region-card__countries li { border-radius: var(--r-pill); }
.project-card__tag, .proyecto-card .proyecto-sector { padding: 0.32rem 0.75rem; }
/* Reflejo que recorre la foto */
.tilt-glare {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(30rem circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.16), transparent 45%);
    opacity: 0;
    transition: opacity 0.5s;
}
.is-tilting .tilt-glare { opacity: 1; }

/* Carrusel: se puede arrastrar con el ratón */
.carousel__track { cursor: grab; padding-bottom: 0.5rem; }
.carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.carousel__track.is-dragging .project-card { pointer-events: none; }
.carousel__btn { border-radius: 50%; transition: border-color 0.3s, background-color 0.3s, color 0.3s, transform 0.45s var(--spring), translate 0.5s var(--spring); }
.carousel__btn:hover:not(:disabled) { background: var(--text); color: var(--bg); border-color: var(--text); }
.carousel__progress { border-radius: 2px; }
.carousel__progress span { border-radius: 2px; box-shadow: 0 0 12px var(--green-glow); }

/* Servicios: la fila se desliza y aparece una flecha */
.service-card { transition: padding 0.6s var(--ease-out); }
.content-section .service-card h3 { display: flex; align-items: center; gap: 0.75rem; }
.content-section .service-card h3::before {
    content: '';
    width: 0;
    height: 1.1rem;
    flex-shrink: 0;
    background: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") left center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") left center / contain no-repeat;
    transition: width 0.5s var(--ease-out);
}
@media (hover: hover) {
    .service-card:hover h3 { transform: none; }
    .content-section .service-card:hover h3::before { width: 1.1rem; }
}

/* Regiones y valores del inicio en cápsulas */
#sobre-nosotros .plain-list li { border-radius: var(--r-pill); padding: 0.5rem 1rem; transition: border-color 0.3s, color 0.3s, background-color 0.3s, transform 0.45s var(--spring); }
#sobre-nosotros .plain-list li:hover { background: var(--green-soft); transform: translateY(-3px); }
.country-list li { transition: color 0.3s, padding 0.45s var(--ease-out); }
.country-list li:hover { color: var(--text); padding-left: 0.4rem; }

/* Mapa: la ruta se dibuja sola y los puntos laten */
.region__map .route { stroke-dasharray: 4 6; animation: dash-run 6s linear infinite; }
@keyframes dash-run { to { stroke-dashoffset: -100; } }
.region__map .pin { transform-box: fill-box; transform-origin: center; animation: pin-pulse 2.6s ease-in-out infinite; }
.region__map .pin:nth-of-type(3n) { animation-delay: 0.6s; }
.region__map .pin:nth-of-type(3n + 1) { animation-delay: 1.2s; }
.region__map .pin--office { animation: none; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)); }
@keyframes pin-pulse { 50% { transform: scale(1.6); opacity: 0.6; } }

/* Formularios: campos redondeados con halo verde al escribir */
.content-section input, .content-section textarea, .content-section select {
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    transition: border-color 0.3s, box-shadow 0.4s var(--ease-out), background-color 0.3s;
}
.content-section input:hover, .content-section textarea:hover { border-color: var(--text); }
.content-section input:focus, .content-section textarea:focus, .content-section select:focus { box-shadow: 0 0 0 4px var(--green-soft); }
.form-card { border-radius: var(--r-lg); }

/* Certificados: copia informativa del documento (con marca de agua) junto a su
   ficha; al pulsarla se abre en un visor a pantalla completa ------------------ */
.cert-list--3 { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .cert-list.cert-list--3 { grid-template-columns: repeat(3, 1fr); } }
.cert-cards { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 64rem) { .cert-cards { grid-template-columns: repeat(2, 1fr); } }
.cert-card {
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface, rgba(255, 255, 255, 0.02));
}
@media (min-width: 40rem) { .cert-card { grid-template-columns: 11rem minmax(0, 1fr); align-items: start; } }
.cert-card__preview {
    position: relative;
    display: block;
    width: 100%;
    max-width: 14rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: #fff;
    cursor: zoom-in;
    box-shadow: 0 1.25rem 2.5rem -1.25rem rgba(0, 0, 0, 0.55);
    transform: rotate(-2deg);
    transition: transform 0.5s var(--spring, var(--ease-out)), box-shadow 0.5s var(--ease-out);
}
.cert-card__preview img { display: block; width: 100%; height: auto; }
.cert-card__preview:hover, .cert-card__preview:focus-visible { transform: rotate(0) scale(1.03); box-shadow: 0 1.75rem 3rem -1.25rem rgba(0, 0, 0, 0.65); }
.cert-card__zoom {
    position: absolute;
    inset: auto 0.5rem 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 999px;
    background: rgba(9, 14, 32, 0.85);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    opacity: 0;
    transform: translateY(0.4rem);
    transition: opacity 0.3s, transform 0.3s var(--ease-out);
}
.cert-card__preview:hover .cert-card__zoom, .cert-card__preview:focus-visible .cert-card__zoom { opacity: 1; transform: none; }
@media (hover: none) { .cert-card__zoom { opacity: 1; transform: none; } }
.cert-card__body > * + * { margin-top: 0.6rem; }
.cert-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem 0.3rem 0.5rem;
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.cert-card__badge svg { width: 1rem; height: 1rem; }
.cert-card__title { margin: 0.75rem 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; line-height: 1.1; }
.cert-card__name { color: var(--text); font-weight: 600; }
.cert-card__body p:not(.cert-card__name) { color: var(--muted); font-size: 0.92rem; }
.cert-card__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.25rem; margin: 1.25rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.cert-card__meta dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cert-card__meta dd { margin: 0.2rem 0 0; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.cert-note { max-width: 46rem; margin-top: clamp(1.5rem, 3vw, 2rem); font-size: 0.85rem; color: var(--muted); }
.cert-note a { color: var(--accent); font-weight: 600; }

.scope-list { display: grid; gap: 0 2rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 48rem) { .scope-list { grid-template-columns: repeat(2, 1fr); } }
.scope-list li { position: relative; padding: 0.9rem 0 0.9rem 1.6rem; border-top: 1px solid var(--line); font-size: 0.95rem; }
.scope-list li::before { content: ''; position: absolute; left: 0; top: 1.35rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; border: 2px solid var(--c-green); }

.cert-dialog {
    width: min(40rem, calc(100vw - 2rem));
    margin: auto;
    max-height: calc(100dvh - 2rem);
    padding: 0;
    border: 0;
    border-radius: var(--r-md);
    background: #fff;
    overflow: auto;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.6);
}
.cert-dialog::backdrop { background: rgba(6, 10, 23, 0.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cert-dialog[open] { animation: cert-in 0.45s var(--spring, var(--ease-out)); }
@keyframes cert-in { from { opacity: 0; transform: translateY(1.5rem) scale(0.96); } }
.cert-dialog img { display: block; width: 100%; height: auto; }
.cert-dialog form { position: sticky; top: 0; height: 0; z-index: 1; }
.cert-dialog__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: rgba(9, 14, 32, 0.85);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

/* Canales: WhatsApp flotante, aviso emergente y estado de los formularios -- */
.wa-float {
    position: fixed;
    right: clamp(1rem, 2vw, 1.75rem);
    bottom: calc(clamp(1rem, 2vw, 1.75rem) + 4rem);
    z-index: 95;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 3.25rem;
    padding: 0 1.1rem 0 0.95rem;
    border-radius: 999px;
    background: #25d366;
    color: #06240f;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 0.75rem 1.75rem -0.5rem rgba(37, 211, 102, 0.55);
    transition: transform 0.4s var(--spring, var(--ease-out)), box-shadow 0.3s;
}
.wa-float svg { width: 1.4rem; height: 1.4rem; }
.wa-float:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 1rem 2rem -0.5rem rgba(37, 211, 102, 0.7); }
@media (max-width: 40rem) { .wa-float { width: 3.25rem; padding: 0; justify-content: center; } .wa-float span { display: none; } }

.toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 200;
    max-width: min(30rem, calc(100vw - 2rem));
    padding: 0.85rem 1.2rem;
    border-radius: var(--r-md);
    background: #0b1330;
    border: 1px solid var(--glass-line, rgba(255, 255, 255, 0.12));
    color: #eef1f7;
    font-size: 0.88rem;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translate(-50%, 1rem);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.4s var(--ease-out);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

a[data-pending] { cursor: help; }
.contact-cards a[data-pending] { color: var(--subtle); font-style: italic; }

.form-grid { display: grid; gap: 1.5rem; }
@media (min-width: 40rem) { .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-stack { display: flex; flex-direction: column; gap: 1.5rem; }
.content-section textarea { resize: vertical; }
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-consent { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.85rem; color: var(--muted); }
.content-section .form-consent input { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; flex: none; accent-color: var(--c-green); }
.content-section .form-consent label { margin: 0; font-weight: 500; font-size: 0.85rem; letter-spacing: 0; }
.form-consent a { color: var(--accent); font-weight: 600; }
.form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.button--whatsapp svg { width: 1.15rem; height: 1.15rem; flex: none; }
@media (max-width: 30rem) { .form-actions .button { flex: 1 1 100%; } }
.form-status { min-height: 1.4em; font-size: 0.9rem; font-weight: 600; }
.form-status[data-kind="ok"] { color: var(--accent); }
.form-status[data-kind="error"] { color: #e5484d; }
.form-status[data-kind="pending"], .form-status[data-kind="sending"] { color: var(--muted); }

.map-embed { margin-top: clamp(2rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 7; background: var(--surface); }
.map-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 40rem) { .map-embed { aspect-ratio: 4 / 3; } }

/* Páginas de texto legal y de servicios -------------------------------------- */
.prose { max-width: 48rem; }
.prose h2 { margin-top: 2.5rem; font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.prose h2:first-child { margin-top: 0; }
.prose ul { margin: 1rem 0 0; padding-left: 1.2rem; }
.prose li + li { margin-top: 0.4rem; }
.prose .note { margin-top: 2rem; padding: 1rem 1.2rem; border-left: 3px solid var(--c-green); background: var(--green-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 0.9rem; }

.service-lines { display: grid; gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 48rem) { .service-lines { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .service-lines { grid-template-columns: repeat(3, 1fr); } }
.service-line { display: flex; flex-direction: column; gap: 0.75rem; padding: clamp(1.5rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.service-line__num { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--accent); letter-spacing: 0.08em; }
.service-line h3 { margin: 0; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.15; }
.service-line p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.service-line ul { margin: 0.25rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; font-size: 0.88rem; }
.service-line li { position: relative; padding-left: 1.2rem; }
.service-line li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 0.45rem; height: 0.45rem; border-radius: 50%; border: 2px solid var(--c-green); }
.service-line .link-arrow { margin-top: auto; padding-top: 0.5rem; }

.error-page { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 6rem 1rem; }
.error-page .error-page__code { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(6rem, 22vw, 14rem); line-height: 0.9; letter-spacing: -0.05em; background: linear-gradient(180deg, var(--accent), transparent 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error-page p { max-width: 32rem; margin: 1rem auto 2rem; color: var(--muted); }
.error-page .button-row { justify-content: center; }

/* Clientes: dos cintas de logos en sentidos opuestos. Cada logo va a color
   sobre una tarjeta gris azulada clara (no blanca), para que las marcas con
   letras oscuras se lean también en el tema oscuro sin encandilar. El espacio entre tarjetas es margen (no gap) para que el
   bucle de la cinta calce exacto -------------------------------------------- */
.clients { --clients-tile: #dde3ee; --clients-tile-hover: #e8ecf4; }
.clients__lead { max-width: 30rem; color: var(--muted); }
.clients__rows { display: grid; gap: clamp(0.75rem, 1.5vw, 1rem); }
.clients__viewport { overflow: hidden; padding-block: 0.4rem; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.clients__list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.clients__list li {
    flex: none;
    display: grid;
    place-items: center;
    height: clamp(5.25rem, 8vw, 6.5rem);
    min-width: clamp(9.5rem, 14vw, 12.5rem);
    margin-right: clamp(0.75rem, 1.5vw, 1rem);
    padding: 0 clamp(1.25rem, 2.5vw, 2rem);
    background: var(--clients-tile);
    border: 1px solid rgba(38, 57, 138, 0.12);
    border-radius: var(--r-md, 12px);
    transition: transform 0.5s var(--spring, var(--ease-out)), background-color 0.4s var(--ease-out);
}
.clients__list li:hover { transform: translateY(-3px); background: var(--clients-tile-hover); }
.clients__list img { display: block; max-width: none; object-fit: contain; }
.clients__list.is-static { flex-wrap: wrap; justify-content: center; row-gap: 1rem; }
.clients__list.is-marquee { width: max-content; animation: clients-loop var(--dur, 45s) linear infinite; }
.clients__list--reverse.is-marquee { animation-direction: reverse; }
.clients__viewport:hover .clients__list.is-marquee { animation-play-state: paused; }
@keyframes clients-loop { to { transform: translateX(var(--loop, -50%)); } }
@media (max-width: 40rem) { .clients__list img { transform: scale(0.85); } }

/* Cinta de sectores antes del pie: avanza sola y acelera con el scroll */
.ticker {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 3.5rem) 0;
    border-top: 1px solid var(--line);
    background: var(--bg);
    -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track { display: flex; width: max-content; will-change: transform; }
.ticker__item {
    display: flex;
    align-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.5rem, 8vw, 6.5rem);
    line-height: 1;
    letter-spacing: -0.03em;
    white-space: nowrap;
    color: var(--text);
}
.ticker__item:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); }
.ticker__item::after {
    content: '';
    width: 0.32em;
    height: 0.32em;
    margin: 0 0.45em;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #8fe3a6, var(--c-green) 55%, #05461a);
    box-shadow: 0 0 20px var(--green-glow);
}
@media (hover: hover) { .ticker__item { transition: color 0.4s; } .ticker__item:hover { color: var(--accent); -webkit-text-stroke-color: var(--accent); } }

/* Pie: el nombre de la empresa enorme, que asoma desde abajo */
.footer { overflow: hidden; }
.footer__mark {
    display: block;
    margin-top: 1rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3rem, 11.5vw, 13rem); /* main.js lo ajusta al ancho exacto del contenedor */
    line-height: 0.9;
    padding-bottom: 0.04em;
    letter-spacing: -0.04em;
    text-align: center;
    white-space: nowrap;
    background: linear-gradient(180deg, var(--line-strong), transparent 85%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    user-select: none;
    transform: translateY(40%);
    transition: transform 1.6s var(--ease-out);
}
.footer__mark.is-in { transform: translateY(6%); }

/* Botón flotante de volver arriba con el avance de lectura en un anillo */
.to-top {
    position: fixed;
    right: clamp(1rem, 2vw, 1.75rem);
    bottom: clamp(1rem, 2vw, 1.75rem);
    z-index: 95;
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border: 0;
    border-radius: 50%;
    background: var(--glass);
    color: var(--text);
    box-shadow: var(--shadow-lg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem) scale(0.8);
    transition: opacity 0.4s, visibility 0.4s, transform 0.6s var(--spring), translate 0.5s var(--spring);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top svg.to-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top__ring circle { fill: none; stroke-width: 2; }
.to-top__ring .track { stroke: var(--line); }
.to-top__ring .bar { stroke: var(--c-green); stroke-linecap: round; stroke-dasharray: 145; stroke-dashoffset: calc(145 - 145 * var(--p, 0)); }
.to-top__arrow { width: 1.1rem; height: 1.1rem; transition: transform 0.45s var(--spring); }
.to-top:hover .to-top__arrow { transform: translateY(-3px); }

/* Cursor: un anillo que sigue al puntero con inercia (solo ratón) */
.cursor { position: fixed; top: 0; left: 0; z-index: 1500; pointer-events: none; mix-blend-mode: difference; }
.cursor.is-media { mix-blend-mode: normal; }
.cursor__ring {
    position: absolute;
    width: 2.25rem;
    height: 2.25rem;
    margin: -1.125rem 0 0 -1.125rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: transparent;
    opacity: 0;
    transition: width 0.45s var(--ease-out), height 0.45s var(--ease-out), margin 0.45s var(--ease-out), background-color 0.35s, border-color 0.35s, color 0.3s, opacity 0.3s;
}
.cursor__dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity 0.3s, transform 0.3s var(--ease-out); }
.cursor.is-active .cursor__ring, .cursor.is-active .cursor__dot { opacity: 1; }
.cursor.is-link .cursor__ring { width: 3.5rem; height: 3.5rem; margin: -1.75rem 0 0 -1.75rem; background: rgba(255, 255, 255, 0.9); }
.cursor.is-link .cursor__dot { transform: scale(0); }
.cursor.is-media .cursor__ring { width: 5.5rem; height: 5.5rem; margin: -2.75rem 0 0 -2.75rem; background: var(--c-green); border-color: var(--c-green); color: var(--c-ink); }
.cursor.is-media .cursor__dot { transform: scale(0); }
.cursor.is-down .cursor__ring { width: 1.75rem; height: 1.75rem; margin: -0.875rem 0 0 -0.875rem; }

/* Revelado general: más recorrido y una curva más larga */
.js-anim [data-reveal] { transform: translateY(2.25rem); transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out); }

/* Ruta del inicio: la etiqueta del km activo es una cápsula */
.km.is-current .km__name { padding: 0.3rem 0.65rem; border-radius: var(--r-pill); background: var(--green-soft); }
.route-nav__text { border-radius: var(--r-pill); }
.scroll-progress { background: linear-gradient(90deg, var(--c-navy), var(--c-green) 60%, var(--glint)); }

.hero__content { z-index: 2; }

/* ======================================================================
   16. Inventario digital de activos viales (inventario-vial.html)
   ====================================================================== */
/* Lista de tareas de cada etapa, con check verde */
.step-list { display: grid; gap: 0.55rem; margin-top: 1.5rem; }
.step-list li {
    position: relative;
    padding-left: 1.85rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
}
.step-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.15rem;
    width: 1.2rem; height: 1.2rem;
    border-radius: 50%;
    background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a9635' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}
.sector-panel.is-entering .step-list li { animation: fadeIn 0.7s var(--ease-out) both; }
.sector-panel.is-entering .step-list li:nth-child(2) { animation-delay: 0.36s; }
.sector-panel.is-entering .step-list li:nth-child(3) { animation-delay: 0.42s; }
.sector-panel.is-entering .step-list li:nth-child(4) { animation-delay: 0.48s; }
.sector-panel.is-entering .step-list li:nth-child(5) { animation-delay: 0.54s; }
/* En las etapas el número va primero, como en un plano */
.sector-panel__body > .sector-panel__metric:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* Tipos de activo: ícono de línea en una pastilla verde */
.asset-icon {
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    margin-bottom: 1.15rem;
    border-radius: var(--r-sm);
    background: var(--green-soft);
    color: var(--accent);
    transition: transform 0.6s var(--spring), background-color 0.4s;
}
.asset-icon svg { width: 1.45rem; height: 1.45rem; }
@media (hover: hover) {
    .benefit:hover .asset-icon { transform: rotate(-8deg) scale(1.12); background: var(--accent); color: var(--accent-ink); }
}

/* Ficha de atributos: tabla de dos columnas en un panel */
.asset-sheet {
    margin-top: 1.75rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}
.content-section .asset-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0.85rem 1.1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
}
.asset-sheet__sign {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 4px solid #d62d2d;
    background: #fff;
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: #111;
}
.asset-sheet table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.asset-sheet th, .asset-sheet td { padding: 0.62rem 1.1rem; text-align: left; vertical-align: top; }
.asset-sheet th { width: 38%; font-weight: 600; color: var(--muted); }
.asset-sheet td { color: var(--text); font-variant-numeric: tabular-nums; }
.asset-sheet tr + tr { border-top: 1px solid var(--line); }
.asset-sheet tr { transition: background-color 0.3s; }
.asset-sheet tr:hover { background: var(--green-soft); }

/* Infografía completa al pie de los entregables */
.infographic { margin-top: clamp(3rem, 6vw, 4.5rem); }
.infographic__link { display: block; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); }
.infographic__link img { width: 100%; height: auto; transition: transform 1.2s var(--ease-out); }
@media (hover: hover) { .infographic__link:hover img { transform: scale(1.02); } }
.infographic figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    margin-top: 0.9rem;
    font-size: 0.85rem;
    color: var(--muted);
}

/* Tecnología: etiquetas de vidrio sobre la franja fotográfica */
.tech-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; }
.tech-list li {
    padding: 0.5rem 1rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--glass-line);
    background: var(--glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
}

/* Menú en escritorio estrecho (64–80rem): seis entradas caben en una línea */
@media (min-width: 64rem) and (max-width: 79.99rem) {
    .header__container { gap: 1rem; }
    .brand__tag { display: none; }
    .header__link { padding: 0.6rem 0.6rem; font-size: 0.85rem; white-space: nowrap; }
    .header__cta { margin-left: 0.5rem; }
    .header.scrolled .header__container { padding-left: 1.1rem; }
}
.content-section > .container > p + p { margin-top: 1rem; }

/* Portadas a todo color: el video se ve tal cual. El oscurecimiento queda solo
   donde hay texto (izquierda, franja del menú y pie), sin tinte azul encima. */
.hero__media { filter: saturate(1.05) contrast(1.04); }
.hero__overlay {
    background:
        linear-gradient(180deg, rgba(6, 10, 23, 0.6) 0, rgba(6, 10, 23, 0) 200px),
        linear-gradient(90deg, rgba(6, 10, 23, 0.82) 0%, rgba(6, 10, 23, 0.5) 32%, rgba(6, 10, 23, 0.08) 62%, rgba(6, 10, 23, 0) 100%),
        linear-gradient(0deg, rgba(6, 10, 23, 0.55) 0%, rgba(6, 10, 23, 0) 38%);
}
/* El texto gana una sombra suave para seguir legible sobre zonas claras */
.hero__title, .hero__subtitle, .breadcrumb { text-shadow: 0 2px 24px rgba(6, 10, 23, 0.55); }

/* ======================================================================
   16. Capa "calzada" v12 (2026-10-20): el contenido después de la portada
   Toma el motivo del logo (una vía verde en perspectiva con su línea central
   discontinua) y lo convierte en el hilo de cada página interna:
   - el contenido sube sobre la portada como una lámina redondeada;
   - entre secciones, una vía en curva cuya línea central se pinta de verde
     con el scroll (main.js: initLanes);
   - titulares con la marca de carril, aperturas de sector compuestas,
     beneficios como tramos de una vía, servicios en columna fija, franja
     fotográfica en ventana y paneles con borde degradado.
   ====================================================================== */
:root {
    --lane-dash: repeating-linear-gradient(90deg, var(--accent) 0 0.9rem, transparent 0.9rem 1.45rem);
    --panel-edge: linear-gradient(150deg, var(--line-strong), transparent 42%, transparent 62%, rgba(10, 150, 53, 0.35));
    --panel-edge-hover: linear-gradient(150deg, var(--accent), rgba(10, 150, 53, 0.15) 45%, transparent 70%, var(--line-strong));
    --sheet-shadow: 0 -1.5rem 3rem -1.5rem rgba(0, 0, 0, 0.65);
    --road-fill: rgba(38, 57, 138, 0.4);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --sheet-shadow: 0 -1.5rem 3rem -1.5rem rgba(11, 19, 48, 0.25);
        --road-fill: rgba(38, 57, 138, 0.08);
    }
}
:root[data-theme="light"] {
    --sheet-shadow: 0 -1.5rem 3rem -1.5rem rgba(11, 19, 48, 0.25);
    --road-fill: rgba(38, 57, 138, 0.08);
}

/* La lámina: la primera sección sube sobre la portada con esquinas amplias */
.hero--page .hero__content { padding-bottom: calc(clamp(3rem, 10vh, 6rem) + 2.25rem); }
.hero--page + section {
    z-index: 2;
    margin-top: -2.25rem;
    border-radius: 2.25rem 2.25rem 0 0;
    background-color: var(--bg);
    box-shadow: var(--sheet-shadow);
}
/* Asa de la lámina: el trazo de carril centrado sobre el borde */
.hero--page + section::before {
    content: '';
    position: absolute;
    top: 0.9rem;
    left: 50%;
    width: 4.35rem;
    height: 3px;
    translate: -50% 0;
    border-radius: 2px;
    background: var(--lane-dash);
    opacity: 0.85;
}
.hero--page + .content-section--alt {
    background:
        radial-gradient(55rem 28rem at 100% 0%, rgba(10, 150, 53, 0.07), transparent 62%),
        radial-gradient(50rem 30rem at 0% 100%, rgba(38, 57, 138, 0.2), transparent 62%),
        var(--bg);
}

/* Tramo de carretera entre secciones (main.js lo inserta entre ellas, con alto
   cero, para que ninguna sección lo recorte): calzada con sombra y asfalto,
   bermas con tachas que se encienden, hitos kilométricos, una camioneta de
   levantamiento que recorre la curva y una señal informativa verde con el
   nombre de la sección siguiente */
.content-section + .content-section, .section + .section, .ruta + .section { border-top: 0; }
.lane-divider {
    position: relative;
    z-index: 4;
    height: 0;
    pointer-events: none;
    --stud: #ffd166;
}
.photo-band + .lane-divider { margin-top: clamp(6rem, 10vw, 9rem); }
.lane-divider__road {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: clamp(5.5rem, 10vw, 9.5rem);
    translate: 0 -50%;
    overflow-x: clip;
}
.lane-divider svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lane-divider .shadow { fill: none; stroke: rgba(0, 0, 0, 0.35); stroke-width: 44; filter: blur(6px); }
.lane-divider .asphalt { fill: none; stroke-width: 38; }
.lane-divider .asphalt-a { stop-color: #16245c; }
.lane-divider .asphalt-b { stop-color: #1d2f74; }
.lane-divider .shoulder { fill: none; stroke: rgba(122, 142, 214, 0.25); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lane-divider .edge { fill: none; stroke: rgba(225, 232, 255, 0.7); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.lane-divider .studs { fill: none; stroke: rgba(225, 232, 255, 0.35); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.1 34; vector-effect: non-scaling-stroke; }
.lane-divider .center { fill: none; stroke: rgba(225, 232, 255, 0.5); stroke-width: 2.4; stroke-dasharray: 18 14; vector-effect: non-scaling-stroke; }
.lane-divider__done { position: absolute; inset: 0; opacity: var(--paint-o, 1); clip-path: inset(-60% calc(100% - var(--p, 0) * 100%) -60% 0); }
.lane-divider__done .center { stroke: var(--c-green); stroke-width: 3; filter: drop-shadow(0 0 5px var(--green-glow)); }
.lane-divider__done .studs { stroke: var(--stud); stroke-width: 3.5; filter: drop-shadow(0 0 4px rgba(255, 209, 102, 0.9)); }

/* Vehículos: main.js los mueve (left, top, rotate) en cada fotograma.
   La camioneta de levantamiento va por el carril de bajada con la cámara 360°
   en la tolva, levanta polvo y lleva los faros encendidos; un auto circula en
   sentido contrario por el otro carril */
.lane-truck, .lane-car {
    position: absolute;
    left: -10%;
    top: 50%;
    translate: -50% -50%;
    opacity: 0;
    transition: opacity 0.5s;
    filter: drop-shadow(0 0.35rem 0.4rem rgba(0, 0, 0, 0.55));
}
.lane-truck { width: clamp(3rem, 4.2vw, 4.4rem); aspect-ratio: 64 / 30; z-index: 2; }
.lane-car { width: clamp(2.2rem, 3vw, 3.2rem); aspect-ratio: 48 / 24; z-index: 1; }
.lane-divider.is-live :is(.lane-truck, .lane-car) { opacity: 1; }
.lane-divider.is-static :is(.lane-truck, .lane-car) { display: none; }
.lane-truck svg, .lane-car svg { position: static; display: block; width: 100%; height: 100%; overflow: visible; }
.lane-truck svg { animation: truck-bob 0.5s ease-in-out infinite alternate; }
.lane-car svg { animation: truck-bob 0.42s ease-in-out infinite alternate-reverse; }
@keyframes truck-bob { to { transform: translate(0.4px, 0.6px); } }
.lane-truck .body { fill: #f3f5fa; }
.lane-truck .glass, .lane-car .glass { fill: #0b1330; }
.lane-truck .bed { fill: #d6dcea; }
.lane-truck .cam { fill: #0b1330; }
.lane-truck .cam-eye { fill: var(--c-green); animation: cam-blink 1.2s steps(2, jump-none) infinite; }
@keyframes cam-blink { 50% { fill: #a8f0bd; } }
.lane-car .body { fill: #8fa0cf; }
.lane-truck .lamp, .lane-car .lamp { fill: #fff6c9; }
.lane-truck .tail, .lane-car .tail { fill: #ff4d4d; }
.lane-truck .beam, .lane-car .beam { fill: rgba(255, 246, 201, 0.2); filter: blur(3px); animation: beam-flicker 2.6s ease-in-out infinite; }
@keyframes beam-flicker { 50% { opacity: 0.6; } }
/* Polvo que levanta la camioneta (sale por detrás y se disipa) */
.lane-dust { position: absolute; left: -6%; top: 50%; width: 0; height: 0; }
.lane-dust i {
    position: absolute;
    left: 0;
    top: 0;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(214, 196, 160, 0.55), transparent 70%);
    animation: dust 1.1s ease-out infinite;
}
.lane-dust i:nth-child(2) { animation-delay: 0.36s; top: -0.35rem; }
.lane-dust i:nth-child(3) { animation-delay: 0.72s; top: 0.3rem; }
@keyframes dust {
    from { transform: translate(-50%, -50%) scale(0.4); opacity: 0.9; }
    to { transform: translate(-260%, -50%) scale(2.4); opacity: 0; }
}

/* Camioneta (cartoon): se encoge al frenar, se estira al arrancar con
   líneas de velocidad; luces de freno encendidas y sin polvo mientras espera */
.lane-truck.is-braking { animation: truck-brake 0.55s var(--spring, ease-out); }
@keyframes truck-brake { 35% { scale: 0.86 1.12; } 65% { scale: 1.05 0.95; } }
.lane-truck.is-launch { animation: truck-launch 0.6s var(--ease-out); }
@keyframes truck-launch { 0% { scale: 0.9 1.08; } 40% { scale: 1.16 0.9; } }
.lane-truck.is-braking .tail { fill: #ff2a2a; filter: drop-shadow(0 0 3px #ff4d4d) drop-shadow(0 0 6px rgba(255, 77, 77, 0.7)); }
.lane-dust { transition: opacity 0.3s; }
.lane-truck.is-braking .lane-dust { opacity: 0; }
.lane-speed { position: absolute; right: 104%; top: 50%; width: 70%; height: 80%; translate: 0 -50%; opacity: 0; transition: opacity 0.2s; }
.lane-truck.is-launch .lane-speed { opacity: 1; }
.lane-speed i { position: absolute; right: 0; height: 2px; border-radius: 2px; background: rgba(243, 245, 250, 0.85); animation: speed-line 0.3s linear infinite; }
.lane-speed i:nth-child(1) { top: 15%; width: 70%; }
.lane-speed i:nth-child(2) { top: 50%; width: 100%; animation-delay: 0.1s; }
.lane-speed i:nth-child(3) { top: 85%; width: 55%; animation-delay: 0.2s; }
@keyframes speed-line { from { translate: 30% 0; opacity: 1; } to { translate: -40% 0; opacity: 0; } }

/* Controlador de tránsito (cartoon): cabezón, contorno grueso, parpadea,
   respira y agita la paleta STOP; al acercarse la camioneta grita "¡Alto!",
   luego gira la paleta a SIGA, da un saltito y le hace señas para que pase */
.lane-flagger {
    position: absolute;
    left: calc(var(--at) * 100%);
    top: var(--y);
    z-index: 3;
    width: clamp(2.5rem, 3.4vw, 3.4rem);
    aspect-ratio: 56 / 64;
    translate: -50% clamp(0.6rem, 1.1vw, 1rem);
    filter: drop-shadow(0 0.3rem 0.35rem rgba(0, 0, 0, 0.5));
}
.lane-flagger svg { position: static; display: block; width: 100%; height: 100%; overflow: visible; }
.lane-flagger svg :is(path, rect, circle, ellipse) { stroke: #0b1330; stroke-width: 1.4; stroke-linejoin: round; }
.lane-flagger .fl-cone path, .lane-flagger .fl-cone rect { fill: #ff8a1f; }
.lane-flagger .fl-white { fill: #f3f5fa; stroke-width: 0 !important; }
.lane-flagger .fl-legs { fill: #26398a; }
.lane-flagger .fl-shoe { fill: #0b1330; }
.lane-flagger .fl-vest { fill: #ff8a1f; }
.lane-flagger .fl-skin { fill: #d9a066; }
.lane-flagger .fl-cheek { fill: #ff8f80; opacity: 0.75; stroke-width: 0 !important; }
.lane-flagger .fl-eyes ellipse { fill: #0b1330; stroke-width: 0; }
.lane-flagger .fl-smile { fill: none; stroke-width: 1.2; stroke-linecap: round; }
.lane-flagger .fl-shout { fill: #7a1f2b; opacity: 0; }
.lane-flagger .fl-helmet { fill: #f3f5fa; }
.lane-flagger .fl-limb-ol { fill: none; stroke-width: 6.6 !important; stroke-linecap: round; }
.lane-flagger .fl-limb { fill: none; stroke: #ff8a1f !important; stroke-width: 3.8 !important; stroke-linecap: round; }
.lane-flagger .fl-glove { fill: #ffd166; }
.lane-flagger .fl-pole { fill: none; stroke: #d6dcea !important; stroke-width: 2 !important; stroke-linecap: round; }
.lane-flagger .paddle { transform-box: fill-box; transform-origin: center; }
.lane-flagger .paddle path { fill: #e63946; stroke: #f3f5fa; stroke-width: 1.2; }
.lane-flagger .paddle circle { fill: #2fae4f; stroke: #f3f5fa; stroke-width: 1.2; }
.lane-flagger .paddle text { fill: #fff; font-family: var(--font-display); font-size: 4.6px; font-weight: 700; text-anchor: middle; letter-spacing: 0.02em; }
.lane-flagger .paddle__go { opacity: 0; }
.lane-flagger.is-go .paddle__stop { opacity: 0; }
.lane-flagger.is-go .paddle__go { opacity: 1; }
/* Pivotes: hombro de cada brazo; parpado al centro de los ojos */
.lane-flagger :is(.fl-sign, .fl-wave, .fl-body) { transform-box: view-box; }
.lane-flagger .fl-sign { transform-origin: 35px 37.5px; }
.lane-flagger .fl-wave { transform-origin: 22.5px 37.5px; }
.lane-flagger .fl-body { transform-origin: 28px 60px; }
.lane-flagger .fl-eyes { transform-box: fill-box; transform-origin: center; }
.lane-divider.is-live .lane-flagger .fl-body { animation: fl-breathe 0.9s ease-in-out infinite alternate; }
@keyframes fl-breathe { to { transform: scale(1.03, 0.97); } }
.lane-divider.is-live .lane-flagger .fl-eyes { animation: fl-blink 3.4s infinite; }
@keyframes fl-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.1); } }
.lane-divider.is-live .lane-flagger:not(.is-go) .fl-sign { animation: fl-shake 0.7s ease-in-out infinite alternate; }
.lane-divider.is-live .lane-flagger.is-alert:not(.is-go) .fl-sign { animation-duration: 0.22s; }
@keyframes fl-shake { from { transform: rotate(4deg); } to { transform: rotate(-9deg); } }
.lane-flagger.is-alert:not(.is-go) .fl-smile { opacity: 0; }
.lane-flagger.is-alert:not(.is-go) .fl-shout { opacity: 1; }
.lane-flagger.is-go .paddle { animation: paddle-flip 0.45s var(--ease-out); }
@keyframes paddle-flip { 50% { transform: scaleX(0); } }
.lane-flagger.is-go svg { animation: fl-hop 0.5s var(--ease-out); }
@keyframes fl-hop { 40% { transform: translateY(-14%) rotate(-4deg); } 70% { transform: translateY(0) scale(1.06, 0.92); } }
.lane-divider.is-live .lane-flagger.is-go .fl-wave { animation: fl-wave 0.32s ease-in-out infinite alternate; }
@keyframes fl-wave { from { transform: rotate(-25deg); } to { transform: rotate(-115deg); } }
/* Globo de diálogo */
.lane-bubble {
    position: absolute;
    left: 96%;
    top: -4%;
    padding: 0.18rem 0.55rem;
    border-radius: 0.8rem 0.8rem 0.8rem 0.15rem;
    border: 2px solid #0b1330;
    background: #fff;
    color: #0b1330;
    font-family: var(--font-display);
    font-size: clamp(0.62rem, 0.85vw, 0.78rem);
    font-weight: 700;
    white-space: nowrap;
    transform-origin: 0 100%;
    scale: 0;
    transition: scale 0.35s var(--spring, ease-out);
}
.lane-flagger.is-alert .lane-bubble { scale: 1; }
.lane-bubble__go { display: none; color: #077028; }
.lane-flagger.is-go .lane-bubble__stop { display: none; }
.lane-flagger.is-go .lane-bubble__go { display: inline; }
.lane-bubble__stop { color: #c1121f; }

/* Hitos kilométricos: poste blanco con cabeza verde; se encienden al pasar */
.lane-post {
    position: absolute;
    left: calc(var(--at) * 100%);
    top: var(--y);
    display: flex;
    flex-direction: column;
    align-items: center;
    translate: -50% calc(-100% - clamp(1.4rem, 2.2vw, 2rem));
}
.lane-post--low { translate: -50% clamp(1.4rem, 2.2vw, 2rem); flex-direction: column-reverse; }
.lane-post i {
    width: 0.55rem;
    height: 1.35rem;
    border-radius: 0.2rem 0.2rem 0.1rem 0.1rem;
    background: linear-gradient(180deg, var(--line-strong) 0 32%, #e9edf7 32%);
    transition: background 0.4s, box-shadow 0.4s;
}
.lane-post b {
    margin-bottom: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--glass-line);
    background: var(--glass);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transition: color 0.4s, border-color 0.4s;
}
.lane-post--low b { margin: 0.3rem 0 0; }
.lane-post.is-passed i { background: linear-gradient(180deg, var(--c-green) 0 32%, #e9edf7 32%); box-shadow: 0 0 0.75rem var(--green-glow); }
.lane-post.is-passed b { color: var(--text); border-color: rgba(10, 150, 53, 0.6); }
.lane-post.is-passed i { animation: post-flash 0.7s var(--ease-out); }
@keyframes post-flash { 30% { box-shadow: 0 0 1.6rem 0.4rem var(--green-glow); transform: scaleY(1.12); } }

/* Señal informativa (verde con filete blanco, como las de la red vial) */
.lane-sign {
    position: absolute;
    right: clamp(1rem, 6vw, 7rem);
    top: var(--y);
    display: flex;
    flex-direction: column;
    align-items: center;
    translate: 0 calc(-100% - clamp(1.6rem, 2.6vw, 2.4rem));
    transform-origin: 50% 100%;
    transform: scale(0.85) translateY(0.5rem);
    opacity: 0;
    transition: opacity 0.5s var(--ease-out), transform 0.7s var(--spring);
}
.lane-sign.is-passed { opacity: 1; transform: none; }
.lane-sign__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.1rem 0.9rem;
    max-width: min(22rem, 70vw);
    padding: 0.6rem 0.75rem 0.65rem 0.95rem;
    border-radius: 0.55rem;
    background: linear-gradient(180deg, #0b8c33, #077028);
    box-shadow: inset 0 0 0 2px #077028, inset 0 0 0 4px #f3f5fa, 0 1rem 2rem -0.75rem rgba(0, 0, 0, 0.7);
    color: #fff;
}
.lane-sign__panel { overflow: hidden; }
.lane-sign__panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
    transform: translateX(-120%);
}
.lane-sign.is-passed .lane-sign__panel::after { animation: sign-glint 5.5s ease-in-out 0.6s infinite; }
@keyframes sign-glint { 0%, 70% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.lane-sign__panel small { grid-column: 1; font-size: 0.66rem; font-weight: 600; opacity: 0.85; line-height: 1.2; }
.lane-sign__panel strong {
    grid-column: 1;
    overflow: hidden;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(0.82rem, 1.1vw, 0.98rem);
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.lane-sign__panel svg { position: static; grid-column: 2; grid-row: 1 / span 2; width: 1.35rem; height: 1.35rem; }
/* Dos postes */
.lane-sign i {
    position: absolute;
    bottom: calc(-1 * clamp(1.6rem, 2.6vw, 2.4rem));
    width: 0.22rem;
    height: clamp(1.6rem, 2.6vw, 2.4rem);
    background: linear-gradient(90deg, #8d97b3, #d6dcea);
}
.lane-sign i:nth-of-type(1) { left: 22%; }
.lane-sign i:nth-of-type(2) { right: 22%; }
@media (max-width: 47.99rem) {
    .lane-post { display: none; }
    .lane-sign { right: 1rem; }
    .lane-sign__panel { max-width: 62vw; }
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .lane-divider .asphalt-a { stop-color: #c9d1e8; }
    :root:not([data-theme="dark"]) .lane-divider .asphalt-b { stop-color: #dbe1f1; }
    :root:not([data-theme="dark"]) .lane-divider .edge { stroke: #ffffff; }
    :root:not([data-theme="dark"]) .lane-divider .center { stroke: rgba(38, 57, 138, 0.45); }
    :root:not([data-theme="dark"]) .lane-divider .shadow { stroke: rgba(11, 19, 48, 0.15); }
}
:root[data-theme="light"] .lane-divider .asphalt-a { stop-color: #c9d1e8; }
:root[data-theme="light"] .lane-divider .asphalt-b { stop-color: #dbe1f1; }
:root[data-theme="light"] .lane-divider .edge { stroke: #ffffff; }
:root[data-theme="light"] .lane-divider .center { stroke: rgba(38, 57, 138, 0.45); }
:root[data-theme="light"] .lane-divider .shadow { stroke: rgba(11, 19, 48, 0.15); }

/* Titulares: la marca verde es ahora un tramo de línea central discontinua */
.content-section h2::before,
.photo-band__title::before {
    width: 4.35rem;
    height: 3px;
    border-radius: 2px;
    background: var(--lane-dash);
}
.content-section .section-head > p,
.content-section .section-head--split p { font-size: 1.05rem; line-height: 1.7; }

/* Apertura de sector: la foto sobre una lámina desplazada con curvas de nivel
   y una ficha de vidrio con el nombre de la página */
.media-stack { position: relative; isolation: isolate; padding: 0 1.25rem 1.25rem 0; }
.media-stack__plate {
    position: absolute;
    inset: 1.25rem 0 0 1.25rem;
    z-index: -1;
    overflow: hidden;
    border-radius: var(--r-lg);
    border: 0;
    background:
        radial-gradient(26rem 18rem at 100% 100%, rgba(10, 150, 53, 0.35), transparent 65%),
        linear-gradient(150deg, rgba(38, 57, 138, 0.15), rgba(38, 57, 138, 0.55));
}

.media-stack .sector-intro__media { box-shadow: var(--shadow-lg); }
.media-badge {
    position: absolute;
    left: -0.75rem;
    bottom: 2.75rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 1.1rem 0.7rem 0.75rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--glass-line);
    background: var(--glass);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: var(--shadow-lg);
    color: var(--text);
    animation: badge-float 7s ease-in-out infinite alternate;
}
.media-badge__mark {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--green-soft);
}
.media-badge__mark svg { width: 1.5rem; height: 1.5rem; }
.media-badge small { display: block; font-size: 0.72rem; font-weight: 600; color: var(--muted); line-height: 1.2; }
.media-badge strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.2; }
@keyframes badge-float { to { transform: translateY(-0.6rem); } }
@media (min-width: 56rem) { .media-badge { left: -2rem; } }

/* Texto de apertura: el párrafo se apoya en un carril vertical */
.sector-intro__text > p,
.intro > p {
    position: relative;
    padding-left: 1.4rem;
}
.sector-intro__text > p::before,
.intro > p::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35em;
    bottom: 0.35em;
    width: 3px;
    border-radius: 2px;
    background: repeating-linear-gradient(180deg, var(--accent) 0 0.8rem, transparent 0.8rem 1.3rem);
    opacity: 0.8;
}

/* Paneles: superficie con borde degradado (azul que se vuelve verde al pasar) */
.card:not(.form-card), .benefit, .item, .structure-item, .reporte-card, .evento-item,
.office-item, .pillar, .compliance-item, .contact-info, .service-line {
    border: 1px solid transparent;
    background:
        radial-gradient(24rem circle at var(--mx, 50%) var(--my, -30%), rgba(10, 150, 53, 0.13), transparent 55%) padding-box,
        linear-gradient(180deg, rgba(38, 57, 138, 0.14), transparent 70%) padding-box,
        linear-gradient(var(--surface), var(--surface)) padding-box,
        var(--panel-edge) border-box;
}
@media (hover: hover) {
    :is(.card:not(.form-card), .benefit, .item, .structure-item, .reporte-card, .evento-item, .office-item, .pillar, .compliance-item, .service-line):hover {
        border-color: transparent;
        background:
            radial-gradient(24rem circle at var(--mx, 50%) var(--my, -30%), rgba(10, 150, 53, 0.16), transparent 55%) padding-box,
            linear-gradient(180deg, rgba(38, 57, 138, 0.2), transparent 70%) padding-box,
            linear-gradient(var(--surface), var(--surface)) padding-box,
            var(--panel-edge-hover) border-box;
    }
}

/* Beneficios: tramos de una misma vía. Un nodo por tramo y la línea central
   que se pinta de verde al entrar en pantalla */
.sector-benefits:not(.asset-grid) {
    position: relative;
    gap: 1rem;
    padding-left: 2rem;
}
.sector-benefits:not(.asset-grid)::before,
.sector-benefits:not(.asset-grid)::after {
    content: '';
    position: absolute;
    left: 0.45rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: repeating-linear-gradient(180deg, var(--line-strong) 0 0.75rem, transparent 0.75rem 1.25rem);
}
.sector-benefits:not(.asset-grid)::after {
    background: repeating-linear-gradient(180deg, var(--c-green) 0 0.75rem, transparent 0.75rem 1.25rem);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.6s var(--ease-out) 0.2s;
}
.sector-benefits:not(.asset-grid).is-on::after { transform: none; }
.sector-benefits:not(.asset-grid) > .benefit { overflow: visible; }
.sector-benefits:not(.asset-grid) > .benefit::before {
    content: '';
    position: absolute;
    left: calc(-2rem + 0.45rem - 0.5rem + 1px);
    top: 1.85rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--line-strong);
    transition: background-color 0.5s var(--ease-out), border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.sector-benefits:not(.asset-grid).is-on > .benefit::before {
    border-color: var(--c-green);
    background: var(--c-green);
    box-shadow: 0 0 0 0.3rem var(--green-soft);
    transition-delay: calc(var(--k, 0) * 220ms + 300ms);
}
@media (min-width: 64rem) {
    .sector-benefits:not(.asset-grid) { padding-left: 0; padding-top: 2.5rem; gap: 1.25rem; }
    .sector-benefits:not(.asset-grid)::before, .sector-benefits:not(.asset-grid)::after {
        left: 0; right: 0; top: 0.45rem; bottom: auto;
        width: auto; height: 2px;
        background: repeating-linear-gradient(90deg, var(--line-strong) 0 0.9rem, transparent 0.9rem 1.5rem);
    }
    .sector-benefits:not(.asset-grid)::after {
        background: repeating-linear-gradient(90deg, var(--c-green) 0 0.9rem, transparent 0.9rem 1.5rem);
        transform: scaleX(0);
        transform-origin: left;
    }
    .sector-benefits:not(.asset-grid) > .benefit::before { left: 1.5rem; top: calc(-2.5rem + 0.45rem - 0.5rem + 1px); }
    /* Conector del nodo con su tarjeta */
    .sector-benefits:not(.asset-grid) > .benefit { margin-top: 0; }
}
.content-section .benefit h3 { font-size: 1.2rem; }

/* Servicios: el título a la izquierda con una vía en perspectiva (el dibujo
   del logo) y la lista a la derecha */
.services-grid { border-top: 0; gap: 0.6rem; }
.service-card {
    padding: 1.6rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background:
        linear-gradient(90deg, var(--green-soft), transparent 70%) no-repeat 0 0 / 0% 100%,
        var(--surface);
    transition: background-size 0.8s var(--ease-out), border-color 0.5s var(--ease-out), transform 0.6s var(--ease-out), padding 0.6s var(--ease-out);
}
.service-card::after { display: none; }
.content-section .service-card h3 { gap: 0; }
.content-section .service-card h3::before { transition: width 0.5s var(--ease-out), margin-right 0.5s var(--ease-out); }
@media (hover: hover) {
    .content-section .service-card:hover h3::before { margin-right: 0.75rem; }
}
@media (hover: hover) {
    .service-card:hover { background-size: 100% 100%, auto; border-color: rgba(10, 150, 53, 0.5); transform: translateX(0.35rem); }
    .content-section .service-card:hover h3 { color: var(--text); }
}
@media (min-width: 48rem) {
    .service-card { padding: 1.85rem 2rem; }
}
@media (min-width: 64rem) {
    .content-section > .container:has(> h2 + .services-grid) {
        display: grid;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
        gap: 0 clamp(3rem, 6vw, 6rem);
        align-items: start;
    }
    .content-section > .container:has(> h2 + .services-grid) > h2 { margin: 0; }
    .content-section > .container:has(> h2 + .services-grid) > h2::after {
        content: '';
        display: block;
        width: min(100%, 17rem);
        aspect-ratio: 17 / 11;
        margin-top: 2.5rem;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 110' fill='none'%3E%3Cpath d='M78 4 6 106M92 4l72 102' stroke='%237a8ed6' stroke-opacity='.55' stroke-width='1.2'/%3E%3Cpath d='M78 4h14L164 106H6z' fill='%2326398a' fill-opacity='.22'/%3E%3Cpath d='M84 8h2l.4 7h-2.8zM83.2 22h3.6l.8 12h-5.2zM82 42h6l1.2 17h-8.4zM80.4 68h9.2l1.6 24H78.8z' fill='%230a9635'/%3E%3C/svg%3E") left bottom / contain no-repeat;
    }
    .content-section > .container:has(> h2 + .services-grid) > .services-grid { margin-top: 0; }
    /* Lo que sigue a la lista (p. ej. la infografía) va en la columna derecha */
    .content-section > .container:has(> h2 + .services-grid) > h2 { grid-row: 1 / span 6; }
    .content-section > .container:has(> h2 + .services-grid) > :not(h2) { grid-column: 2; }
    .content-section > .container:has(> h2 + .services-grid) > :not(h2, .services-grid) { margin-top: clamp(2rem, 4vw, 3rem); }
    .services-grid .service-card { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
}

/* Franja fotográfica: una ventana redondeada con el texto en vidrio */
.photo-band {
    width: calc(100% - 2 * var(--gutter));
    max-width: calc(var(--max-width-container) + 6rem);
    margin: clamp(2rem, 5vw, 4rem) auto;
    border-radius: clamp(1.25rem, 3vw, 2.25rem);
    box-shadow: var(--shadow-lg);
}
.photo-band::before {
    background:
        linear-gradient(90deg, rgba(6, 10, 23, 0.82) 0%, rgba(6, 10, 23, 0.45) 50%, rgba(6, 10, 23, 0.12) 100%),
        linear-gradient(0deg, rgba(38, 57, 138, 0.22), rgba(38, 57, 138, 0.22));
}
.photo-band__inner { --bp: clamp(2rem, 5vw, 4rem); position: relative; max-width: none; padding-inline: var(--bp); }
.photo-band__inner > * { position: relative; }
.photo-band__inner::before {
    content: '';
    position: absolute;
    top: -1.75rem;
    bottom: -1.75rem;
    left: calc(var(--bp) - 1.5rem);
    width: min(calc(100% - 2 * var(--bp) + 3rem), 37rem);
    border-radius: var(--r-lg);
    border: 1px solid var(--glass-line);
    background: var(--glass);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
}
.photo-band .photo-band__title, .photo-band .photo-band__text { max-width: min(33rem, 100%); }


/* Cifras: un tablero con borde degradado; cada cifra lleva una barra que se llena */
.stats-highlight, .team-stats {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border: 1px solid transparent;
    border-radius: var(--r-lg);
    background:
        radial-gradient(40rem 18rem at 0% 0%, rgba(38, 57, 138, 0.35), transparent 65%) padding-box,
        radial-gradient(30rem 16rem at 100% 100%, rgba(10, 150, 53, 0.12), transparent 65%) padding-box,
        linear-gradient(var(--surface), var(--surface)) padding-box,
        var(--panel-edge) border-box;
}
.stats-highlight::before, .team-stats::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--topo-color);
    opacity: 0.12;
    -webkit-mask: var(--topo) center / cover no-repeat;
    mask: var(--topo) center / cover no-repeat;
}
.stat, .team-stat { position: relative; padding-bottom: 1.6rem; }
.stat::after, .team-stat::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0.4rem;
    width: 4.35rem;
    height: 3px;
    border-radius: 2px;
    background: var(--lane-dash);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s var(--ease-out) 0.35s;
}
.stat.is-visible::after, .team-stat.is-visible::after { transform: none; }
@media (min-width: 48rem) {
    .stats-highlight > :not(:first-child)::after, .team-stats > :not(:first-child)::after { left: 1.5rem; }
}
.stats-highlight > .stat > p:first-child:not(:last-child) { margin-top: 0; }
.stats-highlight > :nth-child(n), .team-stats > :nth-child(n) { padding-bottom: 1.9rem; }

/* Misión y visión: dos paneles amplios con una comilla de marca */
.principles { gap: 1rem; }
.principles article {
    position: relative;
    overflow: hidden;
    padding: clamp(1.75rem, 3.5vw, 2.75rem);
    border: 1px solid transparent;
    border-radius: var(--r-lg);
    background:
        radial-gradient(28rem 16rem at 100% 0%, rgba(10, 150, 53, 0.12), transparent 65%) padding-box,
        linear-gradient(var(--surface), var(--surface)) padding-box,
        var(--panel-edge) border-box;
}
.principles article::after {
    content: '\201C';
    position: absolute;
    right: 1.25rem;
    top: -1.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 9rem;
    line-height: 1;
    color: var(--accent);
    opacity: 0.18;
    pointer-events: none;
}
.content-section .principles h3 {
    display: inline-flex;
    padding: 0.3rem 0.85rem;
    border-radius: var(--r-pill);
    background: var(--green-soft);
    color: var(--text);
}

/* Imagen panorámica: un marco con la misma lámina que las aperturas */
.wide-media { box-shadow: var(--shadow-lg); outline: 1px solid var(--line); outline-offset: 0.6rem; }

/* Estructura de gobierno: los órganos bajan como una escalera, en su orden */
@media (min-width: 64rem) {
    .governance-structure { align-items: start; }
    .structure-item:nth-child(2) { margin-top: 2rem; }
    .structure-item:nth-child(3) { margin-top: 4rem; }
    .structure-item:nth-child(4) { margin-top: 6rem; }
    .structure-item:not(:last-child) { overflow: visible; }
    .structure-item:not(:last-child) > h3::after {
        content: '';
        position: absolute;
        top: 2.6rem;
        right: -1.15rem;
        width: 1.3rem;
        height: 2rem;
        border-top: 2px dashed var(--line-strong);
        border-right: 2px dashed var(--line-strong);
        border-radius: 0 0.6rem 0 0;
    }
}

/* Proyectos y expertise: la etiqueta del sector y el título suben al pasar */
.proyecto-card h3, .expertise-card h3, .proyecto-card p, .expertise-card p { transition: transform 0.6s var(--ease-out); }
@media (hover: hover) {
    :is(.proyecto-card, .expertise-card):hover :is(h3, p) { transform: translateY(-0.35rem); }
}

/* Logo oficial (assets/logoempresa): versión con el texto en blanco para fondos
   oscuros y versión a color para el tema claro. Cada zona decide cuál se ve. */
:root { --logo-on-dark: block; --logo-on-light: none; }
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) { --logo-on-dark: none; --logo-on-light: block; }
}
:root[data-theme="light"] { --logo-on-dark: none; --logo-on-light: block; }
.hero, .topbar, body:not(.menu-open) .header:not(.scrolled), .photo-band, .page-cta { --logo-on-dark: block; --logo-on-light: none; }
.brand { gap: 0; }
.brand__logo { height: 2.4rem; width: auto; max-width: none; }
.brand__logo--on-dark { display: var(--logo-on-dark); }
.brand__logo--on-light { display: var(--logo-on-light); }
.header .brand__logo { transition: height 0.4s var(--ease-out); }
.header.scrolled .brand__logo { height: 2.1rem; }
.footer .brand__logo { height: 2.75rem; }
@media (max-width: 47.99rem) {
    .header .brand__logo, .header.scrolled .brand__logo { height: 1.9rem; }
}

/* Fotos con esquinas redondeadas: la máscara obliga al navegador a recortar
   también cuando la imagen está en su propia capa (parallax, zoom al pasar el
   cursor); sin ella, algunos navegadores dejan las esquinas inferiores rectas */
.split__media, .sector-intro__media, .wide-media, .media-block__media,
.sector-panel__media, .project-card, .proyecto-card, .expertise-card, .region-card,
.photo-band, .infographic__link {
    overflow: hidden;
    isolation: isolate;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: linear-gradient(#000, #000);
}

/* Movimiento reducido: la vía queda completa y quieta */
@media (prefers-reduced-motion: reduce) {
    .lane-truck, .lane-car { display: none; }
    .lane-sign { transition: none; }
    .lane-flagger *, .lane-flagger svg, .lane-truck { animation: none !important; }
    .media-badge { animation: none; }
    .sector-benefits:not(.asset-grid)::after { transform: none !important; }
    .sector-benefits:not(.asset-grid) > .benefit::before { border-color: var(--c-green); background: var(--c-green); }
    .stat::after, .team-stat::after { transform: none; }
}

/* 14. Movimiento reducido -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ruta__head::after { animation: none; opacity: 0; }
    #contacto::before { animation: none; }
    .page-cta::before { animation: none; }
    .photo-band__img { transform: none !important; }
    .js-anim [data-reveal] h2::before, .js-anim h2[data-reveal]::before { transform: none; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .js-anim [data-reveal] { opacity: 1; transform: none; }
    .button:hover, .carousel__btn:hover:not(:disabled), .project-card:hover .project-card__img { transform: none !important; }
    .ambient, .cursor, .curtain { display: none; }
    .parallax { scale: none; }
}

/* Capturas del software (inventario vial): se muestran completas, sin recorte */
.media--fit { min-height: 0; align-self: center; }
.media-block__media.media--fit { aspect-ratio: auto; }
.media--fit img { position: static; display: block; width: 100%; height: auto; object-fit: contain; }
@media (hover: hover) {
    .sector-panel:hover .media--fit img { transform: none; }
}

/* Inventario vial · Lo que recibe el cliente: título y video a la izquierda, lista a la derecha */
.deliverables__video { margin: 2rem 0 2.5rem; border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; background: var(--c-night); }
.deliverables__video video { display: block; width: 100%; height: auto; }
@media (min-width: 64rem) {
    .deliverables { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0 clamp(3rem, 6vw, 6rem); align-items: start; }
    .deliverables h2 { margin: 0; }
    .deliverables__intro { position: sticky; top: 6rem; }
    .deliverables__video { margin-bottom: 0; }
    .deliverables > .services-grid { margin-top: 0; }
}