:root {
            --brand-dark: #1a524f;
            --brand-primary: #2E7D32;
            --brand-accent: #4CAF50;
        }

        /* Hero moderno y sobrio */
        .hero {
            /* Layout & caja */
            position: relative;
            overflow: hidden;
            border-radius: 16px;
            padding: clamp(1.25rem, 2vw + 1rem, 3rem);

            /* Fondo con luz sutil + gradiente de marca */
            background:
                radial-gradient(1200px 600px at -10% -10%, rgba(255, 255, 255, .14), transparent 60%),
                radial-gradient(800px 400px at 120% -10%, rgba(255, 255, 255, .10), transparent 55%),
                linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-primary) 55%, var(--brand-accent) 100%);

            color: #fff;

            /* Borde fino para “definir” el bloque */
            border: 1px solid rgba(255, 255, 255, .14);

            /* Sombra realista (tu `box-shadow: 10px` no era válido) */
            box-shadow:
                0 12px 28px rgba(0, 0, 0, .18),
                0 8px 12px rgba(0, 0, 0, .12);

            /* Sutil interacción */
            transition: transform .18s ease, box-shadow .18s ease;
        }

        @media (prefers-reduced-motion: no-preference) {
            .hero:hover {
                transform: translateY(-2px);
                box-shadow:
                    0 16px 44px rgba(0, 0, 0, .22),
                    0 10px 16px rgba(0, 0, 0, .12);
            }
        }

        /* Detalles tipográficos sugeridos (opcionales) */
        .hero .hero-title {
            margin: 0 0 .4rem 0;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: .2px;
        }

        .hero .hero-subtitle {
            margin: 0;
            color: rgba(255, 255, 255, .88);
            max-width: 60ch;
        }

        /* Botones claros sobre fondo oscuro (opcional si usas Bootstrap) */
        .hero .btn-light {
            color: #123;
        }

        /* Tabla moderna */
        .table-modern {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .table-modern thead {
            background: linear-gradient(135deg, #34495e, #2c3e50);
            color: #fff;
            font-size: 1rem;
            text-align: center;
        }

        .table-modern tbody tr {
            transition: background-color 0.2s ease-in-out;
        }

        .table-modern thead tr th {
            color: #fff !important;
        }

        .table-modern tbody tr:hover {
            background-color: #f0f5f5;
        }

        .body-fondo {
            background-image: url("assets/images/fondo-x.png");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            /* opcional: que el fondo no se desplace al hacer scroll */
            /* background-attachment: fixed; */
        }