/* ---------- CONTENEDOR PRINCIPAL ---------- */
        .tabla-div {
            display: flex;
            flex-direction: column;     /* filas apiladas verticalmente */
            width: fit-content;         /* se ajusta al ancho de las columnas */
            border: 2px solid #1e293b;
            border-radius: 12px;
            overflow: hidden;           /* para que el borde redondeado encierre todo */
            background-color: #ffffff;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
        }

        /* ---------- CADA FILA (2 filas) ---------- */
        .fila {
            display: flex;
            flex-direction: row;        /* celdas una al lado de otra */
            height: 350px;              /* altura fija por fila */
        }

        /* ---------- CADA CELDA (3 por fila) ---------- */
        .celda {
            width: 280px;               /* ancho fijo por celda */
            height: 100%;               /* ocupa toda la altura de la fila (250px) */
      
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            font-weight: 500;
            color: #0f172a;
      
            /* border-right: 2px solid #94a3b8;
            border-bottom: 2px solid #94a3b8;
            transition: background-color 0.2s ease;*/
        }

        /* Eliminamos bordes duplicados */
        .celda:last-child {
            border-right: none;
        }

        .fila:last-child .celda {
            border-bottom: none;
        }

        /* ---------- DETALLES VISUALES (opcionales) 
        .celda:nth-child(1) { background: #e6f0fa; }
        .celda:nth-child(2) { background: #f0f7ee; }
        .celda:nth-child(3) { background: #fdf6e3; }

        .fila:last-child .celda:nth-child(1) { background: #e8f0fe; }
        .fila:last-child .celda:nth-child(2) { background: #ecf7ea; }
        .fila:last-child .celda:nth-child(3) { background: #fcf3db; }---------- */

        /* Efecto hover suave */


        /* Pequeño texto de coordenadas para que se vea la estructura */


        /* ---------- RESPONSIVE (opcional) ---------- */
        @media (max-width: 1100px) {
            .tabla-div {
                transform: scale(0.85);
            }
        }
        @media (max-width: 700px) {
            .tabla-div {
                transform: scale(0.6);
            }
        }
/* ---------- DIVS INTERNOS HORIZONTALES ---------- */
        .superior {
            height: 210px;                /* 60% de la altura de la celda */
      
            align-items: center;
            justify-content: center;
      

            font-size: 1.1rem;
            font-weight: 500;
            color: #0f172a;
       
            transition: background-color 0.2s ease;
            width:280px;
            float: left;
        }

        .inferior {
            height: 140px;                /* 40% de la altura de la celda */
     
            align-items: center;
            justify-content: center;
       
            font-size: 0.95rem;
            font-weight: 400;
            color: #1e293b;
        
            transition: background-color 0.2s ease;
                width:280px;
            float: left;
        }